Воспроизведение звуков с помощью CSS
Воспроизведение звуков – ключ к созданию живых и реалистичных мультимедийных проектов. В статье вы узнаете, как правильно работать с аудиофайлами и управлять их проигрыванием для разных целей.
Мы разберём, какие инструменты и настройки помогут добиться чистого и качественного звучания. Вы получите простые советы по интеграции звуков в проекты и избежанию распространённых ошибок.
Реализация
Воспроизведение звуков с помощью 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 можно обойти, если у вас есть контроль над серверами и файлами.
Почему так?
Теорию, лежащую в основе подобного поведения можно найти в определении тега <embed>. Если этот элемент становится потенциально активным, пользовательский агент должен поставить его задачу в очередь и выполнить ее.
По крайней мере, так должны вести себя все браузеры. Но они этого не делают.
Поддержка браузерами
Это работает в Opera и Google Chrome. Тем не менее, этот подход не будет работать в других браузерах на базе движка Chromium. В Safari, Internet Explorer или Microsoft Edge для Windows данная реализация также работать не будет. Браузер Firefox будет воспроизводить все звуки одновременно только при загрузке страницы.
В целом, это лишь забавный CSS-трюк. Но он не годится для практического применения.
Комментарии