initial commit

2 files changed, 199 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlaudioelement/audio/index.html b/files/zh-cn/web/api/htmlaudioelement/audio/index.html
new file mode 100644
index 0000000000..f095c48a69
--- /dev/null
+++ b/files/zh-cn/web/api/htmlaudioelement/audio/index.html
@@ -0,0 +1,91 @@
+---
+title: Audio()
+slug: Web/API/HTMLAudioElement/Audio
+tags:
+  - API
+  - Audio
+  - DOM
+  - 参考
+  - 多媒体
+  - 构造器
+  - 音频
+translation_of: Web/API/HTMLAudioElement/Audio
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary"><code><strong>Audio()</strong></code> 构造器创建并返回一个 {{domxref("HTMLAudioElement")}}，可以将它附加到文档中以供用户交互，也可以用于管理和播放背景音乐。</span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate"><var>audioObj</var> = new Audio(<var>url</var>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>一个可选的、包含音频文件 URL 的 {{domxref("DOMString")}}。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>新创建的 {{domxref("HTMLAudioElement")}} 对象，被设置为播放指定 <code>url</code>的音频文件。新对象的 {{domxref("HTMLMediaElement.preload", "preload")}} 属性被设置为 <code>auto</code> 且它的 <code>src</code> 属性被设置为具体的 URL 或 <code>null</code> （当没有提供 URL 时）。如果提供了 URL，浏览器在返回新对象之前开始异步加载媒体资源。</p>
+
+<ul>
+</ul>
+
+<h2 id="使用备注">使用备注</h2>
+
+<p>你也可以使用其他元素创建方法，例如 {{domxref("document")}} 对象的 {{domxref("Document.createElement", "createElement()")}} 方法，去构建一个新的 {{domxref("HTMLAudioElement")}}.</p>
+
+<h3 id="检测回放时机">检测回放时机</h3>
+
+<p>提供三种方法给开发者，判断音频文件是否已经加载，允许开始回放：</p>
+
+<ul>
+ <li>检测 {{domxref("HTMLMediaElement.readyState", "readyState")}} 属性的值. 如果值是 <code>HTMLMediaElement.HAVE_FUTURE_DATA</code>，说明有足够的数据开始回放并能至少播放一小段时间。如果值是<code> HTMLMediaElement.HAVE_ENOUGH_DATA</code>，根据当前的下载速率，说明有足够的数据，你可以无干扰地播放至结束。</li>
+ <li>监听 {{domxref("HTMLMediaElement.canplay_event", "canplay")}} 事件。当足够的音频数据被发送至 <code>&lt;audio&gt;</code> 元素，能开始回放，即使可能出现中断时，会触发该事件。</li>
+ <li>监听 {{domxref("HTMLMediaElement.canplaythrough_event", "canplaythrough")}} 事件。当音频应该没有干扰能够顺利播放时将会触发该事件。</li>
+</ul>
+
+<p>基于事件的方法是最优的：</p>
+
+<pre class="brush: js notranslate">myAudioElement.addEventListener("canplaythrough", event =&gt; {
+  /* 音频可以播放；如果权限允许则播放 */
+  myAudioElement.play();
+});</pre>
+
+<h3 id="内存使用与管理">内存使用与管理</h3>
+
+<p>如果所有使用 <code>Audio() </code>构造函数创建的 audio 元素被删除，根据 JavaScript 垃圾回收机制，如果播放正在进行，内存中的 audio 元素不会被移除。相反，音频将会继续播放并且它的对象会保留在内存中，直到播放结束或是被暂停（例如调用 {{domxref("HTMLMediaElement.pause", "pause()")}}）。在那个时候，这个对象才会成为垃圾回收的目标。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-audio", "Audio()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLAudioElement.Audio")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li>实现了此接口的 HTML 元素：{{HTMLElement("audio")}}。</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlaudioelement/index.html b/files/zh-cn/web/api/htmlaudioelement/index.html
new file mode 100644
index 0000000000..858a4e7542
--- /dev/null
+++ b/files/zh-cn/web/api/htmlaudioelement/index.html
@@ -0,0 +1,108 @@
+---
+title: HTMLAudioElement
+slug: Web/API/HTMLAudioElement
+translation_of: Web/API/HTMLAudioElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLAudioElement</code></strong> 接口提供对 {{HTMLElement("audio")}} 元素的属性访问及一系列操控它的方法，</span>它基于并从 {{domxref("HTMLMediaElement")}} 接口继承属性和方法。</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("HTMLAudioElement.Audio", "Audio()")}}</dt>
+ <dd>创建并返回一个新的 <code>HTMLAudioElement</code> 对象，如果提供音频文件 URL，则开始加载音频文件。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>没有具体的属性；从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承属性。</em></p>
+
+<h2 id="方法">方法</h2>
+
+<p><em>从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承方法，自身不提供方法。</em></p>
+
+<h3 id="废弃的且仅适用于_Mozilla_的方法">废弃的且仅适用于 Mozilla 的方法</h3>
+
+<p><em>以下方法是未标准化的，请勿使用.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLAudioElement.mozCurrentSampleOffset", "mozCurrentSampleOffset()")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the number of samples form the beginning of the stream that have been written so far into the audio stream created by calling {{domxref("HTMLAudioElement.mozWriteAudio", "mozWriteAudio()")}}.</dd>
+ <dt>{{domxref("HTMLAudioElement.mozSetup", "mozSetup()")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in kHz.</dd>
+ <dt>{{domxref("HTMLAudioElement.mozWriteAudio", "mozWriteAudio()")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream.</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="基本用法">基本用法</h3>
+
+<p>你可以完全使用 JavaScript 的 {{domxref("HTMLAudioElement.Audio", "Audio()")}} 构造函数来创建一个 <code>HTMLAudioElement</code> ：</p>
+
+<pre class="brush: js notranslate">var audioElement = new Audio('car_horn.wav');
+</pre>
+
+<p>然后你可以在这个元素上调用 <code>play()</code> 方法</p>
+
+<pre class="brush: js notranslate">audioElement.play();</pre>
+
+<div class="note">
+<p>一个常见的需求是在页面加载后马上去播放音频，现代浏览器的默认自动播放策略会阻止这一行为，参见 <a href="https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/">firefox</a> 和 <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">chrome</a> 寻找最佳实践和解决方案。</p>
+</div>
+
+<p>一些经常被使用的属性，包括 {{domxref("HTMLMediaElement.src", "src")}}、{{domxref("HTMLMediaElement.currentTime", "currentTime")}}、{{domxref("HTMLMediaElement.duration", "duration")}}、{{domxref("HTMLMediaElement.paused", "paused")}}、{{domxref("HTMLMediaElement.muted", "muted")}} 和 {{domxref("HTMLMediaElement.volume", "volume")}}。以下这段代码赋值音频文件的播放时长给一个变量：</p>
+
+<pre class="brush: js notranslate">var audioElement = new Audio('car_horn.wav');
+audioElement.addEventListener('loadeddata', () =&gt; {
+  let duration = audioElement.duration;
+  // duration 变量现在存放音频的播放时长（单位秒）
+})</pre>
+
+<dl>
+</dl>
+
+<h2 id="事件">事件</h2>
+
+<p><em>从父类 {{domxref("HTMLMediaElement")}} 和祖先 {{domxref("HTMLElement")}} 继承方法. 使用 </em><code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> <em>监听事件或者赋值一个事件监听器给这个接口的 </em><code>on<em>eventname</em></code> 属性。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlaudioelement", "HTMLAudioElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HTMLAudioElement")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/zh-CN/docs/Web/Media/HTML_media">Using audio and video in HTML</a></li>
+ <li>HTML element implementing this interface: {{HTMLElement("audio")}}.</li>
+</ul>