Javascript HTML5音频：如何仅播放音频文件的选定部分（音频精灵）？

我正在开发一个iOS metronome网络应用程序。由于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>

顺序和设置/清除间隔存在一些问题，但就我而言，这似乎是可行的

---

另外，如果有人对此进行了修复，这可以用于游戏和界面声音效果。

我认为这里有几个问题

首先，每次用户单击Play1时，您都会添加一个事件侦听器

我也认为

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>

var audio=document.getElementById（'sample'）；
var段末；
audio.addEventListener（'timeupdate'，函数（）{
if（segmentEnd&&audio.currentTime>=segmentEnd）{
audio.pause（）；
}   
console.log（audio.currentTime）；
}，假）；
功能播放片段（开始时间、结束时间）{
分段结束=结束时间；
audio.currentTime=开始时间；
音频播放（）；
}

我没有找到一个干净的函数来播放音频对象的片段，所以这就是我想到的。如果用户在短时间内单击多个触发器，它还将解决以下错误

“未捕获（承诺中）DomeException:play（）请求被暂停（）调用中断”

---

这是一个很好的解决方案，展示了良好的特性。不过，请不要认为时间间隔应该是整秒。在Chrome上测试时，我发现浏览器经常会在没有道歉的情况下超过间隔0.4秒。@Sam Dutton我尝试使用自己的dropbox链接，但由于某种原因，它没有播放。它是一个.mp3文件

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

const audioObj_1 = new Audio('/some_audio_file.m4a');
playSegment(audioObj_1 , 1.11, 2.45); // this will play from 1.11 sec to 2.45 sec

function playSegment(audioObj, start, stop){
    let audioObjNew = audioObj.cloneNode(true); //this is to prevent "play() request was interrupted" error. 
    audioObjNew.currentTime = start;
    audioObjNew.play();
    audioObjNew.int = setInterval(function() {
        if (audioObjNew.currentTime > stop) {
            audioObjNew.pause();
            clearInterval(audioObjNew.int);
        }
    }, 10);
}