音頻 audio
用法
1.單標(biāo)簽型
<audio id="audio" src="./音樂(lè).mp3"></audio>
2.多類(lèi)型資源
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
3.腳本化
var audio = document.getElementById('audio');
var audio = new Audio('./laojie.mp3');
var audio = document.createElement('video');
兼容性
這里寫(xiě)圖片描述
IE8一下不兼容
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。 |
| controls | controls | 如果出現(xiàn)該屬性，則向用戶顯示音頻控件（比如播放/暫停按鈕）。 |
| loop | loop | 如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放。 |
| muted | muted | 如果出現(xiàn)該屬性，則音頻輸出為靜音。 |
| preload | auto metadata none |
規(guī)定當(dāng)網(wǎng)頁(yè)加載時(shí)，音頻是否默認(rèn)被加載以及如何被加載。 |
| src | URL | 規(guī)定音頻文件的 URL。 |
- preload屬性介紹
- auto瀏覽器應(yīng)當(dāng)加載它認(rèn)為適當(dāng)?shù)膬?nèi)容簡(jiǎn)單來(lái)說(shuō)就是, 瀏覽器根據(jù)網(wǎng)絡(luò)情況自動(dòng)加載
- metadata元數(shù)據(jù), 類(lèi)似時(shí)長(zhǎng),比特率等信息, 而不是媒體文件
- none不需要加載
HTML DOM Audio 對(duì)象
controls/loop/preload/autoplay屬性
- audio.loop = 'loop';
- audio.controls = true;
- audio.preload = 'auto';
- audio.autoplay = true;
Audio 對(duì)象方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音頻添加新的文本軌道。 |
| canPlayType() | 檢查瀏覽器是否能夠播放指定的音頻類(lèi)型。 |
| fastSeek() | 在音頻播放器中指定播放時(shí)間。 |
| getStartDate() | 返回新的 Date 對(duì)象，表示當(dāng)前時(shí)間線偏移量。 |
| load() | 重新加載音頻元素。 |
| play() | 開(kāi)始播放音頻。 |
| pause() | 暫停當(dāng)前播放的音頻。 |
對(duì)象事件
- play 開(kāi)始播放觸發(fā)
- pause 暫停觸發(fā)
- loadedmetadata 瀏覽器獲取完媒體的元數(shù)據(jù)觸發(fā)
- loaddeddata 瀏覽器已經(jīng)加載完當(dāng)前幀數(shù)據(jù)，準(zhǔn)備播放時(shí)觸發(fā)
- ended 當(dāng)前播放結(jié)束后觸發(fā)
視頻video
poster (video 獨(dú)有)
當(dāng)視頻不可用時(shí)，使用一張圖片替代，否則是空白
<video src="成都.mp4" poster="封面.jpg" controls></video>
其他屬性幾乎同audio
