試圖讓我的HTML 5音頻播放器在同一頁上播放多個文件

我已經編碼了一個簡單的HTML5音頻播放器（JavaScript和CSS），即當用戶單擊播放時開始。我已經把它與頁面上的一個文件一起工作。我已經複製並粘貼了多次代碼，因此我可以在同一頁面上放置多個文件，玩家休息並不會播放任何文件。請，任何幫助表示讚賞！下面是我的HTML：試圖讓我的HTML 5音頻播放器在同一頁上播放多個文件

<div id="audioplayer"> 
<audio id="audio" src="052011.mp3"></audio> 
<span id="playpause" title="Play/Pause"><a href="#" class="play">Play</a></span> 
<script type="text/javascript" src="audioplayer-min.js"></script>

這裏是CSS：

/* globals */ 

html { 
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
background: url('background.png'); 
background-repeat: no-repeat 
} 

body { 
margin: 0 auto; 
text-align: center; 
} 

#audioplayer { 
display: block; 
overflow: hidden; 
width: 30px; 
height: 30px; 
position: relative; 
} 
.play,.pause { 
background: #fff; 
width: 20px; 
height: 20px; 
border-radius: 10px; 
position: absolute; 
margin: 5px; 
display: block; 
overflow: hidden; 
text-indent: -1000px; 
} 
.play:after { 
border-color:transparent transparent transparent #000; 
border-style:solid; 
border-width: 5px 5px 5px 10px; 
width:0; 
height:0; 
position: absolute; 
top: 5px; 
left: 6px; 
content: ''; 
} 
.pause:after { 
border-color: #000; 
background: #fff; 
border-style:solid; 
border-width: 0 3px 0 3px; 
width:2px; 
height:10px; 
position: absolute; 
top: 5px; 
left: 6px; 
content: ''; 
}

最後但並非最不重要的我的javascript：

var audio=document.getElementById("audio");var canvasWidth=canvasHeight=30;var radius=canvasWidth/2;var audioplayer=document.getElementById("audioplayer");canvas=document.createElement("canvas");canvas.setAttribute("width",canvasWidth);canvas.setAttribute("height",canvasHeight);canvas.setAttribute("id","canvas");audioplayer.appendChild(canvas);function updateUI(){var f=audio.currentTime;var g=audio.duration;var b=document.getElementById("canvas");var e=b.getContext("2d");var a=y=radius=canvasWidth/2;var d=-Math.PI/2;var c=d+((f/g)*Math.PI*2);b.getContext("2d").clearRect(0,0,canvasWidth,canvasHeight);e.fillStyle="#000";e.beginPath();e.moveTo(a,y);e.arc(a,y,radius,d,c,false);e.closePath();e.fill()}audio.addEventListener("play",function(a){document.getElementById("playpause").innerHTML='<a href="#" class="pause">Pause</a>'},true);audio.addEventListener("pause",function(a){document.getElementById("playpause").innerHTML='<a href="#" class="play">Play</a>'},true);audio.addEventListener("ended",function(a){document.getElementById("playpause").innerHTML='<a href="#" class="play">Play</a>'},true);document.getElementById("playpause").addEventListener("click",function(){if(audio.paused){audio.play()}else{if(audio.ended){audio.currentTime=0;document.getElementById("playpause").innerHTML='<a href="#" class="pause">Pause</a>';audio.play()}else{audio.pause()}}},true);audio.ontimeupdate=updateUI;audio.addEventListener("timeupdate",updateUI);

的Iframe添加到HTML：

<tbody> 
      <tr> 
       <td style="vertical-align: top;"> 

<div id="audioplayer"> 
<audio id="audio" src="052011.mp3"></audio> 
<span id="playpause" title="Play/Pause"><a href="#" class="play">Play</a></span> 
<script type="text/javascript" src="audioplayer-min.js"></script> 
</div> 
<br> 
       </td> 
       <td style="vertical-align: top;"> 
       <div style="text-align: right;"> 
       </div> 
       <div style="text-align: right;"><big><big><span style="font-weight: bold;"><small><span class="style2"><span class="style6"><a href="052011.mp3">May 6, 2011</a> <span style="font-style: italic;">(Right Click and select Save As to download to your iPod or other MP3 player)</span></span></span></small></span></big></big><br> 

       <big> 
       </big></div> 
</td> 
      </tr> 
      <tr> 
       <td style="vertical-align: top;"> <iframe src=<div id="audioplayer"> 
<audio id="audio" src="052011.mp3"></audio> 
<span id="playpause" title="Play/Pause"><a href="#" class="play">Play</a></span> 
<script type="text/javascript" src="audioplayer-min.js"></script>"></iframe> <br> 
       </td> 
       <td style="vertical-align: top;"><br> 
       </td> 
      </tr> 
      <tr> 
       <td style="vertical-align: top;"><br> 
       </td> 
       <td style="vertical-align: top;"><br> 
       </td> 
      </tr> 
      </tbody> 
     </table>

來源

2011-11-21 user1058318