Trying to get my HTML 5 audio player to play more than one file on the same page

Question

I have coded a simple HTML5 audio player (javascript and css) thats starts when the user clicks play. I have got it to work with one file on the page. I have copied and pasted the code several times so I can have several files on the same page, the player breaks and won't play any of them. Please, any help is appreciated! Below is my HTML:

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

Here is the 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: '';
}

And last but not least my 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 added to the 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>

Answer 1

A couple of months ago I built a jQuery plugin that replaces element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.

try this http://osvaldas.info/audio-player-responsive-and-touch-friendly

Answer 2

Try to enclosure another player in Iframe or HTML tag