<audio>

В последние годы популярность мультимедийных сайтов возросла. Веб не был построен с таким большим содержанием мультимедиа. Для отображения мультимедийного контента в старых браузерах пока еще требуется использование платформы Adobe. HTML5 включает в себя поддержку аудио в интернете без использование платформы Adobe.

Оглавление:
  1. Аудиоплеер
  2. Обработка аудиотегов
  3. Атрибуты
  4. Определить поддержку аудиоформата
  5. Предварительная загрузка аудио перед воспроизведением
  6. Циклы
  7. Несколько аудиотегов
  8. Стратегия синхронизации

Преимущества HTML5 над HTML 4.01 в том что HTML5 включает в себя аудиотеги.

Аудиоплеер

Многие браузеры уже начали поддерживать элемент HTML5 <audio>. Сейчас есть только 3 аудио формата, которые поддерживают большинство браузеров.

Поддержка аудиоформата
Браузер Ogg Vorbis WAV MP3
Chrome
Firefox
IE9
Safari
Opera

По этой таблице видно, что больше половины браузеров поддерживают аудио HTML5. Это означает что большинство пользователей вашего сайта услышат на странице сайта музыку, стихи, смех …

Поддержка аудиотега

к меню ↑

Обработка аудиотегов

Вот код для подключения аудио файлов.

<audio controls src="audio.wav" />
Если вы читаете это, значит ваш браузер не
поддерживает теги HTML5 аудио.
</audio>

Так будет работать только в Google Chrome, Firefox 4.0 +, Opera 10.0 +. Но не будет работать в Internet Explorer, потому что он не поддерживает формат Wav.
Internet Explorer поддерживает только Mp3. Но мы изменим код, и добавим аудио в разных форматах, чтобы он работал во всех браузерах, как мы это делали с HTML5 видео.

Вот модифицированный код:

<audio controls>
 <source src="audio.mp3" type="audio/mpeg" />
 <source src="audio.ogg" type="audio/ogg" />
 <source src="audio.wav" type="audio/wav" />

Если вы читаете это, значит ваш браузер не
поддерживает теги HTML5 аудио.
</audio>

Браузер выбирает один из трех поддерживаемых им аудио-форматов и воспроизводит аудио файл. Если браузер не поддерживает аудиотег HTML5, будет показано уведомление:

Если вы читаете это, значит ваш браузер не поддерживает теги HTML5 аудио.
к меню ↑

Атрибуты

Таблица с различными атрибутами управления аудио HTML5.

Управление аудио HTML5
Атрибут Описание
controls Элементы управления
autoplay Воспроизведение аудио автоматически
loop Повторное воспроизведение
src Путь к аудиофайлу

Определить поддержку аудиоформата

Выяснить какой формат использовать с помощью JavaScript немного сложнее, чем подключение простой модели исходного элемента.

Метод CanPlayType принимает тип аудио пантомимы, и кодек параметров (опционально), и возвращает одну из трех строк.

Пример для трех типов аудио форматов (MP3), OGG, AAC.

