HTML5音訊audio屬性

audio 的控制函式主要有：

load() 載入音訊、視訊軟體，通常不必呼叫，除非是動態生成的元素，用來在播放前預載入
play() 載入並播放音訊、視訊檔案，除非檔案已經暫停在其他位置，否則預設重頭開始播放
pause() 暫停處於播放狀態的音訊、視訊檔案

audio 的只讀媒體特性有：

duration 獲取媒體檔案的播放時長，以s為單位，如果無法獲取，則為NaN
paused 如果媒體檔案被暫停，則返回true，否則返回false
ended 如果媒體檔案播放完畢，則返回true
startTime 返回起始播放時間，一般是0.0，除非是緩衝過的媒體檔案，並一部分內容已經不在緩衝區
error 在發生了錯誤後返回的錯誤程式碼
currentSrc 以字串形式返回正在播放或已載入的檔案，對應於瀏覽器在source元素中選擇的檔案

audio 可指令碼控制的特性值：

autoplay 自動播放已經載入的的媒體檔案，或查詢是否已設定為autoplay
loop 將媒體檔案設定為迴圈播放，或查詢是否已設定為loop
currentTime 以s為單位返回從開始播放到目前所花的時間，也可設定 currentTime的值來跳轉到特定位置
controls 顯示或者隱藏使用者控制介面
volume 在0.0到1.0間設定音量值,或查詢當前音量值
muted 設定是否靜音
autobuffer 媒體檔案播放前是否進行緩衝載入，如果設定了autoplay，則忽略此特性

歌曲播放進度

這個功能用到的 audio api 主要有：

currentTime() ：以秒為單位返回從開始播放到目前所花的時間，也可設定 currentTime 的值來跳轉到特定位置；
duration：獲取媒體檔案的播放時長，以秒為單位，如果無法獲取，則為 NaN；

歌曲進度：首先先設定一個定時器，分別獲取這兩個值，用當前播放的秒數除以歌曲總秒數，再乘以歌曲進度條的總寬度（px），就能算出歌曲進度條一秒鐘可以走多少。

歌曲進度調節：點選進度條的某個位置，歌曲跳轉到響應位置，這個功能的實現是先獲取到點選的位置距離進度條最左邊的長度（讓 Firefox 支援 offsetX、offsetY），接著獲得這段距離在整個進度條的長度裡所佔的百分比，用這個百分比乘以歌曲的總長度，就能算出該給 currentTime 設定的值。

歌曲時間顯示

歌曲顯示：在計算歌曲進度的定時器內，不斷髮送歌曲的播放時間和總時間，左邊的時間為歌曲的播放時間，也就是 currentTime 的值，右邊的時間用總時間減去 currentTime ，並將它們轉換為我們需要的格式即可。

音量的調節

volume：在0.0到1.0間設定音量值,或查詢當前音量值；

音量調節：這個功能實現起來很簡單，把 volume 的值設為 0.0，就靜音了。在控制元件上調節音量的原理和也歌曲的進度條一樣，判斷點選位置距離第一個相對元素 Y 軸上最頂端的位置，然後再進一步計算出具體的數值，注意數值的格式，別超過1，並且小數點後只有1位。

播放列表與播放方式

把整個歌曲檔案的資訊都寫在 json 檔案裡，獲取並生成播放列表。當播放歌曲時，系統會生成當前播放歌曲的引索值（例如：1,2，表示第二張專輯的第三首歌，這個很重要，歌曲切換都是基於這個引索值的），當要播放下一曲時，系統會根據當前是什麼播放方式（列表迴圈，單曲迴圈，隨機播放，順序播放），生成新的引索值，然後通知播放器，下一首該怎麼播放，是隨機，還是迴圈，還是播放結束。

同步顯示歌詞

ajax獲取歌詞檔案（lrc檔案）

用正則分別過濾出歌詞和歌詞前面對應的時間，存入陣列

將歌詞的時間和內容遍歷存入 HTML

每秒都去判斷一下現在歌曲播放的時間，如果和臨時資料 data-timeline 裡的值一樣，就滾動