HTML5移動端音樂播放器（啓蒙篇）

時間 2020-01-10

標籤 html5 html 移動音樂播放啓蒙欄目 HTML5 简体版

原文原文鏈接

這段時間公司一直在作一個PC的教育類單頁應用，龐大複雜，涉及很是多H5的知識，音頻就是其中的一部分。前些天偷颱風的閒暇時寫了一個移動端音樂播放器，做爲練手項目。javascript

在線地址：請猛擊這裏
源碼：請猛擊這裏css

注意：使用PC瀏覽最好打開移動設備模式，使用移動設備瀏覽須要關閉無痕瀏覽模式（不然沒法使用本地存儲，通常瀏覽器都是默認不開啓），項目須要在本地服務器或線上服務器運行，以file:///形式的地址打開是沒法進行ajax請求的，從而沒法看到音樂數據。
html

項目實現的功能及所用知識

播放器的基礎操做，上一首，下一首(順序播放、隨機播放、單曲循環)，播放暫停，滑動時間軸的歌詞定位前端
初始handlebar模板渲染音樂列表數據，下拉滾動加載音樂列表數據。java
歌曲列表可添加喜好音樂，於下次刷新時更新喜好音樂列表，基於HTML5本地存儲。git
佈局採用rem佈局，自適應移動端手機設備。ajax
iconfont在線圖標應用的使用chrome

項目目錄文件結構

css：存放樣式文件
lib： 存放公共腳本庫
js： 存放項目腳本文件
img： 存放圖片
fonts： 項目字體文件
res： 項目音樂資源
ui：項目ui文件（psd）json

// ============================配置變量================================
var rootPath = window.location.href.replace(/\/\w+\.\w+/, "/");
var Settings = {
playmode: 0, //0列表循環，1隨機，2爲單曲循環
volume: 0.5, //音量
initNum: 10, //列表初始化歌曲數
reqNum: 10 //後續請求歌曲數
};

// ============================工具函數================================
var Util = (function() {
return {

}
})()
// ============================Dom選擇器================================
var Dom = {

}

// ============================全局變量================================
var winH = $(window).height();

var songNum = 0; //當前列表歌曲數目
var lrcHighIndex = 0; // 歌詞高亮索引
var lrcMoveIndex = 0; // 歌詞移動單位索引
var moveDis = 0; // 單句歌詞每次移動距離

var duration = 0; // 當前歌曲的時間
var index = 0; //當前播放歌曲的索引
var songInfo = null; // 當前歌曲信息
var songModelUI = null; // 當前歌曲UI模型
var timeArr = []; //當前歌曲時間數組
var formatTimeArr = []; //當前歌曲時間數組(格式化爲秒數)

// ============================入口函數================================
function main() {
initUIFrame();
var initModel = PlayerModel();

var songListUI = ModelUIFrame(Dom.songListContainer);
var lsongListUI = ModelUIFrame(Dom.lSongListContainer);
initModel.getSongList("data/data.json", function(data) {
// 生成全部歌曲列表
songListUI.renderList(data, 0, null, function() {
songListUI.updateList();
});
// 生成喜好歌曲列表
initModel.getLoveSongArr(function(lSongArr) {
lsongListUI.renderList(data, 1, lSongArr);
});
// 添加動畫
Util.addAnimationDelay(Dom.song);
// 保存歌詞數據
initModel.saveLyric(data);

});
EventHandler();
}
// ============================初始化UI函數================================
function initUIFrame() {

}
// ============================實現數據交互方法================================
function PlayerModel() {

}
// ============================模型動態UI模塊================================
function ModelUIFrame(container) {

}
// ============================事件綁定模塊================================
function EventHandler() {

}
// 調用入口函數
main();

功能點詳解

Handlebar.js初次渲染及滾動加載

