Javascript 从同一音频元素播放多个音频文件

我正在建立一个网页来预览歌曲，让观看的公众能够听到每首歌曲的片段

我不想做的是通过创建许多对许多音频元素的调用来重新发明轮子，你可以看到我是如何使用“sample”作为第一个元素的，但我不想一遍又一遍地重复代码

以下是它目前的工作原理：

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

将MP3文件的URL传递给

标记中的playsecgment（）调用，如下所示：

<a href="javascript:playSegment('BACKING unforgettable fire.mp3', 10, 35);">BACKING unforgettable fire - <img src="play.png"></a>

---

将MP3文件的URL传递给

标记中的playsecgment（）调用，如下所示：

<a href="javascript:playSegment('BACKING unforgettable fire.mp3', 10, 35);">BACKING unforgettable fire - <img src="play.png"></a>

---

视图调整但已排序，谢谢ablopez

function playSegment2(fileURL, startTime, endTime)
{
    var audio = document.getElementById('sample');
    var segmentEnd;

    audio.src = fileURL;
    audio.oncanplay = function()
    {
        audio.addEventListener('timeupdate', function ()
        {   
            if (segmentEnd && audio.currentTime >= segmentEnd) 
            {
                audio.pause();
            } 
            console.log(audio.currentTime);

        }, false);
        segmentEnd = endTime;
        audio.currentTime = startTime;    
        audio.play();        
    };
    audio.load();
}

---

视图调整但已排序，谢谢ablopez

function playSegment2(fileURL, startTime, endTime)
{
    var audio = document.getElementById('sample');
    var segmentEnd;

    audio.src = fileURL;
    audio.oncanplay = function()
    {
        audio.addEventListener('timeupdate', function ()
        {   
            if (segmentEnd && audio.currentTime >= segmentEnd) 
            {
                audio.pause();
            } 
            console.log(audio.currentTime);

        }, false);
        segmentEnd = endTime;
        audio.currentTime = startTime;    
        audio.play();        
    };
    audio.load();
}

---

感谢您提供的信息，现在似乎无法播放这些更改。我已经用更正更新了我的答案，请检查它并尝试使用该代码。它仍然与getElementByID（'sample'）链接-如果我删除它，它将不起作用。不确定我是否理解您的问题，但它需要使用ID为“sample”的音频标签才能起作用。但是，您只需要这一个且仅需音频标签（无需重复），因此要添加更多链接以播放其他音频样本，只需重复

标签，单击该标签即可运行

playsecgment（）

函数，传递MP3文件的URL、开始时间、，如果查看var audio=document.getElementById（'sample'），上面的代码不起作用；你的audio.src=fileURL没有做任何事情。为了获取信息，它现在似乎不起作用。正在进行这些更改。我已经用更正更新了我的答案，请检查它并尝试使用该代码。它仍然与getElementByID（'sample'）链接-如果我去掉它，它不起作用。我不确定我是否理解你的问题，但是，它需要使用ID为“sample”的音频标签才能工作。但是，您只需要这一个且仅需音频标签（无需重复），因此要添加更多链接以播放其他音频样本，只需重复

标签，单击该标签即可运行

playsecgment（）

函数，传递MP3文件的URL、开始时间、，如果查看var audio=document.getElementById（'sample'），上面的代码不起作用；你的audio.src=fileURL没有任何作用