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 里的值一樣，就滾動