Использование 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 myAudio = new Audio();
myAudio.src = 'sound.ogg';
//или
var myAudio = new Audio('sound.ogg');
Создание объекта Audio в jQuery
$('audio').attr('src', 'audio_file.mp3')
Воспроизведение звука и пауза:
//воспроизведение звука
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 myAudio = new Audio();
myAudio.addEventListener('loadeddata', function() {
loaded = true;
myAudio.play();
}, false);
myAudio.src = 'background.ogg';
Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.
error - обработка ошибки загрузки
myAudio.addEventListener('error' , function() {
alert('ошибка загрузки файла');
}, false);
myAudio.src = 'nofile.ogg';
onended - окончание воспроизведения
Длительность звукового файла
var audio = document.createElement('audio');
audio.src = 'mus3.mp3';
// time=NaN
var time = audio.duration;
Свойство 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 myAudio = new Audio();
myAudio.addEventListener('loadeddata', function() {
myAudio.muted = true;
}, false);
myAudio.src = 'background.ogg';
myAudio.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 не поддерживается!
');
}
Пример проверки поддержки audio и форматов файлов
<script>
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]] + '
');
}
}
</script>
Если функция check_audio возвращает false, браузер не поддерживает элемент audio. Если элемент audio поддерживается, проверяется возможность использования форматов файлов ogg, mpeg, wav и m4a.
Возможно, вам будет интересно
Плавная кнопка "Наверх" на jQuery
JavaScript - отслеживание изменения ориентации на мобильных устройствах
Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch
Чистый код на JavaScript, 5 рекомендаций которые улучшат Ваш код.
