HTML5音乐播放器

“你的问题主要是读书不多而想得太多”

我就是这种不读书、没干货，遇到问题缺少实践的人~十分羡慕那些会写博客的人，就我来说，写一遍文章简直要比女人生孩子还要难受，半天憋不出一个字~哎，无奈肚子里没有墨水。罢了，直接入主题。

最近为了体验移动端开发做个了在线播放器，其实就是加了个媒体查询~，这是demo地址！

实现的功能：

播放器的基础操作:上/下一曲，播放/暂停，播放模式，时间轴定位
同步歌词

涉及技术：

audio的操作，请参考audio的API
滚动插件iScroll 5
网易云音乐搜索node模块，歌曲来源由node后台服务支撑。

踩到的坑：

在ios7中，采用dom0级事件处理程序注册audio的ended事件无效，是因为给对象添加了多次？
```
_$audio.onended = function () {
    player.playNext();
};
```
移动端点击操作按钮后，动态伪类:hover后保持hover效果，google后，一行代码解决，美团手机端web就是这样做的。
```
document.body.addEventListener("touchstart", function() {});
```
css
```
.control .btns .ply:active {
    background-position: -40px -204px;
}
```

异步加载DOM造成的高度问题造成iScroll不能滚动

player.init(data);
//待数据加载完毕，再实例化IScroll
loaded();

歌词滚动时间校对问题

歌词滚动的实现我采用hash表存储时间轴和歌词，将歌词文本反序列化成如下格式

var lry = {
    ‘00:00‘:{
        index:0,
        lyric:‘不相信会绝望‘
    }
    };

$audio.on(‘timeupdate‘, function () {
        if (_audio_duration > 0) {
            $(‘.cur‘).width(_audio.currentTime * 100 / _audio_duration + ‘%‘);
            var curTime = timeDispose(_audio.currentTime);
            //限定1s刷新一次
            if (player.curTime !== curTime) {
                var lrc = player.data[player.curIedex].lyric;
                if (lrc[curTime]) {
                    player._$lyric_wrap.find(‘.on‘).removeClass(‘on‘);
                    var p = player._$lyric_wrap.find("p:nth-child(" + (lrc[curTime].index + 1) + ")");
                    p.addClass("on");
                    player._$lyric_wrap.css({
                        "transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",
                        "-ms-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",
                        "-moz-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",
                        "-webkit-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",
                        "-o-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)"
                    });
                }
                player.curTime = curTime;
                $(‘.curTime‘).html(curTime);
            }
        }
    });

监听播放器的timeupdate事件，在歌词对象用当前播放时间轴位置查找对应歌词以及歌词的。但是会出现错位的bug，

未解决~大家有什么建议呢~

ps:代码实在不够优雅，大家给点意见重构代码吧~

源码