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

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

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

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

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

или вот так

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Написать комментарий

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

Как вывести категорию товаров Woocommerce в нужном месте?

Июль 14, 2017 г.

Woocommerce показывает каталог товаров (витрину) на странице - /shop/, которая создаётся автоматически при установке плагина. Здесь выводятся ...

Читать

Программное создание публикации в Drupal 7

Апрель 15, 2017 г.

Еще одна шпаргалка по Drupal 7. Мы создадим публикацию из PHP, добавим пользовательские поля и даже загрузим файл (изображение) в поле соответствующего типа. Сначала мы создадим структуру публикации (объект node).  Нам понадобится указать данные, ...

Читать

 

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

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



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