Audio: 如果你愿意一層一層剝開我的心

wangjuntytl 發布于2019-08-20 17:14 / 2401人閱讀

摘要：基本用法屬性目前只支持你可以看出他們在里表現的差異關于標簽支持的音頻類型，可以參考常用屬性音頻流文件就緒后是否自動播放無需預加載只需要加載元數據，例如音頻時長，文件大小等。

我覺得DOM就好像是元素周期表里的元素，JS就好像是實驗器材，通過各種化學反應，產生各種魔術。

1 Audio

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

2 基本用法

1 




2 




// controlsList屬性目前只支持 chrome 58+
3 




4

你可以看出他們在Chrome里表現的差異

關于audio標簽支持的音頻類型，可以參考Audio#Supported_audio_coding_formats

3 常用屬性

autoplay: 音頻流文件就緒后是否自動播放

preload: "none" | "metadata" | "auto" | ""

"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倍速度播放。

7 常見問題及解決方法

錄音無法拖動，播放一端就自動停止： https://wenjs.me/p/about-mp3p...

如何隱藏Audio的下載按鈕：https://segmentfault.com/a/11...

想找一個簡單的錄音播放插件： https://github.com/kolber/aud...

8 題外話：在什么地方查權威資料? 8.1 W3C

地址： https://www.w3.org/
國內也有叫：w3school，但是資料實在匱乏，只適合初學者。最好還是可以在w3.org上查資料

8.2 MDN

地址： https://developer.mozilla.org...

8.3 wikipedia

地址：https://en.wikipedia.org/wiki...

9 參考資料

W3C: the-audio-element

wikipedia: HTML5 Audio

W3C: HTML/Elements/audio

Native Audio in the browser

HTMLMediaElement.playbackRate

使用 HTML5 音頻和視頻

GPU云服務器云服務器第一層更上一層樓在哪一層負載均衡數據倉庫一般在那一層

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83425.html

JSON：如果你愿意一層一層剝開我的心，你會發現...這里水很深——深入理解JSON

摘要：說句玩笑話，如果是基于的，可能就叫了，形式可能就是這樣的了，如果這樣，那么可能現在是和比較密切了。此外，還有一個函數，我們較少看到，但是它會影響。我們先來看一個JS中常見的JS對象序列化成JSON字符串的問題，請問，以下JS對象通過JSON.stringify后的字符串是怎樣的？先不要急著復制粘貼到控制臺，先自己打開一個代碼編輯器或者紙，寫寫看，寫完再去仔細對比你的控制臺輸出，如果有...

Baaaan 2019-08-21 15:29 評論0 收藏0
Vue+ElementUI: 手把手教你做一個audio組件

摘要：不顯示下載不顯示靜音不顯示音量條不顯示進度條只能播放一個不要快進按鈕例如父組件這樣回雪月花青春一點點語法大多數時候，我們希望頁面上播放一個音頻時，其他音頻可以暫停。可以把一個類數組轉化成數組，這個是我常用的。 showImg(https://segmentfault.com/img/remote/1460000016177005?w=619&h=343); 目的本項目的目的是教你如...

U2FsdGVkX1x 2019-08-22 11:19 評論0 收藏0
JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
原理解釋 - 收藏集 - 掘金

摘要：巧前端基礎進階全方位解讀前端掘金我們在學習的過程中，由于對一些概念理解得不是很清楚，但是又想要通過一些方式把它記下來，于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結論。計算機程序的思維邏輯 (83) - 并發總結 - 掘金從65節到82節，我們用了18篇文章討論并發，本節進行簡要總結。多線程開發有兩個核心問題，一個是競爭，另一個是協作。競爭會出現線程安全問題，所以，本...

AlphaGooo 2019-08-21 11:41 評論0 收藏0