<audio>：嵌入音频元素

以上示例展示了<audio>元素的简单用法。类似于<img>元素，我们在src属性中包含要嵌入的媒体的路径；我们还可以包含其他属性来指定信息，例如是否希望自动播放和循环，是否希望显示浏览器默认的音频控件等。

在不支持该元素的浏览器中，<audio></audio>标签内的内容将作为后备内容显示。

此元素的属性包括全局属性。

autoplay

布尔属性：如果指定，音频将在浏览器能够播放时自动开始播放，而无需等待整个音频文件下载完成。

注意：自动播放音频（或带有音频轨道的视频）的网站可能会给用户带来不愉快的体验，因此应尽量避免。如果必须提供自动播放功能，则应使其成为可选功能（要求用户专门启用它）。但是，这在创建媒体元素时很有用，这些元素的源将在以后由用户控制的情况下设置。有关如何正确使用自动播放的更多信息，请参阅我们的自动播放指南。

controls

如果存在此属性，浏览器将提供控件，允许用户控制音频播放，包括音量、搜索和暂停/恢复播放。

controlslist

当指定controlslist属性时，它有助于浏览器在浏览器显示其自身的一组控件（即，当指定controls属性时）时，选择要为audio元素显示的控件。

允许的值为nodownload、nofullscreen和noremoteplayback。

crossorigin

此枚举属性指示是否使用CORS来获取相关的音频文件。启用CORS的资源可以在<canvas>元素中重复使用，而不会被污染。允许的值为

anonymous

发送不带凭据的跨域请求。换句话说，它发送Origin: HTTP 头，但不发送cookie、X.509证书或执行HTTP基本身份验证。如果服务器未向源站点提供凭据（通过不设置Access-Control-Allow-Origin: HTTP 头），则资源将被污染，并且其使用受到限制。

use-credentials

发送带凭据的跨域请求。换句话说，它发送Origin: HTTP 头，以及cookie、证书或执行HTTP基本身份验证。如果服务器未向源站点提供凭据（通过Access-Control-Allow-Credentials: HTTP 头），则资源将被污染，并且其使用受到限制。

如果不存在，则资源将无需CORS请求获取（即，不发送Origin: HTTP 头），从而防止其在<canvas>元素中被非污染地使用。如果无效，则将其视为使用了枚举关键字anonymous。有关更多信息，请参阅CORS设置属性。

disableremoteplayback

布尔属性，用于禁用使用有线（HDMI、DVI等）和无线技术（Miracast、Chromecast、DLNA、AirPlay等）连接的设备中的远程播放功能。有关更多信息，请参阅此提议的规范。

在Safari中，您可以使用x-webkit-airplay="deny"作为后备方案。

loop

布尔属性：如果指定，音频播放器将在到达音频末尾时自动返回开头。

muted

布尔属性，指示音频是否最初静音。其默认值为false。

preload

此枚举属性旨在向浏览器提供一个提示，说明作者认为哪种方式可以带来最佳的用户体验。它可以具有以下值之一

• none：指示不应预加载音频。
• metadata：指示仅获取音频元数据（例如长度）。
• auto：指示可以下载整个音频文件，即使用户预计不会使用它。
• 空字符串：auto值的同义词。

每个浏览器的默认值都不同。规范建议将其设置为metadata。

注意

• autoplay属性优先于preload。如果指定了autoplay，则浏览器显然需要开始下载音频以进行播放。
• 规范不要求浏览器遵循此属性的值；它只是一个提示。

src

要嵌入的音频的URL。这受HTTP访问控制的约束。这是可选的；您也可以在音频块中使用<source>元素来指定要嵌入的音频。

浏览器并不都支持相同的文件类型和音频编解码器；您可以在嵌套的<source>元素中提供多个源，然后浏览器将使用它理解的第一个源

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3" download="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

我们提供了关于媒体文件类型以及媒体文件类型指南和可在其中使用的音频编解码器的详尽指南。还可以使用视频支持的编解码器指南。

其他用法说明

• 如果不指定controls属性，则音频播放器将不包含浏览器默认的控件。但是，您可以使用JavaScript和HTMLMediaElement API创建自己的自定义控件。
• 为了允许对音频内容进行精确控制，HTMLMediaElement会触发许多不同的事件。这还提供了一种监视音频获取过程的方法，以便您可以监视错误或检测何时有足够的数据可以开始播放或操作它。
• 您还可以使用Web Audio API直接从JavaScript代码生成和操作音频流，而不是流式传输预先存在的音频文件。
• <audio>元素无法像<video>元素那样关联字幕或隐藏式字幕。有关一些有用的信息和解决方法，请参阅Ian Devlin的WebVTT和音频。
• 要在支持该元素的浏览器上测试后备内容，您可以将<audio>替换为不存在的元素，例如<notanaudio>。