使用前端模板優勢是把數據和結構分離出來，代碼更清晰。但後來發現handlerbar.js彷佛沒法在js中示例模板對象，而html中的handlebar在初次進入頁面便會被編譯了，所以後續添加音樂仍是採用傳統的拼接字符串的方式，若是你有更優雅的動態加載方式，歡迎討論交流。數組

html:handlebars模板包含在script標籤之中而且type類型爲」text/x-handlebars-template」，在初始化頁面的時候根據js獲取數據植入後就渲染出相應的html。

<script id="sListTpl" type="text/x-handlebars-template">
{{#each this}}
{{#isInitData this @index}}
<li class="song btm-line" data-src={{songSrc}} data-index={{id}}>
    <div class="poster">
        <img src={{poster.thumbnail}}>
    </div>
    <div class="songinfo">
        <h2 class="lsongname">{{songName}}</h2>
        <sub class="lsinger">{{singer}}</sub>
    </div>
    <div class="loveflag">
        <i class="icon icon-love {{#if loveFlag}}active{{/if}}"></i>
    </div>
</li>
{{/isInitData}}
{{/each}}
</script>

js:

function renderAllList(data) {
    var preTpl;
    var lsongArr = Util.getItem('lsonglist') === null ? [] : JSON.parse(Util.getItem('lsonglist'));
    // 生成列表
    if (!sListTpl) {
        // 後續動態生成歌曲
        var tpl = "";
        var songIndex = songNum;
        $.each(data, function(index, el) {
            if (index >= songIndex && index < songIndex + Settings.reqNum) {
                tpl += "<li class='song btm-line' data-src='res/music/" + songNum + ".mp3' data-index='" + songNum + "'><div class='poster'>[站外圖片上傳中……(1)]</div><div class='songinfo'><h2 class='lsongname'>" + el.songName + "</h2><sub class='lsinger'>" + el.singer + "</sub></div><div class='loveflag'><i class='icon icon-love '></i></div></li>";
                songNum++;
            }
        });
        $(container).append($(tpl));
    } else {
        // 首次生成歌曲
        preTpl = Handlebars.compile(sListTpl);
        $(container).html(preTpl(data));
    }
    // 更新喜好圖標
    if (lsongArr.length !== 0) {
        $.each(lsongArr, function(index, val) {
            Dom.songListContainer.find(".song").eq(val).find(".icon-love").addClass('active');
        });
    }
}

rem佈局自適應方案

大致上指的是html根元素上定義一個字體大小，而後css樣式定義時使用rem做爲單位，包括margin、paddding、用於絕對定位的單位等等。而後js根據手機設備的屏幕大小，改變根字體的大小，這樣整個頁面也會跟着相應的縮小或放大。
更多詳解，請看這一篇文章《移動端自適應佈局解決方案——rem》，您能夠猛擊這裏跳轉。

關於歌詞的同步方案實現

目前音樂播放器的歌詞同步顯示大概有兩種，一種是精確到單個文字，一種是精確到單行歌詞。本文實現的是第二種。

總體實現思路

頁面初始化時，請求歌曲數據json（本地json文件模擬），其中歌名、歌手、圖片等按需渲染到html中，將歌詞存儲到localStorage中。此時，F12打開chrome調試器，進入Application-LocalStorage能夠看到：

點擊一首歌進入播放頁面後，歌詞就會從本地存儲中讀取，此時你會看到生成這樣的歌詞結構：

每一行歌詞都將要將歌詞時間綁定在data-point上，監聽歌曲播放的timeupdate事件，當歌曲的時間(通過取整處理)與當前data-point值相等時，就爲當前歌詞高亮（至關於給p添加current類名），而且根據當前高亮歌詞的index索引將整個歌詞盒子向上移動p標籤的高度+margin-top的高度。

lrc歌詞的結構

來自網易雲音樂的歌詞數據：

[00:14.64]若是不是那鏡子\n[00:16.73]不像你不藏祕密\n[00:21.26]我還不願相信\n[00:23.02]沒有你個人笑更美麗\n[00:28.99]那天聽你在電話裏略帶抱歉的關心\n

[00:16.959]摘一顆蘋果\n[00:19.800]等你從門前通過\n[00:22.700]送到你的手中幫你解渴\n[00:25.570]像夏天的可樂\n

[00:00.00] 做曲 : 周杰倫\n[00:01.00] 做詞 : 周杰倫\n[00:05.620]\n[00:37.980]親吻你的手\n

能夠看到格式 = [時間點] + 要顯示的文字 + \n
這裏有兩個坑須要注意：
有的歌詞秒數是精確到小數點後兩位，有的是三位。
有的歌詞（周杰倫《算什麼男人》）格式是[時間點]+\n

首先以n將歌詞字符串分割成以[時間點]文字的數組，但因爲這樣分割以後最後一個元素是空的，因此用tempArr.splice(-1, 1)刪除最後一個元素。
接下來循環遍歷這個臨時數組，因爲上面提到的秒數精確度的問題，因此判斷一下index爲9是否爲數字，若爲數字則將該位數字刪除。(採用字符串截取方式，若你對js字符串方法不熟悉，能夠猛擊這裏)
通過這樣的處理以後，臨時數組的元素格式再也不有區別了，此時再進行字符串截取，將截取到的時間點放入timeArr，將截取的歌詞放入lyricArr，並以返回保存着這兩個變量的對象。

function createArrMap(lyric) {
    var timeArr = [],
        lyricArr = [];
    var tempArr = lyric.split("\n");
    tempArr.splice(-1, 1);
    var tempStr = "";
    $(tempArr).each(function(index) {
        tempStr = this;
        if (tempStr.charAt(9).match(/\d/) !== null) {
            tempStr = tempStr.substring(0, 9) + tempStr.substring(10);
        }
        timeArr.push(tempStr.substring(0, 10));
        lyricArr.push(tempStr.substring(10));
    });
    return {
        timeArr: timeArr,
        lyricArr: lyricArr
    };
}

生成歌詞

因爲上面歌詞格式形成時間點對應的歌詞爲空，此時若是渲染出一個
標籤的高度將爲0，這會影響歌詞向上移動距離的不統一。所以下面做出個判斷若是爲空，則替換爲「————–」。（爲空的時候大多數是歌曲中間停頓或過渡的時候）

function renderLyric(songinfo) {
    var arrMap = Util.createArrMap(songinfo.lyric);
    var tpl = "";
    $.each(arrMap.lyricArr, function(index, lyric) {
        var lyricContent = lyric === "" ? "--------------" : lyric;
        tpl += "<p class='' data-point='" + arrMap.timeArr[index] + "'>" + lyricContent + "</p>";
    });
    Dom.lrcwrap.html(tpl);
}

歌詞同步

歌詞同步我寫在了syncLyric方法中，監聽audio元素的timeupdate事件調用。
這個方法接收兩個參數，第一個是當前播放歌曲時間（秒），第二個是轉化爲秒數的時間點數組。
若是當前時間>=時間點，那麼高亮當前歌詞（以lrcHighIndex）存儲，而且lrcHighIndex自增1。
當歌詞高亮索引lrcHighIndex>=1即歌詞高亮不爲第一句時，計算索引並讓歌詞盒子向上移動。

function syncLyric(curS, formatTimeArr) {
    if (Math.floor(curS) >= formatTimeArr[lrcHighIndex]) {
        Dom.lrc.eq(lrcHighIndex).addClass('current').siblings().removeClass('current');
        if (lrcHighIndex >= 1) {
            lrcMoveIndex = lrcHighIndex - 2;
            moveDis += Util.getMoveDis(lrcMoveIndex);
            Dom.lrcwrap.animate({
                "top": "-" + moveDis + "px"
            }, 100);
            lrcMoveIndex++;
        }
        lrcHighIndex++;
    }
}