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

Question

We are trying to make a html5 audio player in which we have more than one .mp3 file which we shows in tabular form using loop with php and we actually want that : when we will click on every mp3 file then it should be play in only one interface just like as http://gaana.com .

What we did :

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

in the above code we are getting the .mp3 file using get method and we are passing the mp3 file name in within url.

Answer 1

DEMONSTRATION CODE:

 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 (actual solution)

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();
    }
}

When somebody clicks on another audio link, it should invoke the function changeTrack() with an argument referring to the track's url. If the track is loaded it will start to play.