HTML5 Audio: Как воспроизвести только выбранную часть аудиофайла (аудио спрайт)? - PullRequest
Новая
       7

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

12 голосов
/ 09 мая 2011

Я работаю над веб-приложением с метрономом для 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 ) безрезультатно.

Я видел Пост Реми Шарпа о звуковых спрайтах , но (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 Ответ

19 голосов
/ 18 мая 2011

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

Во-первых, вы добавляете прослушиватель событий каждый раз, когда пользователь нажимает Play 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>
...