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，