О теге 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>
На скриншоте хорошо видно, что самым шустрым браузером оказалась 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>
С вариантом зацикливания при помощи 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>
В этом тесте есть крохотное сокращение паузы в Opera и Firefox по сравнению с тестом №2. Но это ничто по сравнению с абсолютной длиной этой паузы. Попрежнему от 2 мс в самых быстром браузере и до более чем 4 мс в самом медленном.
Печальный итог
В результате этих тестов видно, что на сегодняшний день ни один браузер не умеет делать бесшовное зацикливание аудио файла. В монотонном зацикленном звуке, даже в самом быстром браузере, прерывание будет заметно для человеческого уха. В немонотонном звуке, где не важен ритм или не важно присутствие паузы между повторениями эта проблема конечно же не актуальна, да и 4 сотые секунды это действительно мало. Но тем не менее сделать что-то сложное и точное с такой задержкой будет невозможно.
Кто-нибудь может сказать возможно ли уменьшение размеров паузы или достижение идеального случая, когда пауза равна нулю? Специалисты по JS и browser-dev\'у, ау!
Комментирование закрыто.