- YaC 2013
- Всё, что вы делаете в Vim неправильно
- CSScomb 2.06
- IntelliJ IDEA → VIM
- Подкаст «Сделайте мне красиво!»
- Разыскиваются настройки
- Твиттер на коленке
- Видео с 404fest
- Домены .рф и зоны первого уровня
- Самое лучшее видео с 404fest
- Еду в Самару
- О локализации сайта
- Javascript API
- Автообновление IE9
- HTML5 Killers
- IE9 beta
- Про ссылки на RSS
- Про Flexbox, Grid, Template layout
- Управление цветами при помощи CSS
- Пишите правильно: «репозиторий»
- Лирическая заметка о WSD'09 в Минске
- CSS Reorder: Divide et impera
- О Минске, стандартах и просветлении
- Пятница — день обновлений CSS reorder
- Онлайн инструмент для сортировки CSS свойств
- H1
- Фотки с Я.Субботника
- HTML 5 demos
- Первый в мире сайт
- Вложенные списки
- Верстка сервисной навигации
- Про отсутствие курсора и как следствие :hover
- Кроссбраузерные полупрозрачные блоки с использованием opacity
- Футболки
- Масштабирование размера шрифта в IE
- Способ заклуглять уголки без картинок и без JavaScript
- Метассылки и кнопки в веб-интерфейсах
О теге 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\'у, ау!
Обсуждение