開篇

HTML5的最強(qiáng)大之處莫過于對(duì)媒體文件的處理，如利用一個(gè)簡(jiǎn)單的vedio標(biāo)簽就可以實(shí)現(xiàn)視頻播放。類似地,在HTML5中也有對(duì)應(yīng)的處理音頻文件的標(biāo)簽，那就是audio標(biāo)簽。

在線Demo

audio標(biāo)簽

實(shí)現(xiàn)一個(gè)audio標(biāo)簽非常簡(jiǎn)單，對(duì)應(yīng)的html代碼如下：

<audio id="player" 
    src="music/我在人民廣場(chǎng)吃炸雞.mp3" 
    autoplay controls>
</audio>

上述代碼不需要一行js腳本就能實(shí)現(xiàn)音樂播放。其中有三個(gè)常用的屬性，分別為：音頻源文件，是否自動(dòng)播放以及是否顯示播放器控件。由于沒有任何ui的展現(xiàn)，audio標(biāo)簽在chrome的默認(rèn)風(fēng)格如下圖:

可以看出，一個(gè)基本的播放器還包括了顯示當(dāng)前時(shí)間，播放，暫停，快進(jìn)快退等功能。這些功能都決定了如何很好的實(shí)現(xiàn)歌詞同步（后續(xù)介紹）。

既然這么容易就就能播放音樂，那作為一項(xiàng)前端的技術(shù)，audio標(biāo)簽在各個(gè)瀏覽器中的兼容性又是怎樣的呢？
Browser Compatibility

可以看出，各大瀏覽器對(duì)audio標(biāo)簽基本功能都支持，只是在細(xì)微的特性上表現(xiàn)不一，但是這些基本的功能已經(jīng)足已做出一個(gè)好的播放器。

歌詞

一般標(biāo)準(zhǔn)的lyric文件是由[時(shí)間]內(nèi)容的tag標(biāo)簽組成，如下圖：

為了更精確的展現(xiàn)每個(gè)字在每句歌詞中的時(shí)間，又出現(xiàn)了特殊的歌詞形式，如下：

這種歌詞的格式的最好例子就是QRC歌詞文件（如QQ音樂播放器）：

為了描述簡(jiǎn)單，本文僅以最簡(jiǎn)單的lyric格式作為說明，講解如何分離歌詞進(jìn)行歌詞同步。如下，為一首歌曲的歌詞文件:

現(xiàn)對(duì)該歌詞文件作一下處理：

• 1.以行為單位拆分每一句歌詞
• 2.將沒句歌詞的時(shí)間tag和內(nèi)容分離
• 3.將時(shí)間轉(zhuǎn)換為分鐘

轉(zhuǎn)換過程較為簡(jiǎn)單，只需一個(gè)簡(jiǎn)單的正則匹配，過程如下：

分離出來的[時(shí)間,內(nèi)容]可以與audio當(dāng)前的播放時(shí)間進(jìn)行對(duì)比，若需要顯示對(duì)應(yīng)的歌詞則將該行高亮，同時(shí)每次更新對(duì)應(yīng)DOM節(jié)點(diǎn)的top則可在視覺上達(dá)到滾動(dòng)效果。

制作歌詞ui。

• 1.定義一個(gè)現(xiàn)實(shí)歌詞的區(qū)域，添加audio控件

• 2.添加背景圖片，制作標(biāo)題邊框

• 3.添加歌詞

到此，歌詞同步以及ui繪制全部完畢。

在線Demo

Blog同步