<script type/javascript>
        function checkAudioCompat() {
            var myAudio = document.createElement('audio');

            if (myAudio.canPlayType) {
                // CanPlayType returns maybe, probably, or an empty string.

                if ( "" != myAudio.canPlayType('audio/mpeg')) {
                    alert("mp3 supported");
                }

                if ( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {
                    alert("ogg supported");
                }

                if ( "" != myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')) {
                    alert("aac supported");
                }
            }
            else {
                alert("no audio support");
            }
        }
    </script>
</head>
<body>
    <button onclick="checkAudioCompat();">
        Какой аудиоформат воспроизводится?
    </button>
</body>
к меню ↑

Предварительная загрузка аудио перед воспроизведением

Для предварительной загрузки аудио перед воспроизведением спецификация HTML5 <audio> описывает три возможных значения:

  • "none" эта опция работает особенно хорошо, так как снижает пропускную способность предварительной загрузки. Когда пользователь слушает аудио с помощью визуальных элементов управления по умолчанию или с помощью JavaScript методов load(), play (), браузер начнет извлечение аудио потока.
  • "metadata" этот параметр рекомендуется использовать если делать управления плеером.
  • "auto" позволяет предварительно загрузить все аудио для воспроизведения.

по умолчанию браузер использует "none" если не добавить "авто". Если нужен другой расклад, не забудьте указать какой перед src.

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

Отключение кэша F12 Инструменты
Отключение кэша
Сеть с предварительной загрузкой
Предварительная загрузка = none:
Сеть с предварительной загрузки метаданных
Предварительная загрузка = metadata:
Сеть с автоматической предварительной нагрузкой
Предварительная загрузка = auto:

Также можно узнать когда браузер на самом деле готов воспроизвести файл. Получить такую информацию можно используя событие "canplaythrough".

var audio = document.createElement("audio");
  audio.src = "audio/sample.mp3";
  audio.addEventListener("canplaythrough", function () {
  alert('Файл загружен и готов к воспроизведению!');
}, false);

Демо

к меню ↑

Циклы

Другой частый запрос в сценариях с аудио является возможность зациклить аудио. В HTML5 аудио это делается с помощью атрибута loop.

<audio src="audio.mp3" autoplay loop></audio>

Демо

Управление циклом: аудио файл программно вызывает метод audio.play() который позволяет управлять паузой от одного цикла к другому.

var audio = document.createElement("audio");
  audio.src = "piano/3C.mp3";
  audio.addEventListener('ended', function () { // Ждать 500 миллисекунд перед следующим циклом
  setTimeout(function () { audio.play(); }, 500);
  }, false);
  audio.play();

Обратите внимание, что вызов audio.play() выполняется для аудио элемента перед воспроизведением и не будет иметь никакого эффекта. Если нужно отменить и перезапустить воспроизведение, то вам нужно сбросить CurrentTime.

var audio = null;
  audio = document.createElement("audio");
  audio.src = "piano/3C.mp3";
  audio.addEventListener('ended', function () {
  audio.play();
}, false);

 function play() {
  audio.play();
 }

  function restart() {
   audio.currentTime = 0;
   audio.play();
  }

Демо

к меню ↑

Несколько аудиотегов

Сценарий ниже позволяет наложить треки друг на друга (то есть перекрытие звуков), вы можете достичь этого результата создав несколько аудио тегов указывая путь на один и тот же файл. Такой же подход работает, если вы используете различные аудио файлы.

Следующий фрагмент кода показывает, как загружать и воспроизводить несколько звуковых файлов с помощью разметки. Все сэмплы имеют одинаковую длину, а в конце воспроизведения они начнутся с начала. Заметьте, что они автоматически синхронизируются по разным циклам, сочетание этих 5-ти аудио треков будет играть как один аудио файл.

<audio src="audio/Bass.mp3" autoplay loop></audio>
<audio src="audio/Drum.mp3" autoplay loop></audio>
<audio src="audio/Crunch.mp3" autoplay loop></audio>
<audio src="audio/Guitar.mp3" autoplay loop></audio>
<audio src="audio/Pizzicato.mp3" autoplay loop></audio>

Демо

Хотя такой подход очень прост и прямолинеен, в большинстве случаев разработчики предпочитают создавать аудио треки программно. Следующий фрагмент кода показывает как добавить 3-ри аудио файла динамически с помощью кода, что бы получить аккорд до-мажор.

AddNote("3C");
AddNote("3E");
AddNote("3G");

 function AddNote(name) {
  var audio = document.createElement("audio");
  audio.src = "piano/" + name + ".mp3";
  audio.autoplay = true;
}

Демо

Этот код работает в любом браузере, и позволяет создавать очень удивительные звуки.

к меню ↑

Стратегия синхронизации

Когда вы имеете дело с несколькими файлами, в зависимости от скорости интернета каждый файл может быть готов к воспроизведению в разное время. Например, 3-ри файла загружаются с локального компьютера.

Аудио синхронизация
Тайминги различных файлов могут быть готовы в разное время

Стратегия синхронизации загружает все файлы одновременно. Как только все треки готовы можно начинать воспроизведение в цикле.

var audios = [];
var loading = 0;
AddNote("2C");
AddNote("2E");
AddNote("2G");
AddNote("3C");
AddNote("3E");
AddNote("3G");
AddNote("4C");

 function AddNote(name) {

  loading++;
  var audio = document.createElement("audio");
  audio.loop = true;
  audio.addEventListener("canplaythrough", function () {

   loading--;
     if (loading == 0) // All files are preloaded
     StartPlayingAll();

  }, false);
audio.src = "piano/" + name + ".mp3";
audios.push(audio);
}

     function StartPlayingAll() {
        for (var i = 0; i < audios.length; i++)
        audios[i].play();
}

Демо

Теперь все вместе! Следующее демо имитирует игру на фортепиано Frère Jacques (также известный как брат Иоанн, брат Петр … или Фра Мартино). Как только все готово, сценарий начнёт и продолжит воспроизведение в цикле.

Фра Мартино
Воспроизведение в цикле

Демо