HTML5: Audio sprite

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


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

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

<audio preload="none" id="audio1"  controls>
   <source src="http://suvitruf.ru/wp-content/uploads/2012/08/Still-Alive.mp3">
   </source>
   <source src="http://suvitruf.ru/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

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

  Категории: html, html5, JavaScript, Коддинг