開篇
HTML5的最強大之處莫過於對媒體文件的處理，如利用一個簡單的vedio標簽就能夠實現視頻播放。相似地,在HTML5中也有相應的處理音頻文件的標簽，那就是audio標簽
audio標簽
實現一個audio標簽非常easy，相應的html代碼例如以下：
<audio id="player" src="music/我在人民廣場吃炸雞.mp3" autoplay controls>
</audio>上述代碼不須要一行js腳本就能實現音樂播放。當中有三個經常使用的屬性，分別為：音頻源文件，是否自己主動播放以及是否顯示播放器控件。
因為沒有不論什么ui的展現，audio標簽在chrome的默認風格例如以下圖:
能夠看出，一個主要的播放器還包含了顯示當前時間。播放，暫停，快進快退等功能。這些功能都決定了怎樣非常好的實現歌詞同步（興許介紹）。
既然這么easy就就能播放音樂，那作為一項前端的技術。audio標簽在各個瀏覽器中的兼容性又是怎樣的呢？
Browser Compatibility
能夠看出，各大瀏覽器對audio標簽基本功能都支持。僅僅是在細微的特性上表現不一，可是這些主要的功能已經足已做出一個好的播放器。
歌詞
一般標准的lyric文件是由[時間]內容的tag標簽組成，例如以下圖：
為了更精確的展現每一個字在每句歌詞中的時間，又出現了特殊的歌詞形式，例如以下：
這樣的歌詞的格式的最好樣例就是QRC歌詞文件（如QQ音樂播放器）：
為了描寫敘述簡單，本文僅以最簡單的lyric格式作為說明。解說怎樣分離歌詞進行歌詞同步。
例如以下，為一首歌曲的歌詞文件:
現對該歌詞文件作一下處理：
1.以行為單位拆分每一句歌詞2.將沒句歌詞的時間tag和內容分離3.將時間轉換為分鍾
轉換過程較為簡單，僅僅需一個簡單的正則匹配，步驟例如以下：
分離出來的[時間,內容]能夠與audio當前的播放時間進行對照，若須要顯示相應的歌詞則將該行高亮，同一時候每次更新相應DOM節點的top則可在視覺上達到滾動效果。
制作歌詞ui。
- 1.定義一個現實歌詞的區域，加入audio控件
- 2.加入背景圖片，制作標題邊框
- 3.加入歌詞
到此。歌詞同步以及ui繪制所有完成。
PS:CSDN的markdown樣式太水了,能夠看看以下其它的鏈接。