From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/html/element/audio/index.html | 437 ++++++++++++++++++++++++++
 1 file changed, 437 insertions(+)
 create mode 100644 files/zh-cn/web/html/element/audio/index.html

(limited to 'files/zh-cn/web/html/element/audio')

diff --git a/files/zh-cn/web/html/element/audio/index.html b/files/zh-cn/web/html/element/audio/index.html
new file mode 100644
index 0000000000..dcae80d55a
--- /dev/null
+++ b/files/zh-cn/web/html/element/audio/index.html
@@ -0,0 +1,437 @@
+---
+title: <audio>
+slug: Web/HTML/Element/audio
+tags:
+  - Audio
+  - Element
+  - HTML
+  - HTML5
+  - Media
+translation_of: Web/HTML/Element/audio
+---
+<p id="简介">{{HTMLRef}}</p>
+
+<p><strong>HTML <code>&lt;audio&gt;</code> </strong>元素用于在文档中嵌入音频内容。 <code>&lt;audio&gt;</code> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 <code>src</code> 属性或者{{HTMLElement("source")}} 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 {{domxref("MediaStream")}} 将这个元素用于流式媒体。</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</p>
+
+<p>上述例子展示了 <code>&lt;audio&gt;</code> 元素的基本用法。与 {{htmlelement("img")}} 元素类似，我们在 <code>src</code> 属性中添加了嵌入媒体的路径；也可以使用其他属性来规定一些功能，例如是否自动播放、是否循环播放、是否显示浏览器的默认音频空间等等。</p>
+
+<p>在浏览器不支持该元素时，会显示 <code>&lt;audio&gt;&lt;/audio&gt;</code> 标签之间的内容作为回退。</p>
+
+<h2 id="属性"><span>属性</span></h2>
+
+<p>该元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
+ <div class="blockIndicator note">
+ <p><strong>注意：</strong>自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">自动播放指南</a>。</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>枚举属性  展示音频资源是否可以通过CORS加载。<a href="https://wiki.developer.mozilla.org/en-US/docs/CORS_Enabled_Image">支持CORS的资源 </a> 可以被 {{HTMLElement("canvas")}} 元素复用而不污染. 可选值如下：
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>在发送跨域请求时不携带验证信息。换句话说，浏览器在发送<code>Origin:</code> HTTP 请求首部时将不携带 cookie、 X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给与源站信任（也就是说没有设置 <code>Access-Control-Allow-Origin:</code> 响应首部），那么图片就被认为是污染的，它就会被限制使用。</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>在发送跨域请求时不携带验证信息。换句话说，在发送<code>Origin:</code> HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给与源站信任（通过设置<code>Access-Control-Allow-Credentials:</code> 响应首部）那么图片就被认为是污染的，它就会被限制使用。</dd>
+ </dl>
+ 在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 <code>Origin: </code>请求首部），以保护 {{HTMLElement('canvas')}}  元素中未污染的内容。如果验证失败，它会表现的好像 <strong>anonymous </strong>选项是选中的。查看 <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> 来获取更多信息。</dd>
+ <dt>{{htmlattrdef("currentTime")}}</dt>
+ <dd>
+ <p>读取 <code>currentTime</code> 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，<code>currentTime</code> 相对应的，能够被用于改变重播的时间。否则，设置 <code>currentTime</code> 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。</p>
+
+ <p>如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），{{Glossary("user agent")}} 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 <code>currentTime</code> 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 <code>currentTime</code> 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 方法能够用于确定媒体时间轴的开始位置。</p>
+ </dd>
+ <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt>
+ <dd>这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考  <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> 来获取更多信息。
+ <div class="blockIndicator note">
+ <p>在 Safari 中，你能使用 <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> 作为兜底方案。</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt>
+ <dd>这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 <code>NaN</code>。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 连接的流），那么这个值将返回 <code>+Infinity</code>。</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>布尔属性；如果声明该属性，将循环播放音频。</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>表示是否静音的布尔值。默认值为 <code>false</code>，表示有声音。</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：
+ <ul>
+  <li><code>none</code>: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；</li>
+  <li><code>metadata</code>: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。</li>
+  <li><code>auto</code>: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。</li>
+  <li><em>空字符串</em> : 等效于<code>auto</code>属性。</li>
+ </ul>
+
+ <p>不同浏览器会有自己的默认值，规范建议的默认值为 <code>metadata</code>.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>使用说明：</strong></p>
+
+ <ul>
+  <li><code>autoplay</code> 属性的优先级高于 <code>preload</code>。如果 <code>autoplay</code> 被指定，浏览器将显式地开始下载媒体以供播放。</li>
+  <li>浏览器并不被强制遵循该属性的规范，该属性只是一个建议与提示。</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>嵌入的音频的URL。 该URL应遵从 <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. 这是一个可选属性；你可以在audio元素中使用 {{htmlelement("source")}} 元素来替代该属性指定嵌入的音频。</dd>
+</dl>
+
+<h2 id="事件">事件</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">事件名称</th>
+   <th scope="col">触发时机</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>一个 {{DOMxRef("ScriptProcessorNode")}} 的输入缓冲区已经准备开始处理。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
+   <td>
+    <p>浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
+   <td>
+    <p>浏览器预测已经可以在不暂停的前提下将媒体播放到结束。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>一个 {{DOMxRef("OfflineAudioContext")}} 的渲染已经中止。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
+   <td> <code>duration</code> 属性发生了变化。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
+   <td>
+    <p>媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal">load()</a> </code>方法，这个事件就将被触发。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
+   <td>
+    <p>播放到媒体的结束位置，播放停止。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
+   <td>
+    <p>媒体的第一帧加载完成。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
+   <td>
+    <p>元数据加载完成。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
+   <td>播放暂停。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
+   <td>播放开始。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
+   <td>
+    <p>因为缺少数据而暂停或延迟的状态结束，播放准备开始。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
+   <td>播放速度变化。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
+   <td>
+    <p>一次<em>获取</em> 操作结束。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
+   <td>一次<em>获取</em> 操作开始。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
+   <td>
+    <p>用户代理试图获取媒体数据，但数据意外地没有进入。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
+   <td>
+    <p>媒体加载挂起。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
+   <td>
+    <p>由 <code>currentTime</code> 指定的时间更新。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
+   <td>音量变化。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
+   <td>因为暂时性缺少数据，播放暂停。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="使用说明">使用说明</h2>
+
+<p>浏览器对 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">文件类型</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">音频编码</a> 的支持各有不同，你可以使用内嵌的 {{htmlelement("source")}} 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：</p>
+
+<pre class="notranslate">&lt;audio controls&gt;
+  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
+  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is
+     a &lt;a href="myAudio.mp4"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>我们提供了全面细致的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">音频文件类型指南</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">这些类型可以使用的音频编码</a>。此外，还有 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">视频编码支持指南</a>。</p>
+
+<p>其他使用说明：</p>
+
+<ul>
+ <li>如果你没有声明 <code>controls</code> 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 创建自己的自定义控件。</li>
+ <li>为了更精确地控制你的音频内容，<code>HTMLMediaElement</code> 会触发多种不同的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events">事件</a>。这也提供了一个查看音频获取过程的方式，你可以查看错误或检测什么时候可以开始播放或操作。</li>
+ <li>你还可以使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> 以从 JavaScript 代码直接生成和操纵音频流，而非流式播放已存在的音频文件。</li>
+ <li><code>&lt;audio&gt;</code> 元素不能像 <code>&lt;video&gt;</code> 元素一样附加副标题（subtitle）或说明标题（caption）。更多有用的信息和解决方法参见 Ian Devlin 的 <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a>。</li>
+</ul>
+
+<p><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a> 新手教程是一篇关于使用 HTML <code>&lt;audio&gt;</code> 的好文章。</p>
+
+<h3 id="使用_CSS_设置样式">使用 CSS 设置样式</h3>
+
+<p><code>&lt;audio&gt;</code> 元素没有自带的固有视觉样式，除非如果声明了 <code>controls</code> 属性，则会显示浏览器的默认控件。</p>
+
+<p>默认控件的 {{cssxref("display")}} 的默认值为 <code>inline</code>。将该值设为 <code>block</code> 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。</p>
+
+<p>你可以使用作用于整个控件的属性来为其设置样式。例如可用 {{cssxref("border")}}、{{cssxref("border-radius")}}、{{cssxref("padding")}}, {{cssxref("margin")}} 等等。但你不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）。控件在不同的浏览器中也有所不同。</p>
+
+<p>如果在跨浏览器中得到一致的外观和体验，你需要创建自定义控件；自定义控件可以根据你的需求任意设置样式，还可以使用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 来设置更多功能。</p>
+
+<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">视频播放器样式基础</a> 提供了一些有用的样式技术，这篇文章围绕 <code>&lt;video&gt;</code> 而写，但大部分都可以用于 <code>&lt;audio&gt;</code>。</p>
+
+<h3 id="检测音轨添加和移除">检测音轨添加和移除</h3>
+
+<p>你能够通过 {{event("addtrack")}} and {{event("removetrack")}} 事件来检测何时音轨从 <code>&lt;audio&gt;</code> 元素中添加和移除了。然而，这些事件并不是直接传递给 <code>&lt;audio&gt;</code> 元素自己的。相反，它们是发送给 <code>&lt;audio&gt;</code> 元素的{{domxref("HTMLMediaElement")}} 中的音轨列表对象的。这些对象与添加进元素的音轨类型一一对应。</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>一个 {{domxref("AudioTrackList")}} 包含所有的媒体对象的音轨。你能在为 <code>addtrack</code> 事件添加监听，以在新音轨添加进元素时获得通知。</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
+ <dd>在该 {{domxref("VideoTrackList")}} 对象上添加监听，以在视频轨道被添加进元素时获得通知。</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
+ <dd>在该 {{domxref("TextTrackList")}} 对象上添加监听，以在文字轨道被添加进元素时获得通知。（也许用于字幕，译者猜测）</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>注意:尽管是 </strong><code>&lt;audio&gt;</code> 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。 </p>
+</div>
+
+<p>举个例子，为了侦测何时音轨从一个 <code>&lt;audio&gt;</code> 元素中添加或者移除，你可以使用如下代码：</p>
+
+<pre class="notranslate">var elem = document.querySelector("audio");
+
+elem.audioTrackList.onaddtrack = function(event) {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTrackList.onremovetrack = function(event) {
+  trackEditor.removeTrack(event.track);
+};
+</pre>
+
+<p>这份代码监听音轨从目标元素中添加删除的事件，并且调用了一个轨道编辑器上的虚拟函数，来从编辑器上的可用音轨列表中注册和移除音轨。</p>
+
+<p>你也可以使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 来监听 {{event("addtrack")}} 和 {{event("removetrack")}} 事件。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="基本用法">基本用法</h3>
+
+<p>下面的例子展示了使用 <code>&lt;audio&gt;</code> 元素来播放 OGG 文件的简单用法。它将根据 <code>autoplay</code> 属性的设置来自动播放——如果页面允许你这么做的话。它同时还包含一个兜底内容，以防止浏览器不支持 <code>&lt;audio&gt;</code> 元素。</p>
+
+<pre class="notranslate">&lt;!-- Simple audio playback --&gt;
+&lt;audio
+  src="AudioTest.ogg"
+  autoplay&gt;
+  Your browser does not support the &lt;code&gt;audio&lt;/code&gt; element.
+&lt;/audio&gt;
+</pre>
+
+<p>如果想获得更多信息，包括何时自动播放生效，如何获取自动播放权限，并且通过何种方式，在何时应用自动播放才是合适的，请看我们的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>。</p>
+
+<h3 id="&lt;audio>_元素与_&lt;source>_元素">&lt;audio&gt; 元素与 &lt;source&gt; 元素</h3>
+
+<p>这个例子指出了在嵌套的 <code>&lt;source&gt;</code> 元素的 <code>src</code> 属性上设置嵌入音轨，而非直接在 <code>&lt;audio&gt;</code> 元素上设置。通过这种方法可以同时在 <code>type</code> 属性上包含文件的 MIME 类型，这通常很有用，因为浏览器就能立即决策：自己究竟是能够播放该文件，还是不在不能播放的文件上浪费时间。</p>
+
+<pre class="notranslate">&lt;audio controls&gt;
+  &lt;source src="foo.wav" type="audio/wav"&gt;
+  Your browser does not support the &lt;code&gt;audio&lt;/code&gt; element.
+&lt;/audio&gt;
+</pre>
+
+<h3 id="&lt;audio>_与多个_&lt;source>_元素">&lt;audio&gt; 与多个 &lt;source&gt; 元素</h3>
+
+<p>这个例子包含了多个 <code>&lt;source&gt;</code> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素（Opus 后缀名）；如果不行，那就退而求其次去加载第二个(Vorbis 后缀名)，最终退到了 MP3 格式：</p>
+
+<pre class="notranslate">&lt;audio controls&gt;
+ &lt;source src="foo.opus" type="audio/ogg; codecs=opus"/&gt;
+ &lt;source src="foo.ogg" type="audio/ogg; codecs=vorbis"/&gt;
+ &lt;source src="foo.mp3" type="audio/mpeg"/&gt;
+&lt;/audio&gt;</pre>
+
+<h2 id="可访问性考虑">可访问性考虑</h2>
+
+<p>语音形式的音频必须同时提供标题，以及确切描述其内容的文本。标题（Captions）是由 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> 标准定义的，允许听力障碍的人群能够通过播放（文字）记录来理解音频内容。转录文字允许那些需要额外时间的人们，以适合他们的速度和格式回顾记录的内容。</p>
+
+<p>如果使用自动标题服务，人工检查生成内容是很重要的，这确保了标题能够准确的描述源音频。</p>
+
+<p>如何你的用户代理上的 <code>&lt;audio&gt;</code> 元素不直接支持 WebVTT。你必须寻找一个框架来为你提供这种能力，或者自己写代码来展示标题。一个选择是使用 {{HTMLElement("video")}} 元素，它是一定支持 WebVTT 的。</p>
+
+<p>进阶的来讲，语音的副标题和转录文字应该同时描述音乐与音效，因为它们也是音频的重要信息，包含了情绪与音调。举例子，在下面的 WebVTT 中，中括号里提供了关于音调与情绪的信息给观看者；通过这种方式（给出音乐，语言之外的声音，以及另一些至关重要的声音的描述）能够帮助建立起音频的氛围。</p>
+
+<pre class="notranslate">1
+00:00:00 --&gt; 00:00:45
+[Energetic techno music]
+
+2
+00:00:46 --&gt; 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 --&gt; 00:01:02
+[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
+
+</pre>
+
+<p>给出其他内容（比如直接的下载链接）也是一种最佳实践，这能够作为一种用户浏览器不支持 <code>&lt;audio&gt;</code> 元素时的兜底方案。</p>
+
+<pre class="notranslate">&lt;audio controls&gt;
+  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
+  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;
+    Your browser doesn't support HTML5 audio.
+    Here is a &lt;a href="myAudio.mp4"&gt;link to download the audio&lt;/a&gt; instead.
+  &lt;/p&gt;
+&lt;/audio&gt;
+
+</pre>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
+ <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_%E2%80%94_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="技术总结">技术总结</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "audio")}} attribute: interactive content and palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">合法内容</th>
+   <td>
+    <p>如果元素拥有一个 {{htmlattrxref("src", "audio")}} 属性：合法内容为 0 个或更多 {{HTMLElement("track")}} 元素，跟随着不包含 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 媒体元素的透明内容<br>
+     <strong>否则</strong>: 合法内容为零个或多个 {{HTMLElement("source")}} 元素，跟随着 0 个或多个{{HTMLElement("track")}} 元素，跟随着不包含 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 媒体元素的透明内容</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>标签简写</p>
+   </th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">合法的父元素</th>
+   <td>任何能够作为容器的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">隐式ARIA role</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
+  </tr>
+  <tr>
+   <th scope="row">合法de ARIA roles</th>
+   <td>{{ARIARole("application")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLAudioElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">贵干</th>
+   <th scope="col">进度</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("html.elements.audio")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Web media technologies</a>
+
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web_Audio_API">Web Audio API</a></li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf