制作一个音乐播放器
作品地址
做一个这样的音乐播放器需要使用到的技术
掌握HTML5新增音频标签<audio>的使用:
- <audio>常用的标签属性：
- autoplay自动播放、loop="loop"单曲循环播放、controls控制器
- <audio>常用的事件属性：
- ended播放结束事件、pause暂停事件、play播放事件、volumechange音量改变事件、timeupdate播放位置改变事件
- <audio>常用的对象方法：
- play()播放、pause()暂停、load()重新加载
- <audio>常用的对象属性(用于判断音频的状态)：
- ended是否结束、paused是否暂停、volume设置或返回当前音量、muted静音、currentTime播放的当前事件、duration音频的总时间
掌握jQuery的ajax方法，熟练处理后台返回的数据：
- 处理后台返回的音频数据:
把返回的音频数据添加到我们音乐播放器内的各个位置，为了防止出现网络问题得到空对象null时我们使用res.song[0].url && typeof(res.song[0].url)!="undefined" && res.song[0].url!=0来过滤掉为空的数据，为空时将再次获取音乐。 -
获取歌词信息:
歌词初始信息
首先我们获取的歌词初始信息是一大串字符串，其中有时间信息，不过还好它是有\n分割的。
- 处理歌词字符串：
在得到一大串歌词字符串后我们使用正则表达式获取[]内的事件内容，然后以:分隔分钟和秒，最后创建临时对象把时间和歌词以key、value的形式添加到临时对象里然后放入数组内。
处理了后的歌词
这样处理数据的好处就是我们可以使用arr[i].key的形式来获取到具体的数据。 -
渲染歌词：
这里的处理方法用到了jQuery的data()方法
把播放时间放入标签内和歌词文本进行配对，在播放时拿当前播放时间和相邻两个歌词标签内的时间进行比较来确定展示的歌词，同时让进度条长度和播放时间相关联来达到模拟真实进度条的效果。
播放器插件
最后我把这个播放器改写成需要jQuery支持的插件并增加拖动和隐藏功能
- 使用方法：把css、js、icon三个文件夹内的文件放入你当前项目网站的文件夹下，然后在当前网站的body内给播放器添加容器增加
<div class="fm-body"></div>``<script src="js/fm.js"></script>标签。然后输入Music.init($('.fm-body'))一个可拖动隐藏的音乐播放器就可以在当前网站上运行了
插件地址
本博客版权归 本人和饥人谷所有，转载需说明来源
网友评论