files/zh-cn/web/api/htmlaudioelement/audio/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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>