Audio: 若是你願意一層一層剝開個人心

時間 2019-11-05

標籤 audio 若是願意一層剝開個人简体版

原文原文鏈接

我以爲DOM就好像是元素週期表裏的元素，JS就好像是實驗器材，經過各類化學反應，產生各類魔術。

1 Audio

經過打開谷歌瀏覽器的dev tools -> Settings -> Elements -> Show user agent shadow DOM, 你能夠看到其實Audio標籤也是由經常使用的 input標籤和div等標籤合成的。html

2 基本用法

1 <audio src="http://65.ierge.cn/12/186/372266.mp3">
Your browser does not support the audio element.
</audio>

<br>

2 <audio src="http://65.ierge.cn/12/186/372266.mp3" controls="controls">
Your browser does not support the audio element.
</audio>

<br>

// controlsList屬性目前只支持 chrome 58+
3 <audio src="http://65.ierge.cn/12/186/372266.mp3" controls="controls" controlsList="nodownload"> 
Your browser does not support the audio element.
</audio>

<br>

4 <audio controls="controls">
<source src="http://65.ierge.cn/12/186/372266.mp3" type='audio/mp3' />
</audio>

你能夠看出他們在Chrome裏表現的差別html5

關於audio標籤支持的音頻類型，能夠參考Audio#Supported_audio_coding_formatsgit

3 經常使用屬性

autoplay: 音頻流文件就緒後是否自動播放
preload: "none" | "metadata" | "auto" | ""github
- "none": 無需預加載
- "metadata": 只須要加載元數據，例如音頻時長，文件大小等。
- "auto": 自動優化下載整個流文件
controls： "controls" | "" 是否須要顯示控件
loop： "loop" or "" 是否循環播放
mediagroup： string 多個視頻或者音頻流是否合併
src：音頻地址

4 API(重點)

load(): 加載資源
play(): 播放
pause(): 暫停
canPlayType()：詢問瀏覽器以肯定是否能夠播放給定的MIME類型
buffered()：指定文件的緩衝部分的開始和結束時間

5 經常使用事件：Media Events(重點)

事件名	什麼時候觸發
loadstart	開始加載
progress	正在加載
suspend	用戶代理有意沒法獲取媒體數據，沒法獲取整個文件
abort	主動終端下載資源並非因爲發生錯誤
error	獲取資源時發生錯誤
play	開始播放
pause	播放暫停
loadedmetadata	剛獲取完元數據
loadeddata	第一次渲染元數據
waiting	等待中
playing	正在播放
canplay	用戶代理能夠恢復播放媒體數據，可是估計若是如今開始播放，則媒體資源不能以當前播放速率直到其結束呈現，而沒必要中止進一步緩衝內容。
canplaythrough	用戶代理估計，若是如今開始播放，則媒體資源能夠以當前播放速率一直呈現到其結束，而沒必要中止進一步的緩衝。
timeupdate	當前播放位置做爲正常播放的一部分而改變，或者以特別有趣的方式，例如不連續地改變。
ended	播放結束
ratechange	媒體播放速度改變
durationchange	媒體時長改變
volumechange	媒體聲音大小改變

6 Audio DOM 屬性(重點)

6.1 只讀屬性

duration：媒體時長，數值，單位s
ended: 是否完成播放，布爾值
paused: 是否播放暫停，布爾值

6.2 其餘可讀寫屬性(重點)

playbackRate：播放速度，大多數瀏覽器支持0.5-4， 1表示正常速度，設置該屬性能夠修改播放速度
volume：0.0-1.0之間，設置該屬性能夠修改聲音大小
muted: 是否靜音，設置該屬性能夠靜音
currentTime：指定播放位置的秒數

// 你可使用元素的屬性seekable來決定媒體目前能查找的範圍。它返回一個你能夠查找的TimeRanges 時間對象。
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // 返回開始時間 (in seconds)
mediaElement.seekable.end();    // 返回結束時間 (in seconds)
mediaElement.currentTime = 122; // 設定在 122 seconds
mediaElement.played.end();      // 返回瀏覽器播放的秒數

如下方法可使音頻以2倍速度播放。chrome

<audio id="wdd" src="http://65.ierge.cn/12/186/372266.mp3" controls="controls">
Your browser does not support the audio element.
</audio>

<script>
    var myAudio = document.getElementById('wdd');
    myAudio.playbackRate = 2;
</script>