AudioTrack 是 HTMLMediaElement 的 JavaScript 接口,用于编程访问和切换多音轨媒体中的音频流;提供 id、kind、label、language、enabled 等只读属性,需通过 audio.audioTracks 获取并操作。

HTML5 中并没有名为 AudioTrack 的独立标签。AudioTrack 是一个 JavaScript 接口(interface),属于 HTMLMediaElement 的音轨管理 API,用于表示和控制媒体元素(如 <audio> 或 <video>)中的一条音频轨道,不能直接在 HTML 中以标签形式书写。
AudioTrack 接口的核心作用
它让开发者能以编程方式访问和切换多音轨媒体资源中的不同音频流,例如:不同语言的配音、解说音轨、导演评论音轨等。该功能依赖于媒体文件本身包含多个可识别的音频轨道(常见于 WebM、MP4 容器中嵌入的多音轨内容)。
AudioTrack 对象的关键属性
每个 AudioTrack 实例提供以下只读属性:
- id:字符串标识符,由浏览器分配,用于内部引用
-
kind:音轨类型,如
"main"、"alternative"、"descriptions"、"commentary"等 -
label:用户可读的名称,如
"English (Dolby 5.1)"或"Director's Commentary" -
language:BCP 47 语言标签,如
"en"、"es"、"ja" - enabled:布尔值,表示当前是否启用该音轨(仅一个音轨可为 true)
如何通过 JS 操作 AudioTrack
需先获取 media 元素,再访问其 audioTracks 属性(返回 AudioTrackList 对象):
立即学习“前端免费学习笔记(深入)”;
const audio = document.querySelector('audio');
const tracks = audio.audioTracks;
// 遍历所有音轨
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
console.log(track.label, track.language, track.enabled);
}
// 启用第 2 条音轨(索引为 1)
if (tracks[1]) {
tracks[1].enabled = true;
}
注意事项与兼容性
AudioTrack API 在现代浏览器中支持良好(Chrome 45+、Firefox 42+、Edge 12+、Safari 16.4+),但实际可用性取决于:
- 媒体文件是否真正封装了多个音频轨道(非简单转码合并)
- 浏览器是否支持对应容器格式和编解码器(如 VP9/AV1 + Opus 多音轨 WebM)
- <audio> 元素必须已加载元数据(监听
loadedmetadata事件后再访问 audioTracks)



















