О сайтостроении, музыке и путешествиях

О теге audio и его атрибуте loop

Большим разочарованием для меня оказалась реализация механизма loop в HTML5 теге <audio>. В любом современном браузере после каждой итерации проигрывания аудиофайла есть небольшая пауза. Видимо за это время браузер занят возвращением к началу файла :) Я решил поподробнее исследовать этот момент паузы.

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

Я сгенерировал монотонный звук небольшой длины, и сконвертировал его в mp3 и ogg. Далее, я написал 3 теста, которые описаны в том посте. Теперь самое интересное: я записал звук результатов воспроизведения каждого из трех тестов, открытых в браузерах Safari, Chrome, Firefox и Opera. Исключение составил только Firefox, который не воспроизвел тест №1, так как не понимает атрибут loop у тега <audio>.

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

Тест №1: нативный луп

Напишем тег <audio> c аттрибутом loop.

<audio id="audio" loop autoplay controls>  <source src="test.mp3">  <source src="test.ogg"></audio>

Послушать тест №1

На скриншоте хорошо видно, что самым шустрым браузером оказалась Opera, но и в ней пауза составляет около 2 мс. Safari и Chrome на удивление показали разный результат хотя и сделаны на основе одного и того же Webkit. Видимо реализация HTML5 тега <audio> и JavaScript движок построены у них по-разному. Как я уже сказал выше, Firefox не воспроизвел ничего из-за непонимания что такое loop в принципе.

Тест №2: перемотка в начало

Напишем тег <audio> и будем перематывать аудиофайл в начало по событию ended.

<audio id="audio" preload autoplay controls>  <source src="test.mp3">  <source src="test.ogg"></audio><script>document.getElementById(\'audio\').addEventListener(\'ended\', function(){  this.currentTime = 0;}, false);</script>

Послушать тест №2

С вариантом зацикливания при помощи JavaScript перемотки справился даже Firefox. Результаты ничем не отличаются от результатов теста №1.

Тест №3: два тега

Самое интересное: создадим 2 тега <audio> с одинаковым файлом и будем запускать воспроизведение одного как только другой закончит воспроизведение.

<audio id="audio1" preload controls>  <source src="test.mp3">  <source src="test.ogg"></audio><audio id="audio2" preload controls>  <source src="test.mp3">  <source src="test.ogg"></audio><script>document.getElementById(\'audio1\').addEventListener(\'ended\', function(){  this.currentTime = 0;  this.pause();  document.getElementById(\'audio2\').play();}, false);document.getElementById(\'audio2\').addEventListener(\'ended\', function(){  this.currentTime = 0;  this.pause();  document.getElementById(\'audio1\').play();}, false);document.getElementById(\'audio1\').play();</script>

Послушать тест №3

В этом тесте есть крохотное сокращение паузы в Opera и Firefox по сравнению с тестом №2. Но это ничто по сравнению с абсолютной длиной этой паузы. Попрежнему от 2 мс в самых быстром браузере и до более чем 4 мс в самом медленном.

Печальный итог

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

Кто-нибудь может сказать возможно ли уменьшение размеров паузы или достижение идеального случая, когда пауза равна нулю? Специалисты по JS и browser-dev\'у, ау!

Обсуждение

  1. :
    А если слушать не ended, а перемотку самого звука, и когда до окончания первого файла осталось 4 мс, включать второй?
  2. :
    Андрей, насколько мне известно, браузеры не умеют проматывать аудиофрагмент с точностью до миллисекунд. Да и косяк с задержкой вызван алгоритмом работы самих браузеров. Пока там ничего не изменится у нас не будет бесшовного loop.
  3. :
    Привет!!! слуш а што если чтоб звук воспроизводился при заходе на страницу один раз автоматически и без плеера чё писать надо?