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:代碼實在不夠優雅，你們給點意見重構代碼吧~

源碼