From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/htmlaudioelement/index.html | 108 ++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 files/zh-cn/web/api/htmlaudioelement/index.html (limited to 'files/zh-cn/web/api/htmlaudioelement/index.html') 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 +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLAudioElement 接口提供对 {{HTMLElement("audio")}} 元素的属性访问及一系列操控它的方法，它基于并从 {{domxref("HTMLMediaElement")}} 接口继承属性和方法。

+ +

{{InheritanceDiagram(600, 120)}}

+ +

构造函数

+ +
+
{{domxref("HTMLAudioElement.Audio", "Audio()")}}
+
创建并返回一个新的 HTMLAudioElement 对象，如果提供音频文件 URL，则开始加载音频文件。
+
+ +

属性

+ +

没有具体的属性；从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承属性。

+ +

方法

+ +

从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承方法，自身不提供方法。

+ +

废弃的且仅适用于 Mozilla 的方法

+ +

以下方法是未标准化的，请勿使用.

+ +
+
{{domxref("HTMLAudioElement.mozCurrentSampleOffset", "mozCurrentSampleOffset()")}} {{non-standard_inline}} {{obsolete_inline}}
+
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()")}}.
+
{{domxref("HTMLAudioElement.mozSetup", "mozSetup()")}} {{non-standard_inline}} {{obsolete_inline}}
+
Sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in kHz.
+
{{domxref("HTMLAudioElement.mozWriteAudio", "mozWriteAudio()")}} {{non-standard_inline}} {{obsolete_inline}}
+
Writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream.
+
+ +

示例

+ +

基本用法

+ +

你可以完全使用 JavaScript 的 {{domxref("HTMLAudioElement.Audio", "Audio()")}} 构造函数来创建一个 HTMLAudioElement ：

+ +
var audioElement = new Audio('car_horn.wav');
+
+ +

然后你可以在这个元素上调用 play() 方法

+ +
audioElement.play();
+ +
+

一个常见的需求是在页面加载后马上去播放音频，现代浏览器的默认自动播放策略会阻止这一行为，参见 firefox 和 chrome 寻找最佳实践和解决方案。

+
+ +

一些经常被使用的属性，包括 {{domxref("HTMLMediaElement.src", "src")}}、{{domxref("HTMLMediaElement.currentTime", "currentTime")}}、{{domxref("HTMLMediaElement.duration", "duration")}}、{{domxref("HTMLMediaElement.paused", "paused")}}、{{domxref("HTMLMediaElement.muted", "muted")}} 和 {{domxref("HTMLMediaElement.volume", "volume")}}。以下这段代码赋值音频文件的播放时长给一个变量：

+ +
var audioElement = new Audio('car_horn.wav');
+audioElement.addEventListener('loadeddata', () => {
+  let duration = audioElement.duration;
+  // duration 变量现在存放音频的播放时长（单位秒）
+})
+ +
+
+ +

事件

+ +

从父类 {{domxref("HTMLMediaElement")}} 和祖先 {{domxref("HTMLElement")}} 继承方法. 使用 addEventListener() 监听事件或者赋值一个事件监听器给这个接口的 oneventname 属性。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlaudioelement", "HTMLAudioElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}{{Spec2('HTML5 W3C')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.HTMLAudioElement")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf