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