如何用一个html5音频播放器播放多个音频文件

Question

我们正在尝试制作一个html5音频播放器，其中我们有多个.mp3 file，我们使用loop with php以表格形式显示，我们实际上希望：当我们点击每个mp3 file时，它应该只在一个界面中播放，就像http://gaana.com.

我们所做的：

<?php
if(isset($_GET['song'])) {
    $song_name = $_GET['song'];
    echo "<audio id="audio1" src="$song_name.mp3" controls preload="none" type="audio/mp3" autobuffer autoplay></audio>";   
}
?>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.play();
}
function EvalSound1(soundobj1) {
  var thissound=document.getElementById(soundobj1);
  thissound.pause();
}
</script>

在上面的代码中，我们使用get方法获得.mp3 file，并在url中传递mp3 file名称。

Answer 1

演示代码：

var tracks = ['https://archive.org/download/testmp3testfile/mpthreetest.mp3', 'http://www.tonycuffe.com/mp3/tail%20toddle.mp3'];
Array.prototype.map.call(document.querySelectorAll("button"), function(element, index){
    element.addEventListener("click", changeTrack.bind(null, tracks[index]), false);  
});
var autoPlay = true;
function changeTrack(track)
{
   var audioElement = document.getElementById("audio1");
   audioElement.src = track;
}
audioElement.addEventListener("canplay", startPlaying, false);
function startPlaying()
{
    if (autoPlay)
    {
        this.play();
    }
}
              

<button>Track 1</button>
<button>Track 2</button>
<audio id="audio1" src="song_name.mp3" controls preload="none" type="audio/mp3" autobuffer autoplay></audio>";   

CORE CODE（实际解决方案）

var autoPlay = true;
function changeTrack(track)
{
   var audioElement = document.getElementById("audio1");
   audioElement.src = track;
}
audioElement.addEventListener("canplay", startPlaying, false);
function startPlaying()
{
    if (autoPlay)
    {
        this.play();
    }
}

当有人点击另一个音频链接时，它应该调用函数changeTrack()，其中包含一个引用音轨url的参数。如果曲目已加载，它将开始播放。