有关使用HTML <audio>的良好通用信息来源是视频和音频内容初学者教程。

除非指定了controls属性，否则<audio>元素本身没有内在的可视输出，在这种情况下，将显示浏览器的默认控件。

默认控件的display值默认为inline，并且通常最好将其值设置为block以提高对定位和布局的控制，除非您希望它位于文本块或类似内容中。

您可以使用影响块作为单个单元的属性来设置默认控件的样式，例如，您可以为其提供border和border-radius、padding、margin等。但是，您无法设置音频播放器内部的各个组件的样式（例如，更改按钮大小或图标、更改字体等），并且不同浏览器中的控件也不同。

要获得跨浏览器的统一外观，您需要创建自定义控件；这些控件可以以任何您想要的方式进行标记和设置样式，然后可以使用JavaScript以及HTMLMediaElement API来连接其功能。

视频播放器样式设置基础提供了一些有用的样式设置技巧——它是在<video>的上下文中编写的，但其中许多内容同样适用于<audio>。

您可以使用addtrack和removetrack事件检测何时将轨道添加到<audio>元素中以及何时从其中删除轨道。但是，这些事件不会直接发送到<audio>元素本身。相反，它们被发送到<audio>元素的HTMLMediaElement内的轨道列表对象，该对象对应于添加到元素的轨道类型

HTMLMediaElement.audioTracks

一个AudioTrackList，其中包含媒体元素的所有音频轨道。您可以为此对象添加addtrack监听器，以便在将新的音频轨道添加到元素时收到警报。

HTMLMediaElement.videoTracks

为此VideoTrackList对象添加addtrack监听器，以便在将视频轨道添加到元素时收到通知。

HTMLMediaElement.textTracks

为该 TextTrackList 添加一个 addtrack 事件监听器，以便在元素中添加新的文本轨道时收到通知。

例如，要检测何时将音频轨道添加到 <audio> 元素或从中删除音频轨道，您可以使用如下代码

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

此代码监视添加到元素中的音频轨道以及从元素中删除的音频轨道，并在轨道编辑器上调用一个假设函数，以将轨道注册到编辑器的可用轨道列表中并从中删除。

您还可以使用 addEventListener() 来监听 addtrack 和 removetrack 事件。

包含口语对话的音频应提供字幕和成绩单，以准确描述其内容。字幕（使用 WebVTT 指定）允许听力障碍人士在播放音频录制时理解其内容，而成绩单则允许需要额外时间的人以舒适的速度和格式查看录制的内容。

如果使用自动字幕服务，则务必审查生成的内容，以确保其准确地表示源音频。

<audio> 元素不直接支持 WebVTT。您需要找到一个提供此功能的库或框架，或者自己编写代码来显示字幕。一种选择是使用 <video> 元素播放音频，该元素确实支持 WebVTT。

除了口语对话外，字幕和成绩单还应识别传达重要信息的音乐和音效。这包括情感和语气。例如，在下面的 WebVTT 中，请注意使用方括号为观看者提供语气和情感见解；这可以帮助建立原本使用音乐、非语言声音和关键音效等提供的氛围。

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

此外，最好提供一些内容（例如直接下载链接）作为使用不支持 <audio> 元素的浏览器的观看者的后备方案。

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

• Web 视频文本轨道格式 (WebVTT)
• WebAIM：字幕、成绩单和音频描述
• MDN 理解 WCAG，指南 1.2 说明
• 理解成功标准 1.2.1 | W3C 理解 WCAG 2.0
• 理解成功标准 1.2.2 | W3C 理解 WCAG 2.0

以下示例显示了 <audio> 元素播放 OGG 文件的简单用法。由于 autoplay 属性，它将自动播放（如果页面已获得权限），并且还包含后备内容。

<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>

有关自动播放何时有效、如何获得使用自动播放的权限以及何时以及如何适当地使用自动播放的详细信息，请参阅我们的 自动播放指南。

此示例使用嵌套 <source> 元素上的 src 属性而不是直接在 <audio> 元素上指定要嵌入的音频轨道。在 type 属性中始终包含文件的 MIME 类型很有用，因为浏览器能够立即判断它是否可以播放该文件，如果不能，则不会浪费时间。

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav" download="foo.wav">Download WAV audio</a>.
</audio>

此示例包含多个 <source> 元素。浏览器尝试加载第一个源元素（Opus），如果它能够播放；否则，它将回退到第二个（Vorbis），最后回退到 MP3。

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>

• Web 媒体技术
  • 媒体容器格式（文件类型）
  • Web 上使用的音频编解码器指南
• Web Audio API
• HTMLAudioElement
• <source>
• <video>
• 学习领域：视频和音频内容
• 跨浏览器音频基础知识