数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究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);
}
更新于： 2021年2月20日
419 次浏览
广告