HTML5音樂播放器

時間 2020-01-04 標籤 html5 html 音樂播放

「你的問題主要是讀書很少而想得太多」css

我就是這種不讀書、沒幹貨，遇到問題缺乏實踐的人~十分羨慕那些會寫博客的人，就我來講，寫一遍文章簡直要比女人生孩子還要難受，半天憋不出一個字~哎，無奈肚子裏沒有墨水。罷了，直接入主題。html

最近爲了體驗移動端開發作個了在線播放器，其實就是加了個媒體查詢~，這是demo地址！node

實現的功能：ios

播放器的基礎操做:上/下一曲，播放/暫停，播放模式，時間軸定位git
同步歌詞github

涉及技術：web

audio的操做，請參考audio的APIdom
滾動插件iScroll 5異步
網易雲音樂搜索node模塊，歌曲來源由node後臺服務支撐。ide

踩到的坑：

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

源碼