HTML5 Audio: как воспроизводить только выбранную часть аудиофайла (аудио спрайт)?

Я работаю над веб-приложением метронома iOS. Так как мобильное сафари может воспроизводить только один звук за раз, я пытаюсь создать "аудио спрайт", где я могу использовать разные сегменты одной звуковой дорожки для генерировать разные звуки. У меня есть 1-секундный клип с двумя полусекундными звуками.

<audio id="sample" src="sounds.mp3"></audio>

<a href="javascript:play1();">Play1</a>
<a href="javascript:play2();">Play2</a>
<a href="javascript:pauseAudio();">Pause</a>

<script>
var audio = document.getElementById('click');

function play1(){
    audio.currentTime = 0;
    audio.play();

    // This is the problem area
    audio.addEventListener('timeupdate', function (){
        if (currentTime >= 0.5) {
            audio.pause();
        }
    }, false);
}   

function play2(){
    audio.currentTime = 0.5;
    audio.play();
}

function pause(){
    audio.pause();
}
</script>

Посмотрите на JSFiddle.

Как вы можете видеть, я попытался использовать событие timeupdate (jPlayer example) безрезультатно.

Я видел сообщение Remy Sharp на аудио спрайтах, но (A) я не смог заставить его работать для меня, и (B) я предпочитает избегать зависимости от библиотеки.

Любые идеи? Заранее благодарим за помощь!

Обновление

Теперь я работаю с помощью setInterval:

function play1(){
    audio.currentTime = 0;
    audio.play();
    int = setInterval(function() {
        if (audio.currentTime > 0.4) {
            audio.pause();
            clearInterval(int);
        }
    }, 10);
}    

function play2(){
    clearInterval(int);
    audio.currentTime = 0.5;
    audio.play();
}

Есть некоторые проблемы с последовательностью и интервалами настройки/очистки, но для моей цели - это работает.

JSFiddle

Спасибо!

P.S. Если у кого есть исправление для этого, это может быть использовано в играх и интерфейсе Sound FX.

Ответы

Ответ 1

Я думаю, что здесь есть пара проблем.

Во-первых, вы добавляете прослушиватель событий каждый раз, когда пользователь нажимает кнопку "Воспроизвести 1".

И я думаю,

if (currentTime >= 0.5) { ...

должен быть

if (audio.currentTime >= 0.5) { ...

Это также работает:

<audio id="sample" src="http://dl.dropbox.com/u/222645/click1sec.mp3" controls preload></audio>

<a href="javascript:playSegment(0.0, 0.5);">Play1</a>
<a href="javascript:playSegment(0.5);">Play2</a>

<script>
var audio = document.getElementById('sample');
var segmentEnd;

audio.addEventListener('timeupdate', function (){
    if (segmentEnd && audio.currentTime >= segmentEnd) {
        audio.pause();
    }   
    console.log(audio.currentTime);
}, false);

function playSegment(startTime, endTime){
    segmentEnd = endTime;
    audio.currentTime = startTime;
    audio.play();
}
</script>