В HTML5 появился тег для вставки проигрывателя аудио-файлов. Т.е. нам уже не нужно встраивать Flash проигрыватель и т.п, можно обойтись средствами браузера для проигрывания аудио-трека (-ов).
Далее я расскажу о использовании тега и работе с ним средствами javascript.
Спецификация тега, поддерживаемые браузеры, типы аудио-файлов описаны вот тут.
Его можно использовать в двух вариантах —
|
1 |
<audio src="my-audio-track.mp3" controls></audio> |
или вот так
|
1 2 3 4 |
<audio controls> <source src="my-audio-track-1.mp3" type="audio/mpeg"> <source src="my-audio-track-2.mp3" type="audio/mpeg"> </audio> |
Если не указать ключ controls, то плеер, сгенерированный браузером не будет показан на странице в браузере. Вернее у нас будет пустой контейнер нулевой высоты, если высота не задана стилями. Пользователь не сможет управлять воспроизведением. Такой вариант подойдет либо для фоновой звуковой дорожки к веб-странице, либо в качестве скрытого плеера, управляемого скриптами.
Фоновый трек на вашей веб-странице
Если перед вами стоит именно такая задача, то скорее всего вы добавите пару флажков в проигрыватель:
|
1 |
<audio srс="my-audio-track.mp3" autoplay loop></audio> |
Т.е. зададите автоматическое воспроизведение трека «по кругу» при загрузке страницы.
Управление audio плеером из скрипта (javascript).
Как всегда подобные вещи лучше рассматривать на практическом примере. Пусть у нас будет пара кнопок на сайте, нажимая которые, вы будете проигрывать одну из двух мелодий. При этом, мы будем использовать один и тот же элемент audio. Путь до трека я буду хранить в специальном аттрибуте — data-src каждой из кнопок.
HTML код будет примерно такой:
|
1 2 3 |
<div id="melody-1" class="button" data-src="my-audio-track-1.mp3"></div> <div id="melody-2" class="button" data-src="my-audio-track-2.mp3"></div> <audio id="my-hidden-player" loop></audio> |
Далее нам нужно привязать событие нажатия клавиши к нашим импровизированным контейнерам-кнопкам. Я предполагаю, что с помощью каскадных стилей вы оформили внешний вид этих кнопок. При нажатии кнопка будет получать дополнительный CSS стиль — «on», чтобы мы могли задать отличное оформление активной и неактивной кнопок.
Например, в неактивном состоянии на кнопке выводится значок паузы, а при активации (добавлении стиля «on») — картинка запущенного проигрывателя.
Вот как будет выглядеть скрипт, привязывающий работу плеера к нашим кнопкам:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> jQuery('.button').bind("click", function(event) { if (jQuery(this).hasClass('on')) { //если данная мелодия уже проигрывается //снимаем флаг ON jQuery(this).removeClass('on'); //останавливаем проигрыватель jQuery('#my-hidden-player').get(0).pause(); } else { //если данная мелодия не проигрывается в текущий момент //выключаем все остальные кнопки jQuery('.button').removeClass('on'); //добавляем класс ON jQuery(this).addClass('on'); var pl = jQuery('#my-hidden-player').get(0); //останавливаем текущую мелодию pl.pause(); //устанавливаем новый источник pl.src = jQuery(this).attr('data-src'); //включаем проигрывание pl.play(); } }); </script> |
Если треков много, то использование одного проигрывателя «на всех» — это + в плане оптимизации ресурсов компьютера.
Управление громкостью тега AUDIO.
Кроме «стоп» и «играй», есть возможность манипулировать громкостью. За это отвечает свойство объекта — volume.
|
1 2 3 4 |
//выбрали объект проигрывателя var pl = jQuery('#player').get(0); //ставим громкость на 50%; pl.volume = 0.5; |
Суть в том, что вы можете выставить значение как коэффициент от номинала общей громкости от нуля до единицы. 0.0 — громкость «на нуле», 1 — на полную громкость. Значения более единицы не добавят амплитуды свыше 1.
Если ассоциировать этот параметр с ползунком, то можно запрограммировать управление громкостью проигрывателя.
Если вам интересны и другие возможности управления объектом проигрывателя, предоставляемого браузером, читайте следующие статьи: