javascript - 如何使用一个 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>

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

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 的参数。如果轨道已加载，它将开始播放。