меню

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


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

Три способа понять промисы

Promise (обычно их так и называют «промисы») – предоставляют удобный способ организации асинхронного кода. В современном JavaScript промисы часто используются в том числе и неявно, при помощи генераторов.

Семь важных функций JavaScript

Раннее в JavaScript, когда почти для всего нужна была специальная функция, потому что браузеры реализовывали по своему не только новые, но и базовые функции, такие как addEventListener и attachEvent. Времена изменились, но есть несколько функций, которые каждый разработчик должен иметь в своем арсенале, чтобы повысить производительность работы.

Чистый код на JavaScript, 5 рекомендаций которые улучшат Ваш код.

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

JavaScript - отслеживание изменения ориентации на мобильных устройствах

Если Ваше мобильное приложение поддерживает только портретную или только горизонтальную ориентацию, то есть большая вероятность того, что некоторые элементы придётся менять, в зависимости от положения устройства.

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

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

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

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

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

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

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