javascript – HTML5音频：如何仅播放选定部分的音频文件(音频精灵)？

我正在使用iOS节拍器网络应用程序.由于移动漫游只能播放 one sound at a time,我正在尝试创建一个“音频精灵”,我可以使用单个音轨的不同段来生成不同的声音.我有一个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’s post on audio sprites,但(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

谢谢！

附：如果有人有这个修复,这可以用于游戏和界面声音FX.

解决方法

我认为这里有几个问题.

首先,您每次在用户点击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>

javascript – HTML5音频：如何仅播放选定部分的音频文件(音频精灵)？

解决方法

猜你在找的JavaScript相关文章