web前端 html5音频播放器

对于html5音频播放器的问题,上方的音乐列表的播放按钮开始然后底部的播放器也是开始状态反过来同理,现在我碰上的问题是上方的列表如果点击播放后在点击其它的音乐不会停止上一个播放图片说明

首先第一次是默认的第一首歌,然后点击那首歌下方就出现那首歌,或者自动按顺序播放出现,所以就不贴代码了

是想要点击上面的按钮下面状态跟着变,点击下面上面也一样吗?
就是JS脚本事件响应处理的事啊。

JS监听事件 控制播放

添加监控点击事件,随着上面的点击而控制下边的按钮

监听每个按钮的点击事件,做控制

这不就是js的控制同一类的选取问题么

参考这个:

https://github.com/etianen/html5media (一个HTML5播放器的库)

js可以试试下面这样:

//html
<audio class="abc" src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
<audio class="abc" src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
<audio class="abc" src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

// jquery
 var v = $(".abc");
v.pause(); // 暂停
// v.play(); 开始播放