点击时使用javascript播放数组/多个文件

Question

我希望能够通过onCLick功能在一个UI中跨多个页面播放多个mp3。

我希望能够通过一个界面控制我网站上的所有音频文件。通过使用onclick播放按钮或img为每首歌曲（

<audio  onClick="play()" class="play" id="music" src="mywebsite.com/media/test.mp3"> 

or 

<button id="pButton" class="play" onclick="play("mywebsite.com/media/test.mp3")"> <img src="albumArtwork">   </button>

并加载歌曲并在设置的播放器UI中播放...

HTML

<audio id="music" preload="true">
<source src="http://trillumonopoly.com/music/Live4di$(Intro).mp3">
</audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="play()"></button>
<div id="timeline">    
      <div id="playhead"></div>
</div>
</div>

JS

var music = document.getElementById ('music'); // id for audio      element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button

var playhead = document.getElementById('playhead'); // playhead

var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);

//Makes timeline clickable
timeline.addEventListener("click", function (event) {
moveplayhead(event);
music.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(e) {
return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

// Makes playhead draggable 
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that mouse is moved on mouseUp only when the playhead is      released 
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);
}
// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(e) {
if (onplayhead == true) {
    moveplayhead(e);
    window.removeEventListener('mousemove', moveplayhead, true);
    // change current time
    music.currentTime = duration * clickPercent(e);
    music.addEventListener('timeupdate', timeUpdate, false);
}
onplayhead = false;
  }
// mousemove EventListener
 // Moves playhead as user drags
function moveplayhead(e) {
var newMargLeft = e.pageX - timeline.offsetLeft;
if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
    playhead.style.marginLeft = newMargLeft + "px";
}
if (newMargLeft < 0) {
    playhead.style.marginLeft = "0px";
}
if (newMargLeft > timelineWidth) {
    playhead.style.marginLeft = timelineWidth + "px";
}
}

// timeUpdate 
// Synchronizes playhead position with current point in audio 
function timeUpdate() {
var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + "px";
if (music.currentTime == duration) {
    pButton.className = "";
    pButton.className = "play";
}
}

//Play and Pause
function play() {
// start music
if (music.paused) {
    music.play();
    // remove play, add pause
    pButton.className = "";
    pButton.className = "pause";
} else { // pause music
    music.pause();
    // remove pause, add play
    pButton.className = "";
    pButton.className = "play";
}
}

    // Gets audio file duration
    music.addEventListener("canplaythrough", function () {
    duration = music.duration;  
    }, false);