Попытка заставить мой аудиоплеер HTML 5 воспроизводить более одного файла на одной странице

Question

Я кодировал простой аудиоплеер HTML5 (javascript и css), который запускается, когда пользователь нажимает кнопку воспроизведения. Я получил его для работы с одним файлом на странице. Я скопировал и вставил код несколько раз, чтобы у меня было несколько файлов на одной странице, проигрыватель ломается и не проигрывает ни один из них. Пожалуйста, любая помощь приветствуется! Ниже мой 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>

Вот 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>

Answer 1

Пару месяцев назад я создал плагин jQuery, который заменяет элемент небольшим количеством нестандартного HTML-кода.Добавив немного CSS, вы получите совершенно новый плеер, который выглядит так, как вы хотите, и имеет те же функции, что и проигрыватель по умолчанию.Нет прямого способа стилизовать элемент.Но в HTML5 DOM есть методы, свойства и события для элемента, что делает его довольно легко управляемым.

попробуйте это http://osvaldas.info/audio-player-responsive-and-touch-friendly

Answer 2

Попробуйте добавить другого игрока в тег Iframe или HTML