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

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

为你的博客添加简单的CSS3音乐播放器

有网友@she在留言中询问本站音乐播放器如何实现,博客也好久没更新了,趁着清明放假有点时间,分享一下实现过程。这是一个很简单的播放器效果,界面主要利用CSS3的一些属性,如animationtranslatetransform等,效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能,如需实现诸如酷狗音乐的播放器效果,请深入研究Audio。个人认为,该播放器足以满足博客等非音乐网站的需求。当然,诸如以往,以上包括这句都是废话:)