HTML DOM 音频对象

htmlweb developmentfront end technology更新于 2024/6/11 12:28:17

HTML DOM 音频对象代表 HTML <audio> 元素。 HTML 5 中新增了 audio 元素。使用 audio 对象，我们可以操作 audio 元素，获取 audioTrack 的信息，切换到自动播放等。

属性

以下是 HTML DOM Audio 对象的属性 −

属性	描述
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	设置或返回音频的预加载属性。
readyState	返回音频的当前就绪状态。
seekable	返回一个 TimeRanges 对象，该对象表示音频中可定位的部分
seeking	返回用户当前是否在音频中定位
src	设置或返回音频的 src 属性值
textTracks	返回一个 TextTrackList 对象，该对象表示所有可用的文本轨道
volume	设置或返回音频的音量。

方法

以下是 Audio 对象的方法 −

方法	描述
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>

然后我们创建了两个按钮 “Duration” 和 CREATE，分别用于执行 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”)设置为 “sample1.mp3”，并通过设置 “controls” 属性启用其控件。然后使用 appendChild() 方法将该元素附加到主体。

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