HTML5音频:如何只播放音频文件的选定部分(音频精灵)?

I'm working on an iOS metronome web app. Since mobile safari can only play one sound at a time, I'm attempting to create an 'audio sprite' - where I can use different segments of a single audio track to generate different sounds. I have a 1 second clip with 2 half-second sounds on it.

我正在开发一个iOS metronome web应用程序。由于mobile safari一次只能播放一个声音，所以我试图创建一个“音频精灵”——我可以使用单个音频轨道的不同部分来生成不同的声音。我有一个1秒的剪辑，上面有2个半秒的声音。

<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>

See it on JSFiddle.

JSFiddle上看到它。

As you can see, I've attempted to use the 'timeupdate' event (jPlayer example) with no avail.

如您所见，我尝试过使用“timeupdate”事件(jPlayer示例)，但没有任何用处。

I've seen Remy Sharp's post on audio sprites, but (A) I wasn't able to get it to work for me, and (B) I would prefer to stay away from a library dependency.

我看过Remy Sharp关于音频精灵的文章，但是(A)我不能让它为我工作，(B)我宁愿远离图书馆依赖。

Any ideas? Thanks in advance for your help!

什么好主意吗?谢谢你的帮助!

Update

更新

I now have it working using setInterval:

现在我让它使用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();
}

There are some issues with sequence and setting/clearing intervals, but for my purpose - it seems to work.

顺序和设置/清除间隔有些问题，但就我的目的而言——它似乎是有效的。

JSFiddle

Thanks!

谢谢!

P.S. If anyone has a fix for this, this could be used in Games and Interface Sound FX.

附注:如果有人对此有解决办法，这可以用于游戏和界面音效特效。

1 个解决方案

#1

I think there are a couple of problems here.

我认为这里有几个问题。

Firstly, you're adding an event listener every time the user clicks Play 1.

首先，每次用户单击Play 1时都要添加一个事件监听器。

Also I think

我也认为

if (currentTime >= 0.5) { ...

should be

应该是

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

This also works:

这同样适用:

<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>

#1