Html5 audio with javascript

Html5 audio with javascript

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

Доступ к audio в javascript

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

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

 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 — кнопки включения и выключения звука на странице:

Хотелось бы выключать фоновый звук, когда посетитель сайта переключается на другое окно или вкладку браузера. Важно, что выражение 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; codecs="vorbis"'); 

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

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

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

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

 var audio = new Audio(); var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != ""; if(!canPlayMmp3)

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

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

Источник

Освоение HTML5 тега audio

С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

Используем для вставки звукового файлу на страницу

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

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

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.

Отображение элементов управления

Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .

Различные форматы файлов

поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.

Указываем MIME-тип файлов

При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .

Для старых браузеров

А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .  

Буферизация файлов

• none — если вы не хотите использовать буфер файлов;
• auto — если вы хотите, чтобы браузер беферизировал файл целиком;
• metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).

Управление воспроизведением через JavaScript

Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:

  
Воспроизведение Пауза Громкость + Громкость - 
 

Источник