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

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

最近为了体验移动端开发做个了在线播放器，其实就是加了个媒体查询~，这是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:代码实在不够优雅，大家给点意见重构代码吧~

源码