Меню ×
Использование HTML5-элемента audio в JavaScript

Использование 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')
	
Используется один из поддерживаемых форматов (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 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.

Похожие материалы

Область видимости переменной — это часть контекста выполнения, в котором эта переменная существует. Область видимости определяет, есть ли у вас доступ к переменной в данном контексте выполнения.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае Ajax) или сложно из-за структуры меню и тут нам на помощь приходит JavaScript, а точнее jQuery

наверх