Использование HTML5-элемента audio в javascript

Благодаря тегу <audio>, появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере — метод canPlayType.

Доступ к audio в javascript

Если в HTML есть тег <audio>, доступ к соответствующему объекту Audio можно получить через имя тега

var audio = document.getElementsByTagName('audio')[index];

или через id

var audio = document.getElementById('my-audio-id');

Объект Audio также можно создать в js.

Создание объекта Audio в javascript

var aud = new Audio();
aud.src = 'sound.ogg';
//или
var aud = new Audio('sound.ogg');

или

$('audio').attr('src', 'audio_file.mp3')

*** Используется один из поддерживаемых форматов (mp3, wav, ogg)

Воспроизведение звука и пауза:

myaudio.play(); //воспроизведение звука
myaudio.pause(); // пауза
// после паузы воспроизведение продолжится с места остановки
myaudio.play();

Как остановить воспроизведение audio

Команды stop нет, и чтобы остановить воспроизведение звукового файла, нужно два действия — пауза и задание нулевого значения для свойства currentTime— текущее время:

// Функция stop для Audio:
HTMLAudioElement.prototype.stop = function()
{
    this.pause();
    this.currentTime = 0.0;
}
...
myaudio.stop(); // использование

События audio

loadeddata — данные загружены

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

var loaded = false;
var aud = new Audio();
aud.addEventListener('loadeddata', function() {
    loaded = true;
    aud.play();
 }, false);
aud.src = 'background.ogg';

Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.

error — обработка ошибки загрузки

aud.addEventListener('error' , function() {
    alert('ошибка загрузки файла');
}, false);
aud.src = 'nofile.ogg';

onended — окончание воспроизведения

Длительность звукового файла

var audio = document.createElement('audio');
audio.src = 'mus3.mp3';
var time = audio.duration; // time=NaN

Свойство duration может быть недоступно, если не завершена загрузка метаданных, правильно:

audio.addEventListener('loadedmetadata', function() {
     time = audio.duration;
});

Изменение свойств audio

Используем свойство muted — кнопки включения и выключения звука на странице:

<html>
<body>
<input type="button" onclick="aud.muted=true" value="Выключить" />
<input type="button" onclick="aud.muted=false" value="Включить" />
</body>
</html>

Хотелось бы выключать фоновый звук, когда посетитель сайта переключается на другое окно или вкладку браузера. Важно, что выражение muted=true сработает, если будет выполняться после завершения загрузки звукового файла, т.е. его следует поместить в обработчик события loadeddata:

var loaded = false;
var aud = new Audio();
aud.addEventListener('loadeddata', function() {
    aud.muted = true;
}, false);
aud.src = 'background.ogg';
aud.play();

Поддержка элемента Audio и форматов звуковых файлов

Для проверки поддержки форматов звуковых файлов браузером используется метод canPlayType с параметром текстовым значением MIME-типа.

audio.canPlayType('audio/ogg');

Можно явно указать кодек:

audio.canPlayType('audio/ogg; codecs="vorbis"');

canPlayType возвращает одно из 3 значений:

probably — наверное
maybe — может быть
«» (пустая строка) — формат не поддерживается

Пример проверки поддержки формата mp3

Можете проверить, Opera не поддерживает формата mp3

var audio = new Audio();
var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != "";
if(!canPlayMmp3) {
    document.write('mp3 не поддерживается!<br />');
}

*** «!!» преобразует объект строки в логический тип

Пример проверки поддержки audio и форматов файлов

function check_audio() {
    var elem = document.createElement('audio'), bool = false;
    try {
        if ( bool = !!elem.canPlayType ) {
            bool = new Boolean(bool);
            bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,'');
            bool.mp3 = elem.canPlayType('audio/mpeg;').replace(/^no$/,'');
            bool.wav = elem.canPlayType('audio/wav; codecs="1"').replace(/^no$/,'');
            bool.m4a = (elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;')).replace(/^no$/,'');
        }
    }
    catch(e) { }
    return bool;
}

var b = check_audio();
if(!b) {
    document.write('Audio не поддерживается');
}
else {
    var formats = ['ogg', 'mp3', 'wav', 'm4a'];
    for(var i = 0; i < formats.length; i++) {
        document.write(formats[i] + ' - ' + b[formats[i]] + '<br />');
    }
}

Если функция check_audio возвращает false, браузер не поддерживает элемент audio. Если элемент audio поддерживается, проверяется возможность использования форматов файлов ogg, mpeg, wav и m4a.