HTML5音乐播放功能增强：支持音乐列表播放，试听

2013-11-24 10:11 18838 次阅读分类: JS+jQuery, XHTML+CSS, 前端相关 3 条评论

免打扰阅读

重听一次

HTML5添加了audio标签，支持在页面中播放音乐。但是却只支持单首音乐的播放，不支持音乐列表多首播放。最想不通的是，播放界面竟然还不显示当前播放音乐的总时间长度。这用户体验确实有点不大友好！

在自己动手写之前，看到了博客好友Tiandi写的“HTML5播放多首在线音乐”文章：https://www.tiandiyoyo.com/2013/11/play-more-music-on-html5/

用的原生js写的，主要实现多首音乐点击切换播放。实现思路还是可以拿来借鉴下，在此表示感谢！

看完Tiandi的那篇文章，也就很自然地有了些自己的想法：

用数组的方式去添加音乐列表显示；

加入切换音乐时友好的文字提示；

文字标识当前播放曲目；

明文显示当前音乐的播放时间长度；

重新试听一次功能按钮；

具体显示效果，直接看本文右上角Demo实例！

Demo示例代码：

<div class='audioBox' style='float:right;padding:5px;background:#E9E9E9;'> <p style="text-align:right;"> <a href="javascript:;" class="a3">重听一次</a> </p> <audio controls="true" id="audio" src="#">    <b style="color:#f00;">你正在使用的浏览器太旧，该换个浏览器啦！</b> </audio> </div> <script> var index,_this,time,h,m,s,hms; var tips="<span class='tips' style='color:#f00;font-size:0.7em;font-weight:bold;padding-left:5px;display:none;'>播放中...</span>"; var audioName=["爸爸去哪儿","海阔天空","苏打绿 - 再遇见"]; var audioUrl=["https://mp3.wooeu.com/mp3.php/15314202/mp3wooeu.mp3","https://mp3.wooeu.com/mp3.php/15257322/mp3wooeu.mp3","https://fdfs.xmcdn.com/group3/M00/3F/64/wKgDslJJhJiDr4JAACG0hCSFjS8536.mp3"]; var audioHtml="<h4>音乐列表，点击歌名试听：</h4>\n<ul id='audioList'>"; $.each(audioUrl, function(i, val) { audioHtml+="<li><a href='javascript:;'>"+audioName[i]+"</a></li>"; }); audioHtml+="</ul>"; audioHtml+=""; $(audioHtml).prependTo('.audioBox'); $("#audioList li:eq(0)").append(tips); $("#audio").attr("src",audioUrl[0]); $("#audio")[0].volume=0.8; $("#audioList li a").each(function(index, el) { $(this).click(function(event) { _this=$(this); index=$("#audioList li a").index(this); $("#audio").attr("src",audioUrl[index]); $(".tips").html("正在加载...").appendTo(_this.parent()).fadeIn(); //判断歌曲已加载完，已可播放用canplaythrough方法，只支持原生js写法 $("#audio")[0].addEventListener("canplaythrough", function() { //获取当前播放歌曲时长 time=new Date($("#audio")[0].duration).getTime(); h=parseInt(time/3600); h=h==0?"":h+":"; //当歌曲不超过1小时时，不显示小时 m=parseInt((time-h*3600)/60); s=parseInt(time-h*3600-m*60); hms="["+h+m+":"+s+"]"; $(".tips").html("播放中"+hms+"..."); }, false); $("#audio")[0].play(); }); }); $(".a1").click(function(event) { $("#audio")[0].play(); }); $(".a2").click(function(event) { $("#audio")[0].pause(); }); $(".a3").click(function(event) { $("#audio")[0].load(); $("#audio")[0].play(); }); </script>

提示：你可以先修改部分代码再运行。

现在的播放功能比原始的体验，感觉好了许多，但可改进，扩展的功能还很多，比如：多首歌曲自动连播，有兴趣的可再折腾下代码改进下的。

另外提下，wp博客文章中插入音乐，推荐使用TinyMCE Advanced编辑器，这款编辑器使用的插入音乐的方法也是使用html5 audio标签，也有几项配置项可自由选择。插入多首音乐，个人还是推荐使用虾米音乐的，虽然界面丑点，也不支持换肤，但也还在可接受范围内，这个得靠自己去选择了。