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

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

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

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

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

или вот так

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript - как удалить элемент массива

Ноябрь 14, 2016 г.

Javasctipt. Есть массив из N элементов. Нужно удалить i-й. Решение: Нам нужен новый массив без i-го элемента. Если это не хеш, то используем функцию объекта Array.splice().  [crayon-5bcd83c494f2e681457131/] Функция позволяет не только удалять, ...

Читать

Как узнать версию MySQL?

Сентябрь 3, 2018 г.

Получить версию бд можно как из консоли, так и средствами языка mySQL. Версия из консоли UNIX Тут все просто. Получаем версию из консоли. [crayon-5bcd83c4955ce634709894/] Версия из SQL консоли Как получить версию mySQL не из unix консоли, а средствами ...

Читать

 

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

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



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