Работаем с HTML5 тегом audio из javascript

В HTML5 появился тег для вставки проигрывателя аудио-файлов. Т.е. нам уже не нужно встраивать Flash проигрыватель и т.п, можно обойтись средствами браузера для проигрывания аудио-трека (-ов).

Далее я расскажу о использовании тега и работе с ним средствами javascript.

Спецификация тега, поддерживаемые браузеры, типы аудио-файлов описаны вот тут.

Его можно использовать в двух вариантах —

или вот так

Если не указать ключ controls, то плеер, сгенерированный браузером не будет показан на странице в браузере. Вернее у нас будет пустой контейнер нулевой высоты, если высота не задана стилями. Пользователь не сможет управлять воспроизведением. Такой вариант подойдет либо для фоновой звуковой дорожки к веб-странице, либо в качестве скрытого плеера, управляемого скриптами.

Фоновый трек на вашей веб-странице

Если перед вами стоит именно такая задача, то скорее всего вы добавите пару флажков в проигрыватель:

Т.е. зададите автоматическое воспроизведение трека «по кругу» при загрузке страницы.

Управление audio плеером из скрипта (javascript).

Как всегда подобные вещи лучше рассматривать на практическом примере. Пусть у нас будет пара кнопок на сайте, нажимая которые, вы будете проигрывать одну из двух мелодий. При этом, мы будем использовать один и тот же элемент audio. Путь до трека я буду хранить в специальном аттрибуте — data-src каждой из кнопок.

HTML код будет примерно такой:

Далее нам нужно привязать событие нажатия клавиши к нашим импровизированным контейнерам-кнопкам. Я предполагаю, что с помощью каскадных стилей вы оформили внешний вид этих кнопок. При нажатии кнопка будет получать дополнительный CSS стиль — «on», чтобы мы могли задать отличное оформление активной и неактивной кнопок.

Например, в неактивном состоянии на кнопке выводится значок паузы, а при активации (добавлении стиля «on») — картинка запущенного проигрывателя.

Вот как будет выглядеть скрипт, привязывающий работу плеера к нашим кнопкам:

Если треков много, то использование одного проигрывателя «на всех» — это + в плане оптимизации ресурсов компьютера.

Управление громкостью тега AUDIO.

Кроме «стоп» и «играй», есть возможность манипулировать громкостью. За это отвечает свойство объекта — volume.

Суть в том, что вы можете выставить значение как коэффициент от номинала общей громкости от нуля до единицы. 0.0 — громкость «на нуле», 1 — на полную громкость. Значения более единицы не добавят амплитуды свыше 1.

Если ассоциировать этот параметр с ползунком, то можно запрограммировать управление громкостью проигрывателя.

Если вам интересны и другие возможности управления объектом проигрывателя, предоставляемого браузером, читайте следующие статьи:

Мало букафф? Читайте есчо !

Единицы размеров в CSS, отличия между REM, EM, PX и т.п.

Июль 15, 2025 г.

В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими. EM - размер относительно размера шрифта родителя [crayon-687ae2b6a3bb3585907421/] 2em внутри .child ...

Читать

Встраиваем в форму drug-n-drop загрузчик файлов

Май 8, 2017 г.

Загрузка файлов, наверное, самая сложная тема при работе с формами в веб-приложениях. Стандартный элемент формы <input> для загрузки файла, его внешний ...

Читать

PHP: функция преобразования к каноническому пути

Январь 26, 2021 г.

На замену realpath, который работает только с реально существующими файлами и папками UNIX, а также не работающий для ссылок, я написал функцию получения канонического пути. В документации встречается функция eio_realpath, которая требует подключения ...

Читать

Работа с фрагментами в kotlin

Февраль 13, 2025 г.

Небольшой гайд по работе с фрагментами в android studio. Фрагменты чем то напоминают фреймы в html. Фрагменты обладают многими возможностями, которые есть у активити (Activity), имеют свой lifecycle, также работают с viewModel и т.п. И конечно же фрагмент ...

Читать
 

Комментарии к «Работаем с HTML5 тегом audio из javascript»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: