javascript - 试图让我的 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);

添加到 HTML 的 iframe:

<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