HTML 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

©
This document uses PHP Chinese website manual Release

characters

该HTML 元素用于嵌入文档中的声音内容。它可能包含一个或多个音频源，用src<source>属性或<audio>元素表示：浏览器将选择最合适的一个。它也可以是流媒体的目的地，使用一个MediaStream。

内容类别

流内容，短语内容，嵌入式内容。如果它具有控件属性：交互式内容和可触及的内容。

允许的内容

如果元素具有src属性：零个或多个<track>元素，后跟不包含媒体元素的透明内容，即不包含<audio>或<video>元素：零个或多个<source>元素，后跟零或更多<track>元素，后面是不包含媒体元素的透明内容，即不包含<audio>或<video>。

标记遗漏

没有，起始和结束标签都是强制性的。

允许父母

任何接受嵌入内容的元素。

允许ARIA角色

应用

DOM界面

HTMLAudioElement

属性

该元素包含 全局属性。

autoplay布尔属性；如果指定（默认值为"false"！）；指定后，音频会马上自动开始播放，不会停下来等着数据载入结束。

自动播放音频（或带音轨的视频）的站点对于用户来说可能是一个不愉快的体验，所以应尽可能避免。如果您必须提供自动播放功能，您应该选择启用（要求用户专门启用它）。但是，在用户控制下创建媒体元素的源将在稍后设置时，这可能是有用的。

buffered你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges对象。

controls如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

loop布尔属性；如果指定，将循环播放音频。

mozCurrentSampleOffset在音频播放时，表示相对于音频开始处的偏移量的一个数值。

muted表示是否静音的布尔值。默认值为false，表示有声音。

played一个TimeRanges对象，表示所有已播放的音频片段。

preload枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

  • none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；

  • metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。

  • auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。

  • 空字符串 : 等效于auto属性。

假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值）， 即使规范建议设置为 metadata.

使用备注：

  • autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。

  • 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

src嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 <source>元素来替代该属性指定嵌入的音频。

volume音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).

时间偏移量目前是指定为float类型的值，表示偏移的秒数。

备注： HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。

事件

audio元素支持的事件

例子

基本用法

不支持<audio>元素的浏览器的其他内容可以添加到开始和结束<audio></audio>标记中。

最基本的播放功能可以使用该controls属性（见下面的示例）; 对于更高级的用法，可以使用HTML Media API操作音频播放和控件，更具体地说，可以使用HTMLAudioElement界面中定义的功能。

音频流/网络音频API

您也可以使用Web Audio API来直接生成和处理来自JavaScript代码的音频流。

<audio>和字幕

虽然HTML5 <video>可以通过<track>添加字幕（请参阅将标题和字幕添加到HTML5视频），但<audio>元素不能 ： 忽略标签<track>内包含的任何<audio></audio>元素。请参阅Ian Devlin的WebVTT和Audio获取更多有用的信息和解决方法。

示例

基本用法

<!-- Simple audio playback --><audio
  src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
  autoplay>
  Your browser does not support the <code>audio</code> element.</audio>

使用source元素的audio元素

<audio controls="controls">
  Your browser does not support the <code>audio</code> element.  <source src="foo.wav" type="audio/wav"></audio>

规范

规范

状态

评论

HTML Living Standard该规范中'<audio>'的定义。

生活水平


HTML5该规范中'<audio>'的定义。

建议


浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

3.0

(Yes)

3.5 (1.9.1) 1

9.0

10.5

3.1

autoplay attribute

3.0

(Yes)

3.5 (1.9.1)

9.0

10.5

3.1

buffered attribute

?

(Yes)

4.0 (2.0)

?

?

?

controls attribute

3.0

(Yes)

3.5 (1.9.1)

9.0

10.5

3.1

loop attribute

3.0

(Yes)

11.0 (11.0)

9.0

10.5

3.1

muted attribute

?

(Yes)

11.0 (11.0)

?

?

?

played property

49

14

15.0 (15.0)

11

46

9.1

preload attribute

3.0

(Yes)

4.0 (2.0)

9.0

(Yes) 2

3.1

src attribute

3.0

(Yes)

3.5 (1.9.1)

9.0

10.5

3.1

volume attribute


(Yes)





Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

1.0 (1.0) 1

?

?

?

autoplay attribute

?

(Yes)

1.0 (1.0)

?

?

?

buffered attribute

?

(Yes)

4.0 (2.0)

?

?

?

controls attribute

?

(Yes)

1.0 (1.0)

?

?

?

loop attribute

?

(Yes)

11.0 (11.0)

?

?

?

muted attribute

?

(Yes)

11.0 (11.0)

?

?

?

played property

?

(Yes)

15.0 (15.0)

?

?

?

preload attribute

?

(Yes)

4.0 (2.0)

?

?

?

src attribute

?

(Yes)

1.0 (1.0)

?

?

?

volume attribute


(Yes)





Previous article： Next article：