Если используется аудио на странице, то почему бы слегка не оптимизировать процесс — использовать спрайты. Вроде того, как используются спрайты в css: одна картинка, а затем отображать из неё куски. По аналогии можно и для аудио сделать. Скажем, в фоне загрузить одну дорожку, а уже потом проигрывать определённые её сегменты.
В общем-то, для этого хватает стандартных функций, которые я рассматривал в прошлой статье про HTML5: Audio.
Сама дорожка и кнопки.
<audio preload="none" id="audio1" controls> <source src="https://suvitruf.ru/wp-content/uploads/2012/08/Still-Alive.mp3"> </source> <source src="https://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
Кнопки и видимость дорожки для наглядности просто. Так-то можно всё это дело в фоне выполнять.