diff options
Diffstat (limited to 'files/zh-cn/web/html/element/audio/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/audio/index.html | 48 |
1 files changed, 24 insertions, 24 deletions
diff --git a/files/zh-cn/web/html/element/audio/index.html b/files/zh-cn/web/html/element/audio/index.html index c7782d664a..a2b7a3a241 100644 --- a/files/zh-cn/web/html/element/audio/index.html +++ b/files/zh-cn/web/html/element/audio/index.html @@ -27,20 +27,20 @@ translation_of: Web/HTML/Element/audio <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> + <p><strong>注意：</strong>自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的<a href="/zh-CN/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")}} 元素复用而不污染. 可选值如下： + <dd>枚举属性 展示音频资源是否可以通过CORS加载。<a href="/zh-CN/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> + 在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 <code>Origin: </code>请求首部），以保护 {{HTMLElement('canvas')}} 元素中未污染的内容。如果验证失败，它会表现的好像 <strong>anonymous </strong>选项是选中的。查看 <a href="/zh-CN/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> @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/audio </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> + <dd>这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 <code>NaN</code>。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 <a href="/zh-CN/docs/Web/API/WebRTC_API">WebRTC</a> 连接的流），那么这个值将返回 <code>+Infinity</code>。</dd> <dt>{{htmlattrdef("loop")}}</dt> <dd>布尔属性；如果声明该属性，将循环播放音频。</dd> <dt>{{htmlattrdef("muted")}}</dt> @@ -120,7 +120,7 @@ translation_of: Web/HTML/Element/audio <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> + <p>媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 <code><a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal">load()</a> </code>方法，这个事件就将被触发。</p> </td> </tr> <tr> @@ -200,7 +200,7 @@ translation_of: Web/HTML/Element/audio <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> +<p>浏览器对 <a href="/zh-CN/docs/Web/Media/Formats/Containers">文件类型</a> 和 <a href="/zh-CN/docs/Web/Media/Formats/Audio_codecs">音频编码</a> 的支持各有不同，你可以使用内嵌的 {{htmlelement("source")}} 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：</p> <pre class="notranslate"><audio controls> <source src="myAudio.mp3" type="audio/mpeg"> @@ -209,18 +209,18 @@ translation_of: Web/HTML/Element/audio a <a href="myAudio.mp4">link to the audio</a> instead.</p> </audio></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>我们提供了全面细致的 <a href="/zh-CN/docs/Web/Media/Formats">音频文件类型指南</a> 和 <a href="/zh-CN/docs/Web/Media/Formats/Audio_codecs">这些类型可以使用的音频编码</a>。此外，还有 <a href="/zh-CN/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>HTMLMediaElement</code> 会触发多种不同的 <a href="/zh-CN/docs/Web/Guide/Events/Media_events">事件</a>。这也提供了一个查看音频获取过程的方式，你可以查看错误或检测什么时候可以开始播放或操作。</li> + <li>你还可以使用 <a href="/zh-CN/docs/Web/API/Web_Audio_API">Web Audio API</a> 以从 JavaScript 代码直接生成和操纵音频流，而非流式播放已存在的音频文件。</li> <li><code><audio></code> 元素不能像 <code><video></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><audio></code> 的好文章。</p> +<p><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a> 新手教程是一篇关于使用 HTML <code><audio></code> 的好文章。</p> <h3 id="使用_CSS_设置样式">使用 CSS 设置样式</h3> @@ -232,7 +232,7 @@ translation_of: Web/HTML/Element/audio <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><video></code> 而写，但大部分都可以用于 <code><audio></code>。</p> +<p><a href="/zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">视频播放器样式基础</a> 提供了一些有用的样式技术，这篇文章围绕 <code><video></code> 而写，但大部分都可以用于 <code><audio></code>。</p> <h3 id="检测音轨添加和移除">检测音轨添加和移除</h3> @@ -282,7 +282,7 @@ elem.audioTrackList.onremovetrack = function(event) { </audio> </pre> -<p>如果想获得更多信息，包括何时自动播放生效，如何获取自动播放权限，并且通过何种方式，在何时应用自动播放才是合适的，请看我们的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>。</p> +<p>如果想获得更多信息，包括何时自动播放生效，如何获取自动播放权限，并且通过何种方式，在何时应用自动播放才是合适的，请看我们的 <a href="/zh-CN/docs/Web/Media/Autoplay_guide">autoplay guide</a>。</p> <h3 id="<audio>_元素与_<source>_元素"><audio> 元素与 <source> 元素</h3> @@ -306,7 +306,7 @@ elem.audioTrackList.onremovetrack = function(event) { <h2 id="可访问性考虑">可访问性考虑</h2> -<p>语音形式的音频必须同时提供标题，以及确切描述其内容的文本。标题（Captions）是由 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> 标准定义的，允许听力障碍的人群能够通过播放（文字）记录来理解音频内容。转录文字允许那些需要额外时间的人们，以适合他们的速度和格式回顾记录的内容。</p> +<p>语音形式的音频必须同时提供标题，以及确切描述其内容的文本。标题（Captions）是由 <a href="/zh-CN/docs/Web/API/WebVTT_API">WebVTT</a> 标准定义的，允许听力障碍的人群能够通过播放（文字）记录来理解音频内容。转录文字允许那些需要额外时间的人们，以适合他们的速度和格式回顾记录的内容。</p> <p>如果使用自动标题服务，人工检查生成内容是很重要的，这确保了标题能够准确的描述源音频。</p> @@ -342,10 +342,10 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi </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="/zh-CN/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li> + <li><a href="/zh-CN/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="/zh-CN/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> @@ -355,8 +355,8 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi <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> + <th scope="row"><a href="/zh-CN/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/zh-CN/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> @@ -421,17 +421,17 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi <h2 id="参见">参见</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Web media technologies</a> + <li><a href="/zh-CN/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> + <li><a href="/zh-CN/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> + <li><a href="/zh-CN/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><a href="/zh-CN/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> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li> + <li><a href="/zh-CN/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> </ul> |