HTML DOM 音訊物件

HTML DOM 音訊物件表示 HTML <audio> 元素。音訊元素是 HTML 5 中新引入的。使用音訊物件，我們可以操作音訊元素以獲取有關 audioTrack 的資訊、更改自動播放等。

屬性

以下是 HTML DOM 音訊物件的屬性：

屬性	描述
audioTracks	返回包含可用音訊軌道的 audioTrackList 物件。
autoplay	返回或設定音訊是否自動開始播放。
buffered	返回一個 TimeRanges 物件，其中包含音訊的所有緩衝部分。
controller	返回表示音訊當前媒體控制器的 MediaController 物件。
controls	設定或返回音訊是否應顯示播放/暫停控制元件。
crossOrigin	設定或返回音訊的 CORS 設定。
currentSrc	返回當前播放音訊的 URL。
currentTime	設定或返回當前播放位置（以秒為單位）。
defaultMuted	設定或返回音訊是否預設靜音。
defaultPlaybackRate	設定或返回音訊的預設播放速度。
duration	返回音訊的長度（以秒為單位）。
ended	返回播放是否已結束。
error	返回一個 MedioError 型別的物件，表示音訊的錯誤狀態。
loop	設定或返回音訊是否在完成播放後重新開始播放。
mediaGroup	設定或返回音訊所屬的媒體組名稱。
muted	設定或返回音訊是否應關閉。
networkState	返回音訊的當前網路狀態。
paused	設定或返回音訊是否已暫停。
playbackRate	設定或返回音訊的播放速度。
played	返回一個 TimeRanges 物件，表示音訊已播放的部分。
preload	設定或返回音訊的 preload 屬性。
readyState	返回音訊的當前就緒狀態。
seekable	返回一個 TimeRanges 物件，表示音訊的可搜尋部分。
seeking	返回使用者當前是否正在音訊中進行搜尋。
src	設定或返回音訊的 src 屬性的值。
textTracks	返回一個 TextTrackList 物件，表示所有可用的文字軌道。
volume	設定或返回音訊的音量。

方法

以下是音訊物件的方法：

方法	描述
addTextTrack()	向給定的音訊新增新的文字軌道。
canPlayType()	檢查瀏覽器是否可以播放指定的音訊型別。
fastSeek()	在音訊播放器中跳轉到指定時間。
getStartDate()	返回一個新的 Date 物件，表示當前時間線偏移量。
load()	重新載入音訊元素。
play()	開始播放音訊。
pause()	暫停當前播放的音訊。

語法

以下是語法：

建立音訊元素

var x= document.createElement("AUDIO")

訪問音訊元素

var x = document.getElementById("demoAudio")

示例

讓我們看看音訊物件的示例：

即時演示

<!DOCTYPE html>
<html>
<body>
<h1>MUSIC</h1>
<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>
<p>Click the button to get the duration of the audio, in seconds.</p>
<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>
<p id="SAMPLE"></p>
<script>
   function AudioDur() {
      var x = document.getElementById("Audio").duration;
      document.getElementById("SAMPLE").innerHTML = x;
   }
   function CreateAudio() {
      var x = document.createElement("AUDIO");
      x.setAttribute("src","sample1.mp3");
      x.setAttribute("controls", "controls");
      document.body.appendChild(x);
   }
</script>
</body>
</html>

輸出

它將產生以下輸出：

點選“時長”時：

點選“建立”時：

在上面的示例中：

我們首先建立了一個音訊元素，並指定了音訊源和型別。

<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>

然後，我們建立了兩個按鈕“時長”和“建立”分別執行函式 AudioDur() 和 CreateAudio()。

<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>

AudioDur() 函式獲取與其關聯的 id 為“Audio”的元素。它獲取 <audio> 元素並使用 duration 屬性獲取其時長。時長顯示在與其關聯的 id 為“Sample”的段落中。

function AudioDur() {
   var x = document.getElementById("Audio").duration;
   document.getElementById("SAMPLE").innerHTML = x;
}

CreateAudio() 函式建立一個音訊元素並設定其屬性，例如將 src 設定為“sample1.mp3”，並透過設定“controls”屬性啟用其控制元件。然後，使用 appendChild() 方法將元素附加到 body。

function CreateAudio() {
   var x = document.createElement("AUDIO");
   x.setAttribute("src","sample1.mp3");
   x.setAttribute("controls", "controls");
   document.body.appendChild(x);
}

AmitDiwan

更新於： 2021年2月20日

419 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始學習

HTML DOM 音訊物件

屬性

方法

語法

示例

輸出

開啟您的 職業生涯

開啟您的職業生涯