AUDIO標籤詳細解讀

過程

前情提要

這篇是昨天寫的，可是思否的文本編輯器太反人類了，昨天懶得改，因此今天才發。我沒有中斷個人連續水博客計劃哦~

這兩天弄了個基於Vue的音樂播放器，由於最近好多人作我也就跟着學了學。尚未很完善，在audio這裏玩了好久。之前都沒用過audio標籤。

重點

前言

audio標籤是HTML5中新增的標籤之一。能夠看看HTML5以前怎麼導入音頻。

網頁內播放能夠用embed導入，可是embed標籤過不了HTML4的validation。下面這個用了vue綁定src。

<embed height="50" width="100" :src="songUrl"\>

audio標籤概述

用來定義聲音。

下面看看屬性們。測試的時候手上沒有音樂的話src能夠用個人

https://tianyitimothy.github.io/resources/arcs.mp3

屬性

src

用來指定音樂的路徑。Demo:

<audio src="song.mp3">  
 能看到說明不支持  
</audio>

但你會發現用了上面的代碼，並不會顯示。這是由於沒有自定義界面，也沒有加上controls屬性。

controls

用來指定是否顯示默認的音樂面板。Demo:

<audio src="song.mp3" controls></audio>

這樣瀏覽器會顯示audio標籤的默認播放面板。也能夠寫做:

<audio src="song.mp3" controls="controls"></audio>

controls默認是沒有的，而後值又只有一個"controls"，不加他就不會顯示面板。可是如今autoplay屬性都已經禁止使用了，只有本身自定義的話纔會不須要controls。

loop

存在此屬性則開啓循環。值只有"loop"。Demo:

<audio src="song.mp3" controls loop></audio>

muted

存在此屬性則靜音。值只有"muted"。Demo:

<audio src="song.mp3" controls muted></audio>

preload

設定音頻的預加載方式。

="auto":自動加載，頁面加載後載入整個音頻

="metadata":自動加載，頁面加載後只載入元數據

="none":不自動加載

PS 手機端的preload會被無視，具體默認值是什麼沒測試~盲猜全部內核都是none吧~

Demo:

<audio src="song.mp3" controls preload="none"></audio>

JS操做

拿到audio標籤

就是得到DOM。Demo:

const audioDOM = document.getElementById("audio");

當前播放時間currentTime

currentTime屬性可讀可寫。返回當前播放時長，單位是秒。能夠經過修改它來實現倒退or前進x秒，倒退5秒Demo:

const audioDOM = document.getElementById("audio");  
if (audioDOM.currentTime > 5) {  
 audioDOM.currentTime -= 5;  
} else {  
 audioDOM.currentTime = 0;  
}

音頻總時長duration

duration屬性是可讀屬性。返回音頻總時長，單位是秒。要注意在load()方法以前，duration的值爲NaN。用法僞代碼:

const audioDOM = document.getElementById("audio");  
if (isNaN(audioDOM.duration)) {  
 // 未加載時的操做  
} else {  
 // 已加載時的操做  
}

音量volume

volume屬性可讀可寫。返回當前音量，最小是0（靜音），最大音量是1。能夠經過修改它來實現音量增長or減小的按鈕。加10%音量Demo:

const audioDOM = document.getElementById("audio");  
if (audioDOM.volume < 0.9) {  
 audioDOM.volume += 0.1;  
} else {  
 audioDOM.volume = 1;  
}

音量有時候會變成7.99999999這樣的奇葩數字...很奇葩，可是用戶來講沒有任何影響。

播放速率playbackRate

playbackRate就是播放速率，可讀可寫，返回播放速度，值是速度的倍率，最大播放速度根據內核的不一樣而有所不一樣，可是正常來講2倍已經夠用了。選擇速度Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
// 不是數字  
if(isNaN(rate)){  
 return;  
}  
rate = parseInt(rate);  
const minRate = 0.5;  
const maxRate = 2;  
if (rate <= maxRate && rate >= minRate) {  
 audioDOM.playbackRate = rate;  
} else if (rate < minRate) {  
 audioDOM.playbackRate = minRate;  
} else {  
 audioDOM.playbackRate = maxRate;  
}

播放play()

使用播放方法讓暫停了的音頻播放。Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
audioDOM.play();

誒看到這個是否是很心動，autoplay屬性被取締了，那我直接在window.onload裏面用play()開始播放不就行了嗎？不。若是用戶沒有「跟頁面互動」就會報錯！

"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."

暫停pause()

使用暫停方法讓正在播放的音頻暫停。Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
audioDOM.pause();

是否暫停paused

paused屬性是可讀屬性，返回boolean值：若音頻是暫停狀態，返回true；反之返回false。經過paused實現播放/暫停Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
if (audioDOM.paused === true) {  
 audioDOM.play();  
} else {  
 audioDOM.pause();  
}

暫停pause()

使用播放方法讓暫停了的音頻播放。Demo:

// 拿到dom  
const audioDOM = document.getElementById("audio");  
audioDOM.play();

加載load()

若是前面沒設置preload或者設置了preload爲none，能夠用這個方法來觸發加載。

加載的生命週期（按前後順序排序）

實際上是能夠被監聽的事件們，監聽僞代碼:

myAudio.addEventListener("loadstart", function() {  
 // 當這個事件觸發的時候幹嗎呢~  
});

loadstart開始加載

開始加載音頻了。

durationchange時長改變

音頻的時長改變了。

loadedmetadata元數據加載完畢

能夠用做判斷「音頻初始化」的方法。固然初始化也能夠用duration屬性是否爲NaN或者durationchange來判斷，看需求了。

loadeddata數據開始加載

"The loadeddata event is fired when the first bit of media arrives."在加載了第一位(bit)的文件時觸發。我感受這個名字取得很差，loadeddata更像是數據已經加載完了。然而加載完了的事件是canplaythrough`。

progress加載中

音頻還在加載中。loader能夠在這裏部署。

canplay能夠播放

音頻能夠播放了。能夠在這個事件觸發以後再把controls設置爲能夠操做的。

canplaythrough能夠播放整個音頻

音頻加載徹底完成了！

播放事件

timeupdate時間更新

這個time指的是currentTime ，最頻繁是「每250毫秒觸發一次」。

waiting等待中

因爲沒有數據而致使暫停時觸發。

playing播放中

從waiting狀態轉換到能夠播放的狀態時觸發。

play播放

play()方法被調用時觸發。

pause暫停

pause()方法被調用時觸發。

ended結束

音頻播放完畢後觸發。

volumechange音量改變

音量改變時觸發。

尾巴

1. 什麼？？！你要找的這裏沒有？那來讀讀文檔吧！我略過了一些~
2. 好比有一個canplaytype我就沒寫，由於我本身只在用mp3格式，也就懶得一個個type去測試了~
3. 個人自定義界面要留到之後水博客的時候再寫~
4. 我又又又又又又又通宵了。