QQ音乐播放器简易开发

由于本人喜欢听音乐,然后突然某次抽筋,想用H5的audio来写一个模拟qq播放器功能的页面.说干就干.花了整整4天时间,其中搞歌词的lrc文件花了不少时间T.T啊.
亮点：
1.歌词同步：
支持主界面以及副界面的歌词同步功能,并且当前行高亮展示。

2.多类目切换：
实现4大类目的不同歌单,当前歌曲黑底显示的功能.

3.进度条以及主屏幕拖拽功能：
实现了进度条同步歌曲进度以及拖拽功能,3大界面(光盘界面,歌词界面,歌单界面)拖拽进行移动的功能.
4.歌曲顺序随机播放：
实现了一键随机播放顺序。

5.动态歌词信息添加：
以封装为插件,所有歌曲信息动态添加,改歌曲只需要改date内的json文件就可以,data文件格式如下：

经验：
1.css样式部分：
filter:blur(10px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
可用来做模糊属性,其实第一次是在做bilibili时发现的.user-select:none;可以禁止用户选中字.
2.svg部分绘制：
手机部分为svg图像,由于当时还不会自己手写svg,所以只能用AI先画,画完导出svg格式,也是心疼自己.
3.H5的audio标签应用：
您的浏览器不支持html5的audio标签" target="_blank" rel="nofollow">http://cc.stream.qqmusic.qq.com/C100000eyims3MbmGS.m4a?fromtag=52">您的浏览器不支持html5的audio标签
4.H5的audio的API文档运用：
audio.play();播放 audio.pause();暂停 audio.reday()加载完audio.duration播放时间audio.currentTime当前播放时间audio.ended当前歌曲播放结束
5.面向对象式封装 [ 已写为插件 ] ：
再次用面向对象方式来书写整个脚本,最近经常用面向对象方式写js,偶尔用面向过程的方式书写的时候,感到额外的轻松,几乎不会报错.老牛已经将整个脚本封装为了插件,接口在下载源码后可查阅.有兴趣的朋友可以用用看.
6.动态歌单信息与歌单与对应类目表跳转：
由于处理过几次data的json格式文件,本次运用起来可以说相当的得心应手,类目表与对应的表之间的index值处理,由于4大类目很多小歌单,小歌单在切换大类目表后取消黑色背景这部分倒是让我头疼了好久.
7.运算符前置的运用：
在盒子拖拽部分,老牛第一次用--与++前置,用于先运算再执行.减少了先This._boxIndex++,再代入的坑余代码.值得注意的是mouseup中有不少执行动作,所以在最后解绑mouseup是必要的。

8.点击判断与拖拽判断：
由于在song list模块中支持点击播放,而拖拽为移动,此处我用了鼠标按下抬起的时间差判断用户意向.
9.歌词分割：
对歌词lrc文件的处理是本章的难点之一,我将lrc格式以如下方式进行分割,将每句歌词存入一个lyric数组内,在每次歌曲播放时动态添加入lyricWrapper内,将时间格式存入cal数组内并将分:秒格式转换为秒的格式,用于给播放时间做计算。

10.歌曲长度,进度条长度以及歌词同步运算：
首先将当前歌曲长度除60向下取整,歌曲长度的分,在将总长度-分钟数*60取小数点0位获取到歌曲长度的秒数,作为歌曲总长度,然后让显示器显示,设一个计时器.每200毫秒进行一次运算,先求当前播放的时间,求法与求总时间类似,进度条长度用当前歌曲时间/歌曲总时间作为百分比值进行显示,这边的歌词同步,我用了grep函数去循环当前秒数在之前处理好的歌词时间节点数组中去返回出比当前秒数小的时间个数减去1,再用dis存在并且dis不等于-1以及dis不等于上一个dis后再执行歌词的移动,移动的距离为每条高度,这样一是避免bug,二则增加运行性能,并不会每200毫秒就做一次无谓的歌词运动,值得注意的是原先我是用的$.inArray去计算当前时间戳在处理数组中的位子,但是发现用inArray在拖拽进度条之后由于,时间节点的计算需要正好踩到相等点才能有反应,所以会有延迟反应,这里有意思的是我最先使用addEventListener来监听audio的ended,然后出现了很多bug,之后我改用if判断,就解决了,具体原因我也不清楚.
11.冒泡事件
在进度条拖拽计算时,取消背景层的拖拽冒泡事件是必要的！！