成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wangjuntytl / 2406人閱讀

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

我覺得DOM就好像是元素周期表里的元素，JS就好像是實(shí)驗(yàn)器材，通過各種化學(xué)反應(yīng)，產(chǎn)生各種魔術(shù)。

1 Audio

通過打開谷歌瀏覽器的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

你可以看出他們在Chrome里表現(xiàn)的差異

關(guān)于audio標(biāo)簽支持的音頻類型，可以參考Audio#Supported_audio_coding_formats

3 常用屬性

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

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

"none": 無需預(yù)加載

"metadata": 只需要加載元數(shù)據(jù)，例如音頻時長，文件大小等。

"auto": 自動優(yōu)化下載整個流文件

controls： "controls" | "" 是否需要顯示控件

loop： "loop" or "" 是否循環(huán)播放

mediagroup： string 多個視頻或者音頻流是否合并

src： 音頻地址

4 API(重點(diǎn))

load(): 加載資源

play(): 播放

pause(): 暫停

canPlayType()： 詢問瀏覽器以確定是否可以播放給定的MIME類型

buffered()：指定文件的緩沖部分的開始和結(jié)束時間

5 常用事件：Media Events(重點(diǎn))
事件名 何時觸發(fā)
loadstart 開始加載
progress 正在加載
suspend 用戶代理有意無法獲取媒體數(shù)據(jù)，無法獲取整個文件
abort 主動終端下載資源并不是由于發(fā)生錯誤
error 獲取資源時發(fā)生錯誤
play 開始播放
pause 播放暫停
loadedmetadata 剛獲取完元數(shù)據(jù)
loadeddata 第一次渲染元數(shù)據(jù)
waiting 等待中
playing 正在播放
canplay 用戶代理可以恢復(fù)播放媒體數(shù)據(jù)，但是估計(jì)如果現(xiàn)在開始播放，則媒體資源不能以當(dāng)前播放速率直到其結(jié)束呈現(xiàn)，而不必停止進(jìn)一步緩沖內(nèi)容。
canplaythrough 用戶代理估計(jì)，如果現(xiàn)在開始播放，則媒體資源可以以當(dāng)前播放速率一直呈現(xiàn)到其結(jié)束，而不必停止進(jìn)一步的緩沖。
timeupdate 當(dāng)前播放位置作為正常播放的一部分而改變，或者以特別有趣的方式，例如不連續(xù)地改變。
ended 播放結(jié)束
ratechange 媒體播放速度改變
durationchange 媒體時長改變
volumechange 媒體聲音大小改變
6 Audio DOM 屬性(重點(diǎn)) 6.1 只讀屬性

duration： 媒體時長，數(shù)值， 單位s

ended: 是否完成播放，布爾值

paused: 是否播放暫停，布爾值

6.2 其他可讀寫屬性(重點(diǎn))

playbackRate： 播放速度，大多數(shù)瀏覽器支持0.5-4， 1表示正常速度，設(shè)置該屬性可以修改播放速度

volume：0.0-1.0之間，設(shè)置該屬性可以修改聲音大小

muted: 是否靜音， 設(shè)置該屬性可以靜音

currentTime：指定播放位置的秒數(shù)

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

以下方法可以使音頻以2倍速度播放。
7 常見問題及解決方法

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

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

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

8 題外話：在什么地方查權(quán)威資料? 8.1 W3C

地址： https://www.w3.org/
國內(nèi)也有叫：w3school，但是資料實(shí)在匱乏，只適合初學(xué)者。最好還是可以在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 音頻和視頻

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83425.html

相關(guān)文章

  • JSON：如果你愿意一層一層剝開我的心，你會發(fā)現(xiàn)...這里水很深——深入理解JSON

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

    Baaaan 評論0 收藏0

  • Vue+ElementUI: 手把手教你做一個audio組件

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

    U2FsdGVkX1x 評論0 收藏0

  • JS或Jquery

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

    CatalpaFlat 評論0 收藏0

  • 原理解釋 - 收藏集 - 掘金

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

    AlphaGooo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<