Question

我们正在尝试创建一个html5音频播放器，其中我们有多个.mp3 file，我们使用loop with php以表格形式显示这些播放器，我们实际上想要：当我们点击每个{{ 1}}然后它应该只在一个界面中播放，就像http://gaana.com一样。

我们做了什么：

mp3 file

在上面的代码中，我们使用<?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名称。

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

核心代码（实际解决方案）

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()，并带有一个引用该轨道网址的参数。如果加载了曲目，它将开始播放。

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

1 个答案: