{{HTMLRef}}
HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者{{HTMLElement("source")}} 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 {{domxref("MediaStream")}} 将这个元素用于流式媒体。
<audio>
src
{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}
上述例子展示了 <audio> 元素的基本用法。与 {{htmlelement("img")}} 元素类似，我们在 src 属性中添加了嵌入媒体的路径；也可以使用其他属性来规定一些功能，例如是否自动播放、是否循环播放、是否显示浏览器的默认音频空间等等。
在浏览器不支持该元素时，会显示 <audio></audio> 标签之间的内容作为回退。
<audio></audio>
该元素包含 全局属性。
注意：自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的自动播放指南。
anonymous
Origin:
Access-Control-Allow-Origin:
use-credentials
Access-Control-Allow-Credentials:
读取 currentTime 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，currentTime 相对应的，能够被用于改变重播的时间。否则，设置 currentTime 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。
currentTime
如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），{{Glossary("user agent")}} 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 方法能够用于确定媒体时间轴的开始位置。
在 Safari 中，你能使用 x-webkit-airplay="deny" 作为兜底方案。
x-webkit-airplay="deny"
NaN
+Infinity
false
none
metadata
auto
不同浏览器会有自己的默认值，规范建议的默认值为 metadata.
使用说明：
autoplay
preload
浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）
浏览器预测已经可以在不暂停的前提下将媒体播放到结束。
duration
媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 load() 方法，这个事件就将被触发。
load()
播放到媒体的结束位置，播放停止。
媒体的第一帧加载完成。
元数据加载完成。
因为缺少数据而暂停或延迟的状态结束，播放准备开始。
一次获取 操作结束。
用户代理试图获取媒体数据，但数据意外地没有进入。
媒体加载挂起。
由 currentTime 指定的时间更新。
浏览器对 文件类型 和 音频编码 的支持各有不同，你可以使用内嵌的 {{htmlelement("source")}} 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：
<audio controls> <source src="myAudio.mp3" type="audio/mpeg"> <source src="myAudio.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p> </audio>
我们提供了全面细致的 音频文件类型指南 和 这些类型可以使用的音频编码。此外，还有 视频编码支持指南。
其他使用说明：
controls
HTMLMediaElement
<video>
视频和音频内容 新手教程是一篇关于使用 HTML <audio> 的好文章。
<audio> 元素没有自带的固有视觉样式，除非如果声明了 controls 属性，则会显示浏览器的默认控件。
默认控件的 {{cssxref("display")}} 的默认值为 inline。将该值设为 block 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。
inline
block
你可以使用作用于整个控件的属性来为其设置样式。例如可用 {{cssxref("border")}}、{{cssxref("border-radius")}}、{{cssxref("padding")}}, {{cssxref("margin")}} 等等。但你不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）。控件在不同的浏览器中也有所不同。
如果在跨浏览器中得到一致的外观和体验，你需要创建自定义控件；自定义控件可以根据你的需求任意设置样式，还可以使用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 来设置更多功能。
视频播放器样式基础 提供了一些有用的样式技术，这篇文章围绕 <video> 而写，但大部分都可以用于 <audio>。
你能够通过 {{event("addtrack")}} and {{event("removetrack")}} 事件来检测何时音轨从 <audio> 元素中添加和移除了。然而，这些事件并不是直接传递给 <audio> 元素自己的。相反，它们是发送给 <audio> 元素的{{domxref("HTMLMediaElement")}} 中的音轨列表对象的。这些对象与添加进元素的音轨类型一一对应。
addtrack
注意:尽管是 <audio> 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。
举个例子，为了侦测何时音轨从一个 <audio> 元素中添加或者移除，你可以使用如下代码：
var elem = document.querySelector("audio"); elem.audioTrackList.onaddtrack = function(event) { trackEditor.addTrack(event.track); }; elem.audioTrackList.onremovetrack = function(event) { trackEditor.removeTrack(event.track); };
这份代码监听音轨从目标元素中添加删除的事件，并且调用了一个轨道编辑器上的虚拟函数，来从编辑器上的可用音轨列表中注册和移除音轨。
你也可以使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 来监听 {{event("addtrack")}} 和 {{event("removetrack")}} 事件。
下面的例子展示了使用 <audio> 元素来播放 OGG 文件的简单用法。它将根据 autoplay 属性的设置来自动播放——如果页面允许你这么做的话。它同时还包含一个兜底内容，以防止浏览器不支持 <audio> 元素。
<!-- Simple audio playback --> <audio src="AudioTest.ogg" autoplay> Your browser does not support the <code>audio</code> element. </audio>
如果想获得更多信息，包括何时自动播放生效，如何获取自动播放权限，并且通过何种方式，在何时应用自动播放才是合适的，请看我们的 autoplay guide。
这个例子指出了在嵌套的 <source> 元素的 src 属性上设置嵌入音轨，而非直接在 <audio> 元素上设置。通过这种方法可以同时在 type 属性上包含文件的 MIME 类型，这通常很有用，因为浏览器就能立即决策：自己究竟是能够播放该文件，还是不在不能播放的文件上浪费时间。
<source>
type
<audio controls> <source src="foo.wav" type="audio/wav"> Your browser does not support the <code>audio</code> element. </audio>
这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 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>
语音形式的音频必须同时提供标题，以及确切描述其内容的文本。标题（Captions）是由 WebVTT 标准定义的，允许听力障碍的人群能够通过播放（文字）记录来理解音频内容。转录文字允许那些需要额外时间的人们，以适合他们的速度和格式回顾记录的内容。
如果使用自动标题服务，人工检查生成内容是很重要的，这确保了标题能够准确的描述源音频。
如何你的用户代理上的 <audio> 元素不直接支持 WebVTT。你必须寻找一个框架来为你提供这种能力，或者自己写代码来展示标题。一个选择是使用 {{HTMLElement("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> Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to download the audio</a> instead. </p> </audio>
如果元素拥有一个 {{htmlattrxref("src", "audio")}} 属性：合法内容为 0 个或更多 {{HTMLElement("track")}} 元素，跟随着不包含 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 媒体元素的透明内容 否则: 合法内容为零个或多个 {{HTMLElement("source")}} 元素，跟随着 0 个或多个{{HTMLElement("track")}} 元素，跟随着不包含 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 媒体元素的透明内容
标签简写
{{Compat("html.elements.audio")}}