開篇

HTML5的最強大之處莫過于對媒體文件的處理，如利用一個簡單的vedio標簽就可以實現視頻播放。類似地,在HTML5中也有對應的處理音頻文件的標簽，那就是audio標簽。

audio標簽

實現一個audio標簽非常簡單，對應的html代碼如下：

src="music/我在人民廣場吃炸雞.mp3"

autoplay controls>

上述代碼不需要一行js腳本就能實現音樂播放。其中有三個常用的屬性，分別為：音頻源文件，是否自動播放以及是否顯示播放器控件。由于沒有任何ui的展現，audio標簽在chrome的默認風格如下圖:

可以看出，一個基本的播放器還包括了顯示當前時間，播放，暫停，快進快退等功能。這些功能都決定了如何很好的實現歌詞同步(后續介紹)。

既然這么容易就就能播放音樂，那作為一項前端的技術，audio標簽在各個瀏覽器中的兼容性又是怎樣的呢？

Browser Compatibility

可以看出，各大瀏覽器對audio標簽基本功能都支持，只是在細微的特性上表現不一，但是這些基本的功能已經足已做出一個好的播放器。

歌詞

一般標準的lyric文件是由[時間]內容的tag標簽組成，如下圖：

為了更精確的展現每個字在每句歌詞中的時間，又出現了特殊的歌詞形式，如下：

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

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

現對該歌詞文件作一下處理：

1.以行為單位拆分每一句歌詞

2.將沒句歌詞的時間tag和內容分離

3.將時間轉換為分鐘

轉換過程較為簡單，只需一個簡單的正則匹配，過程如下：

分離出來的[時間,內容]可以與audio當前的播放時間進行對比，若需要顯示對應的歌詞則將該行高亮，同時每次更新對應DOM節點的top則可在視覺上達到滾動效果。

制作歌詞ui。

1.定義一個現實歌詞的區域，添加audio控件

2.添加背景圖片，制作標題邊框

3.添加歌詞

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

總結

以上是生活随笔為你收集整理的html5音乐和歌词同步,HTML5实现歌词同步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。