HTML5: элемент Audio

Данный элемент позволяет вам встраивать аудио-файлы в любую веб-страницу, а также манипулировать объектом, используя javascript. Что более важно, технология не требует дополнительных плагинов, и поддерживается нынче всеми браузерами.

Поддержка спецификации браузерами

Самый простой способ проверки — попробовать динамически создать элемент/объект и проверить существование какой-либо функции. Что-то вроде такого:

var hasAudio = !!(document.createElement('audio').canPlayType);

В элементы <audio> и <video> можно помещать альтернативное содержимое для случаев, если дескриптор не поддерживается. Просто добавьте текст необходимый в дескриптор:

<audio src="audio.mp3" controls>
   Ваш браузер не поддерживает элемент "audio". Кэп считает, что у вас IE.
</audio>

Кросс-браузерность

Браузеры не все контейнеры воспринимают. В IE .mp3, FireFox и Opera .ogg и .wav. Так что, лучше подстраховаться и оба варианта реализовать:

<audio controls>
   <source src="audio.mp3"> </source>
   <source src="audio.ogg"> </source>
</audio>

Браузер будет воспроизводить тот формат, который поддерживает.

Атрибуты элемента Audio

Элементы управления

Атрибут controls сообщает браузеру, что необходимо отобразить обычные пользовательские элементы управления, позволяющие запускать мультимедийные элементы, останавливать, а так же регулировать громкость воспроизведения. Если убрать атрибут controls, то указанные элементы управления окажутся скрытыми, и у пользователя не будет никакой возможности начать воспроизведение. Такой вариант может понадобиться в случае, если вы хотите запустить фоновую музыку, как например.

К слову, при использовании <video>, если даже опустить атрибут controls, то видео всё равно будет отображаться.

И да, кстати, панель управления будет отличаться в зависимости от браузеров. В том же iPhone/Android будет отсутствовать ползунок громкости.

Автоматическое воспроизведение звука

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

<audio controls autoplay>
   <source src="audio.mp3"> </source>
   <source src="audio.ogg"> </source>
</audio>

Зацикливание/повтор воспроизведения

Если добавить атрибут loop, то звук будет крутиться бесконечно:

<audio controls loop>
   <source src="audio.mp3"> </source>
   <source src="audio.ogg"> </source>
</audio>

Предварительная загрузка

Можно использовать атрибут preload, указав тем самым браузеру, чтобы тот подгрузил сам файл. Так что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play.

Возможные значения:

• none – браузер не будет грузить автоматически файл.
• metadata – как и в случае с none, файл не будет грузиться автоматически, но браузер можно подгрузить метаданные по файлу: продолжительность там и др.
• auto – вы позволяете браузеру загружать файл.

<audio controls preload="none">
   <source src="audio.mp3"> </source>
   <source src="audio.ogg"> </source>
</audio>

Доступные для чтения атрибуты

• duration — длительность воспроизведения. Возвращает NaN, если эта характеристика неизвестна.
• paused – возвращает true, если воспроизведение приостановлено. По умолчанию, если воспроизвдение не начиналось, возвращает true.
• ended – возвращает true, если воспроизведение завершено.
• startTime – возвращает значение, соответствующее самому раннему моменту времени, когда может быть начато воспроизведение. Обычно это 0.0, если только элемент не потоковый и в буфере не осталось предыдущее содержимое.
• error – код ошибки, если она возникла.
• currentSrc – возвращает строку, представляющую файл, который в настоящее время отображается или загружается. Это значение будет соответствовать элементу source, выбранному браузером.

Наиболее часто используемые функции

• load() — загружает медиафайл и подготавливает его к воспроизведению. Обычно необходимости в вызове этой функции не возникает, если только сам элемент не создаётся динамически. Используется для заблаговременной загрузки данных, подлежащих воспроизведению.
• play() – загружает (если это необходимо) и воспроизводит медиафайл. Воспроизведение начинается с самого начала файла, если только до этого оно не было приостановлено.
• pause() – приостанавливает воспроизведение файла, если он проигрывается в настоящее время.
• canPlayType(тип) – проверяет, способен ли элемент обеспечить воспроизведение файлов с заданным типом.

Работа со звуком

Можно кнопки управления самим сделать. Вроде такого:

<audio  id="audio1" controls preload="auto">
   <source src="audio.mp3"> </source>
   <source src="audio.ogg"> </source>
</audio>
<input type="button" id="toggleButton" onclick="toggleMusic('audio1');" value="Воспроизведение">
<input type="button" id="stopButton" onclick="stopMusic('audio1');" value="Остановка">

Ну и код по обработке нажатий кнопок:

function toggleMusic(id)
{
   var music = document.getElementById(id);
   var toggle = document.getElementById('toggleButton');
   if(music.paused || music.ended)
   {
      music.play();
      toggle.value = "Пауза";
   }
   else
   {
      music.pause();
      toggle.value = "Воспроизведение";
   }
}

function stopMusic(id)
{
   var music = document.getElementById(id);
   var toggle = document.getElementById('toggleButton');
   toggle.value = "Воспроизведение";
   music.pause(); 
   music.currentTime = 0;
}

Вот как пример:

Кастомизация элементов управления

Согласитесь, хотелось бы самим дизайн сделать для кнопок. Я лично для этого юзаю различные плагины. Принцип работы их прост: они сам элемент <audio> делают скрытым, создают свои кнопки и с помощью них вызывают функции скрытого элемента.

Мне больше всего нарвится плагин MediaElement.js. Его достоинство в том, что если браузер не поддерживает HTML5, то будет использоваться Flash/Silverligh. Для юзера (да и для программиста) всё прозрачно =3

Использовать просто. Для начала подключаем нужные файлы (их на сайте плагина можно скачать):

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />

Сама песня:

<audio id="audio2" src="audio.mp3" type="audio/mp3" controls="controls"></audio>

Ну и использование плагина:

$(document).ready(function() 
{
   $('#audio2').mediaelementplayer(
   {
      alwaysShowControls: true,
       features: ['playpause','volume','progress','duration'],
       audioVolume: 'horizontal',
       audioWidth: 400,
       audioHeight: 30
   });
});

Собственно всё, теперь таблицу стилей меняйте на своё усмотрение и радуйтесь (: Пример работы плагина внизу: