Воспроизведение звуков с помощью CSS

0 ∞

Эта статья рассказывает о способе, который позволяет воспроизводить звук на веб-странице с помощью CSS. Но я не рекомендую использовать его там, где проигрывание звукового контента можно реализовать с помощью <audio> и JavaScript.

Реализация

Воспроизведение звуков с помощью CSS основано на вставке аудиофайла в HTML-код в виде скрытого объекта и его проигрывании:

<style>
  embed { display: none; }
  button:active + embed { display: block; }
</style>

<button>Play Sound</button>
<embed src="path-to-audio-file.mp3" />

Приведенный выше код использует тег <embed>. Но также можно применять <object>:

<object data="path-to-audio-file.mp3"></object>

Используя эту технику, около года назад я создал пианино на чистом HTML / CSS. Оно отлично работало, но сейчас оно больше не работает на CodePen.

В примере использует embed или object вместо audio, поэтому импортированный файл подвергается более строгим проверкам безопасности.

Согласно нормам политики контроля доступа к сторонним источникам (CORS) аудиофайл должен использовать тот же протокол и домен, что и страница, на которую он импортирован. Даже перевод звука в base64 больше не поможет. А чтобы его услышать, пользователям нужно разрешить воспроизведение звука на веб-странице в настройках браузера. Кроме этого теперь браузеры воспроизводят звуки только один раз.

Ограничения CORS можно обойти, если у вас есть контроль над серверами и файлами.

Анимация SVG с помощью CSS

Почему так?

Теорию, лежащую в основе подобного поведения можно найти в определении тега <embed>. Если этот элемент становится потенциально активным, пользовательский агент должен поставить его задачу в очередь и выполнить ее.

По крайней мере, так должны вести себя все браузеры. Но они этого не делают.

Поддержка браузерами

Это работает в Opera и Google Chrome. Тем не менее, этот подход не будет работать в других браузерах на базе движка Chromium. В Safari, Internet Explorer или Microsoft Edge для Windows данная реализация также работать не будет. Браузер Firefox будет воспроизводить все звуки одновременно только при загрузке страницы.

В целом, это лишь забавный CSS-трюк. Но он не годится для практического применения.