HTML5: Audio sprite

Если используется аудио на странице, то почему бы слегка не оптимизировать процесс — использовать спрайты. Вроде того, как используются спрайты в css: одна картинка, а затем отображать из неё куски. По аналогии можно и для аудио сделать. Скажем, в фоне загрузить одну дорожку, а уже потом проигрывать определённые её сегменты.

В общем-то, для этого хватает стандартных функций, которые я рассматривал в прошлой статье про HTML5: Audio.

Сама дорожка и кнопки.

<audio preload="none" id="audio1"  controls>   <source src="/wp-content/uploads/2012/08/Still-Alive.mp3">   </source>   <source src="/wp-content/uploads/2012/08/Still-Alive.ogg">   </source></audio><a href="javascript:playSegment(0.0, 0.5);">Сегмент 1</a><a href="javascript:playSegment(0.5);">Сегмент 2</a>

Обработка:

var audio = document.getElementById('audio1');var segmentEnd = null;audio.addEventListener('timeupdate', function (){   if (segmentEnd && audio.currentTime >= segmentEnd)   audio.pause();   }, false);function playSegment(startTime, endTime){   segmentEnd = endTime;   audio.currentTime = startTime;   audio.play();}
Сегмент 1Сегмент 2

Кнопки и видимость дорожки для наглядности просто. Так-то можно всё это дело в фоне выполнять.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *