資訊專(zhuān)欄INFORMATION COLUMN
摘要：基本用法屬性目前只支持你可以看出他們?cè)诶锉憩F(xiàn)的差異關(guān)于標(biāo)簽支持的音頻類(lèi)型，可以參考常用屬性音頻流文件就緒后是否自動(dòng)播放無(wú)需預(yù)加載只需要加載元數(shù)據(jù)，例如音頻時(shí)長(zhǎng)，文件大小等。
我覺(jué)得DOM就好像是元素周期表里的元素，JS就好像是實(shí)驗(yàn)器材，通過(guò)各種化學(xué)反應(yīng)，產(chǎn)生各種魔術(shù)。1 Audio
通過(guò)打開(kāi)谷歌瀏覽器的dev tools -> Settings -> Elements -> Show user agent shadow DOM, 你可以看到其實(shí)Audio標(biāo)簽也是由常用的 input標(biāo)簽和div等標(biāo)簽合成的。
2 基本用法1
2
// controlsList屬性目前只支持 chrome 58+ 3
4
你可以看出他們?cè)贑hrome里表現(xiàn)的差異
關(guān)于audio標(biāo)簽支持的音頻類(lèi)型，可以參考Audio#Supported_audio_coding_formats
3 常用屬性autoplay: 音頻流文件就緒后是否自動(dòng)播放
preload: "none" | "metadata" | "auto" | ""
"none": 無(wú)需預(yù)加載
"metadata": 只需要加載元數(shù)據(jù)，例如音頻時(shí)長(zhǎng)，文件大小等。
"auto": 自動(dòng)優(yōu)化下載整個(gè)流文件
controls： "controls" | "" 是否需要顯示控件
loop： "loop" or "" 是否循環(huán)播放
mediagroup： string 多個(gè)視頻或者音頻流是否合并
src： 音頻地址
4 API(重點(diǎn))load(): 加載資源
play(): 播放
pause(): 暫停
canPlayType()： 詢(xún)問(wèn)瀏覽器以確定是否可以播放給定的MIME類(lèi)型
buffered()：指定文件的緩沖部分的開(kāi)始和結(jié)束時(shí)間
5 常用事件：Media Events(重點(diǎn))| 事件名 | 何時(shí)觸發(fā) |
|---|---|
| loadstart | 開(kāi)始加載 |
| progress | 正在加載 |
| suspend | 用戶(hù)代理有意無(wú)法獲取媒體數(shù)據(jù)，無(wú)法獲取整個(gè)文件 |
| abort | 主動(dòng)終端下載資源并不是由于發(fā)生錯(cuò)誤 |
| error | 獲取資源時(shí)發(fā)生錯(cuò)誤 |
| play | 開(kāi)始播放 |
| pause | 播放暫停 |
| loadedmetadata | 剛獲取完元數(shù)據(jù) |
| loadeddata | 第一次渲染元數(shù)據(jù) |
| waiting | 等待中 |
| playing | 正在播放 |
| canplay | 用戶(hù)代理可以恢復(fù)播放媒體數(shù)據(jù)，但是估計(jì)如果現(xiàn)在開(kāi)始播放，則媒體資源不能以當(dāng)前播放速率直到其結(jié)束呈現(xiàn)，而不必停止進(jìn)一步緩沖內(nèi)容。 |
| canplaythrough | 用戶(hù)代理估計(jì)，如果現(xiàn)在開(kāi)始播放，則媒體資源可以以當(dāng)前播放速率一直呈現(xiàn)到其結(jié)束，而不必停止進(jìn)一步的緩沖。 |
| timeupdate | 當(dāng)前播放位置作為正常播放的一部分而改變，或者以特別有趣的方式，例如不連續(xù)地改變。 |
| ended | 播放結(jié)束 |
| ratechange | 媒體播放速度改變 |
| durationchange | 媒體時(shí)長(zhǎng)改變 |
| volumechange | 媒體聲音大小改變 |
duration： 媒體時(shí)長(zhǎng)，數(shù)值， 單位s
ended: 是否完成播放，布爾值
paused: 是否播放暫停，布爾值
6.2 其他可讀寫(xiě)屬性(重點(diǎn))playbackRate： 播放速度，大多數(shù)瀏覽器支持0.5-4， 1表示正常速度，設(shè)置該屬性可以修改播放速度
volume：0.0-1.0之間，設(shè)置該屬性可以修改聲音大小
muted: 是否靜音， 設(shè)置該屬性可以靜音
currentTime：指定播放位置的秒數(shù)
// 你可以使用元素的屬性seekable來(lái)決定媒體目前能查找的范圍。它返回一個(gè)你可以查找的TimeRanges 時(shí)間對(duì)象。
var mediaElement = document.getElementById("mediaElementID");
mediaElement.seekable.start(); // 返回開(kāi)始時(shí)間 (in seconds)
mediaElement.seekable.end(); // 返回結(jié)束時(shí)間 (in seconds)
mediaElement.currentTime = 122; // 設(shè)定在 122 seconds
mediaElement.played.end(); // 返回瀏覽器播放的秒數(shù)
以下方法可以使音頻以2倍速度播放。
7 常見(jiàn)問(wèn)題及解決方法
錄音無(wú)法拖動(dòng)，播放一端就自動(dòng)停止： https://wenjs.me/p/about-mp3p...
如何隱藏Audio的下載按鈕：https://segmentfault.com/a/11...
想找一個(gè)簡(jiǎn)單的錄音播放插件： https://github.com/kolber/aud...
8 題外話(huà)：在什么地方查權(quán)威資料? 8.1 W3C地址： https://www.w3.org/
國(guó)內(nèi)也有叫：w3school，但是資料實(shí)在匱乏，只適合初學(xué)者。最好還是可以在w3.org上查資料
地址： https://developer.mozilla.org...
地址：https://en.wikipedia.org/wiki...
W3C: the-audio-element
wikipedia: HTML5 Audio
W3C: HTML/Elements/audio
Native Audio in the browser
HTMLMediaElement.playbackRate
使用 HTML5 音頻和視頻
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83425.html
摘要：說(shuō)句玩笑話(huà)，如果是基于的，可能就叫了，形式可能就是這樣的了，如果這樣，那么可能現(xiàn)在是和比較密切了。此外，還有一個(gè)函數(shù)，我們較少看到，但是它會(huì)影響。 我們先來(lái)看一個(gè)JS中常見(jiàn)的JS對(duì)象序列化成JSON字符串的問(wèn)題，請(qǐng)問(wèn)，以下JS對(duì)象通過(guò)JSON.stringify后的字符串是怎樣的？先不要急著復(fù)制粘貼到控制臺(tái)，先自己打開(kāi)一個(gè)代碼編輯器或者紙，寫(xiě)寫(xiě)看，寫(xiě)完再去仔細(xì)對(duì)比你的控制臺(tái)輸出，如果有...
摘要：不顯示下載不顯示靜音不顯示音量條不顯示進(jìn)度條只能播放一個(gè)不要快進(jìn)按鈕例如父組件這樣回雪月花青春一點(diǎn)點(diǎn)語(yǔ)法大多數(shù)時(shí)候，我們希望頁(yè)面上播放一個(gè)音頻時(shí)，其他音頻可以暫停?？梢园岩粋€(gè)類(lèi)數(shù)組轉(zhuǎn)化成數(shù)組，這個(gè)是我常用的。 showImg(https://segmentfault.com/img/remote/1460000016177005?w=619&h=343); 目的 本項(xiàng)目的目的是教你如...
摘要：大潮來(lái)襲前端開(kāi)發(fā)能做些什么去年谷歌和火狐針對(duì)提出了的標(biāo)準(zhǔn)，顧名思義，即的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁(yè)，新的標(biāo)準(zhǔn)讓我們可以使用語(yǔ)言來(lái)開(kāi)發(fā)。 VR 大潮來(lái)襲 --- 前端開(kāi)發(fā)能做些什么 去年谷歌和火狐針對(duì) WebVR 提出了 WebVR API 的標(biāo)準(zhǔn)，顧名思義，WebVR 即 web + VR 的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁(yè)，新的 API 標(biāo)準(zhǔn)讓我們可以使用 ...
摘要：巧前端基礎(chǔ)進(jìn)階全方位解讀前端掘金我們?cè)趯W(xué)習(xí)的過(guò)程中，由于對(duì)一些概念理解得不是很清楚，但是又想要通過(guò)一些方式把它記下來(lái)，于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結(jié)論。 計(jì)算機(jī)程序的思維邏輯 (83) - 并發(fā)總結(jié) - 掘金從65節(jié)到82節(jié)，我們用了18篇文章討論并發(fā)，本節(jié)進(jìn)行簡(jiǎn)要總結(jié)。 多線(xiàn)程開(kāi)發(fā)有兩個(gè)核心問(wèn)題，一個(gè)是競(jìng)爭(zhēng)，另一個(gè)是協(xié)作。競(jìng)爭(zhēng)會(huì)出現(xiàn)線(xiàn)程安全問(wèn)題，所以，本...
閱讀 728·2021-11-23 09:51
閱讀 3621·2021-10-11 10:58
閱讀 15974·2021-09-29 09:47
閱讀 3704·2021-09-01 11:42
閱讀 1371·2019-08-29 16:43
閱讀 1892·2019-08-29 15:37
閱讀 2184·2019-08-29 12:56
閱讀 1792·2019-08-28 18:21
