HTML5 - Audio音頻操作

來自專欄 H5進階之旅

最近因為項目上用到音樂播放，就仔細研究了一下html5 audio API,利用國慶休息的時間，進行了一些總結，有些坑還沒填好已經備註文檔中。

這篇文章主要是介紹一些基本使用，**下一篇將主要與大家分享audio在各個瀏覽器和設備上存在的問題以及如何去解決。**

常用屬性

屬性 | 作用 |

---|---|----

src | 設置或返回是否在就緒（載入完成）後隨即播放音頻

currentSrc | 返回當前音頻的 URL。

currentTime | 設置或返迴音頻中的當前播放位置（以秒計）。

duration | 返迴音頻的長度（以秒計）。

readyState | 返迴音頻當前的就緒狀態。

networkState | 返迴音頻的當前網路狀態。

功能播放設置

屬性 | 值 | 作用

---|---|---------

paused | bool | 設置或返迴音頻是否暫停。

ended | bool | 返迴音頻的播放是否已結束。

muted | bool |設置或返回是否關閉聲音。

controls| bool| 設置或返迴音頻是否應該顯示控制項（比如播放/暫停等）。

loop | bool |設置或返迴音頻是否應在結束時再次播放。

autoplay |bool| 設置或返回是否在就緒（載入完成）後隨即播放音頻。

preload |bool| 設置或返迴音頻的 preload 屬性的值。

volume | 範圍 0-1 |設置或返迴音頻的音量。

playbackRate | 1.0/2.0倍速度 -2後退兩倍速度 | 設置或返迴音頻/視頻播放的速度(留下一個坑 負值不起作用)

常用方法

名稱 | 作用

---|---

canPlayType() | 查瀏覽器是否可以播放指定的音頻類型 "probably" - 瀏覽器最可能支持該音頻/視頻類型，"maybe" - 瀏覽器也許支持該音頻/視頻類型，"" - （空字元串）瀏覽器不支持該音頻/視頻類型

fastSeek() | 在音頻播放器中指定播放時間

load() | 重新載入音頻元素

play() | 開始播放音頻

pause() | 暫停當前播放的音頻

常用事件

事件名稱 | 事件描述

---|---

loadstart | 客戶端開始請求數據

progress | 客戶端正在請求數據（或者說正在緩衝）

play | 播放中

pause | 暫停

ended | 播放結束

timeupdate | 當前播放時間發生改變的時候。常用作顯示進度

canplaythrough | 歌曲已經載入完全完成

canplay | 緩衝至目前可播放狀態。

error | 播放發生錯誤時。