HTML5音乐列表播放器SMusic开发总结 - 博客

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》，实现了单曲循环播放效果，这个效果也是我的博客首页一直有的效果，同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法，如 play() , paused()等。当然，之前的效果只适合诸如博客或者某个单页面（如专题页面）使用。而现在的可以称之为完整版的播放器弥补了之前的不足，增加了列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能，除了歌词外，基本就是个播放器了（本来就是播放器）。

除了上述介绍的功能外，有必要说明一下的是，为了迎合新东家的口味，编码时，JavaScript部分采用原生来写，没有使用之前的jQuery库，代码量可能大了点，加上注释，应该在400来行。这也是我第一次采用纯原生JavaScript来写插件，因此，代码中有很多不足还望指出。音乐文件本来想使用其他音乐网站的接口来着，但是百度了很久，也没有找到一个开放的接口，应该是音乐之类的有版权限制。如果哪位知道有此类接口烦请告知一声，demo中的音乐文件列表是我下载了几首上传到服务器上弄得（如果有喜欢的音乐可以获取地址后添加到QQ空间背景音乐哦），(⊙﹏⊙)b。播放器界面上基本没考虑太多，把百度新首页（需登录）的音乐播放器界面改了下，因此这款播放器也可以称之为仿百度首页音乐播放器。

另外，播放器代码也开源在Github上（https://github.com/S-mohan/smusic），也可以在《HTML5列表音乐播放器SMUSIC》这个页面上下载代码。可以随意更改，关键处，代码中也有相应的注释，因此这里就主要总结下开发过程中的一些知识点。

DEMO

css部分很简单，这里贴出CSS3伪类美化滚动条（列表盒子上用得到）的代码：

Css3滚动条

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:transparent;}
::-webkit-scrollbar-track-piece{background-color:transparent;}
::-webkit-scrollbar-thumb:vertical{background-color:#3792ef;border-radius:6px}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:vertical:active {background-color: #2e86ef}

JavaScript部分除了博文为你的博客添加简单的CSS3音乐播放器介绍的一些基础接口外，还是用到volume(音量控制)、muted(静音操作)、buffered(缓冲)、duration(媒体文件时长)、currentTime(以秒为单位的返回从开始播放到现在播放的事件)等接口。顺便推荐两本好书《HTML5程序设计》以及《JavaScript模式》，京东上都有卖。

Audio Api主要接口描述

load()：加载媒体文件，为播放做准备。
play()：加载（如果有必要）并播放文件。
pause()：暂停处于播放状态的文件。
buffered属性：返回媒体文件的缓冲范围（缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放，会得到多个缓冲范围，buffered.length可以获取以缓冲区域的个数，buffered.end()可以获取以缓冲的时间）。
loop属性/loop()：为true时，循环播放当前媒体文件。loop(),如果媒体文件播放完毕时能重新播放，则返回true.
volume属性：获取和设置音量。
muted属性：设置（true）和取消(false)静音操作。
duration属性：获取整个媒体文件的播放时长，以s为单位。如果无法获取，则返回NaN。
startTime属性：返回最早的播放起始时间，一般是0.0，除非是缓冲过的文件，并且一部分已经不再缓冲区。
currentTime属性：以秒（S）为单位返回从开始播放到现在所用的事件。在播放过程中，可以设置currentTime来进行搜素，并定位到媒体文件的特定位置（如拖动进度跳转（快进）播放）。
currentSrc属性：以字符串形式返回当前正在播放或已加载的媒体文件。
ended属性/事件：如果媒体文件已经播放完毕，则返回true。并且，该属性也是一个事件，当媒体文件播放完毕时，才会触发ended事件，此时，我们可以将播放索引指到下一个。
canplay事件：当已加载的文件能够到达播放状态时，才会触发的事件。
timeupdate事件：当前媒体文件播放位置（currentTime）改变时，才会触发的事件。在播放过程中，是时时触发的，因此，可以监听这个事件来设置播放进度和播放时间的变化

下面的图示例了缓冲部分和已播放部分的区别

案例中媒体文件播放过程中的时间以及进度的改变主要通过timeupdate事件来实现

//监听timeupdate，设置进度，PS:播放过程中，当前播放位置改变时，会触发该事件
this.audioDom.addEventListener('timeupdate',function(){
    var audio = this;
    if(!isNaN(audio.duration)){
        var surplusTime = calcTime(audio.currentTime),
            totalTime   = calcTime(audio.duration);
        var currentProcess = (audio.currentTime / audio.duration) * (me.musicDom.bufferProcess.parentNode.offsetWidth);
        //当前播放时间/总时间 = 播放百分比
        //播放百分比 * 进度条长度 = 当前播放进度
        me.musicDom.time.innerHTML = ''+surplusTime+'/'+totalTime+'';
        me.musicDom.curProcess.style.width = currentProcess + 'px';
    }
},false);

开发过程中遇到一个JavaScript知识点：通过addEventlistener添加的事件中，如果传递了匿名函数，则无法通过removeEventListener来移除，解决方法是添加一个临时过渡函数来传递，而且还可以传参。

document.addEventListener('click',function(){
    alert("已添加");
},false);
document.removeEventListener('click',function(){
    //事实上并未移除,document上还是绑定着click事件，点击还是有效的
},false);
/*过渡函数*/
function tempFun(){}
document.addEventListener('click',tempFun,false);
document.removeEventListener('click',tempFun,false);//移除了

以上就是对HTML5列表播放器的开发总结。播放器代码也开源在Github上（https://github.com/S-mohan/smusic），也可以在《HTML5列表音乐播放器SMUSIC》这个页面上下载代码。

-- EOF --

本文标题：HTML5音乐列表播放器SMusic开发总结
本文链接：https://smohan.net/blog/u3zxq1

本站使用「署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。相关说明 »

DEMO

Css3滚动条

Audio Api主要接口描述

更多文章

评论^{「 ... 」}

DEMO

Css3滚动条

Audio Api主要接口描述

更多文章

评论 「 ... 」

评论^{「 ... 」}