HTML5音乐播放器

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

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

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

实现的功能：

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

• 同步歌词

涉及技术：

• audio的操作，请参考audio的API

• 滚动插件iScroll 5

• 网易云音乐搜索node模块，歌曲来源由node后台服务支撑。

踩到的坑：

1. 在ios7中，采用dom0级事件处理程序注册audio的ended事件无效，是因为给对象添加了多次？

   _$audio.onended = function () {
       player.playNext();
   };

2. 移动端点击操作按钮后，动态伪类:hover后保持hover效果，google后，一行代码解决，美团手机端web就是这样做的。

   document.body.addEventListener("touchstart", function() {});

   css

   .control .btns .ply:active {
       background-position: -40px -204px;
   }

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

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

4. 歌词滚动时间校对问题

   歌词滚动的实现我采用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:代码实在不够优雅，大家给点意见重构代码吧~

源码