df

CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page?

This article is about a little trick to pull that off. It’s actually a strict implementation of the HTML and CSS, so it’s not really a hack. But… let’s be honest, it’s still kind of a hack. I wouldn’t recommend necessarily using it in production, where audio should probably be controlled with native elements and/or JavaScript.

#The trick

There are a few alternatives to playing sounds with CSS, but the underlying idea is the same: inserting the audio file as a hidden object/document within the web page, and displaying it whenever an action happens. Something like this:

This code uses an tag, but we could also use with similar results:

A quick note on the demo and this technique. I developed a small piano on CodePen just with HTML and CSS using this technique about a year ago. It worked great, but since then, some things have changed and the demo doesn’t work on CodePen anymore.

Перевод

Язык CSS отвечает за стилевое форматирование, создание макета и визуальное представление страницы. Он выводит цвета, настраивает размеры и анимацию. Но знали ли вы, что с его помощью можно также контролировать воспроизведение звуков на веб-странице?

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

#Фокус

Существует несколько альтернативных способов воспроизведения звуков с помощью языка CSS, но суть у них общая: встраивание аудиофайла в качестве скрытого объекта или документа в веб-страницу и его отображение при каждом действии. Примерно так выглядит отрезок кода:

В примере используется тег , но аналогичный результат получается и при использовании тега :

Небольшое примечание к демонстрации примера и к описанному приему: с его помощью около года назад я разработал спинет на платформе CodePen. Все отлично воспроизводилось, но с того времени многое поменялось, и демонстрация больше не работает на CodePen.