html在线音频播放器实训总结,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)改变时，才会触发的事件。在播放过程中，是时时触发的，因此，可以监听这个事件来设置播放进度和播放时间的变化

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

audio buffred

案例中媒体文件播放过程中的时间以及进度的改变主要通过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 -- 发表于 2015-05-17 23:10:32， 最后更新于 2017-08-23 00:10:35。 已被累计阅读「 17706 」次。 本文标题：HTML5音乐列表播放器SMusic开发总结

本文链接：https://smohan.net/blog/u3zxq1

相关阅读