меню

Благодаря тегу 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.


Возможно, вам будет интересно

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

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

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

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

Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch

Как фронтенд-разработчики мы часто используем try...catch в JavaScript для обработки ошибок. В этой статье я поделюсь десятью полезными советами, которые помогут вам более уверенно работать с исключениями.

Управление версиями Node.js с помощью nvm в Windows

Вопрос экономии времени и удобства окружения разработчика — штука сложная. Работая с Node.js, иногда приходится тестировать своё приложение не только в той версии, которую используете вы, но и в тех, что были выпущены до неё или даже после.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту