HTMLAudioElement

HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. It's based on, and inherits properties and methods from, the HTMLMediaElement 接口。

构造函数

Audio()
Creates and returns a new HTMLAudioElement object, optionally starting the process of loading an audio file into it if the file URL is given.

特性

No specific properties; inherits properties from its parent, HTMLMediaElement , and from HTMLElement .

方法

Inherits methods from its parent, HTMLMediaElement , and from HTMLElement . It offers no methods of its own.

Obsolete Mozilla-only methods

The following methods are non-standard and should not be used.

mozCurrentSampleOffset()
Returns the number of samples form the beginning of the stream that have been written so far into the audio stream created by calling mozWriteAudio() .
mozSetup()
Sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in kHz.
mozWriteAudio()
Writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream.

范例

基本用法

You can create a HTMLAudioElement entirely with JavaScript using the Audio() constructor:

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

then you can invoke the play() method on the element

audioElement.play();
					

A common gotcha is trying to play an audio element immediately on page load. Modern browser's default autoplay policy will block that from happening. Refer to firefox and chrome for best practices and work arounds.

Some of the more commonly used properties of the audio element include src , currentTime , duration , paused , muted ,和 volume . This snippet copies the audio file's duration to a variable:

var audioElement = new Audio('car_horn.wav');
audioElement.addEventListener('loadeddata', () => {
  let duration = audioElement.duration;
  // The duration variable now holds the duration (in seconds) of the audio clip
})
					

Events

Inherits methods from its parent, HTMLMediaElement , and from its ancestor HTMLElement . Listen to events using addEventListener() 或通过把事件监听器赋值给 on eventname 特性为此接口。

规范

规范 状态 Comment
HTML Living Standard
The definition of 'HTMLAudioElement' in that specification.
实时标准
HTML5
The definition of 'HTMLAudioElement' in that specification.
Recommendation

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
HTMLAudioElement Chrome 1 Edge 12 Firefox 3.5 IE 9 Opera 10.5 Safari 3.1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 11 Safari iOS 2 Samsung Internet Android 1.0
Audio() 构造函数 Chrome Yes Edge 12 Firefox 3.5 IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
mozCurrentSampleOffset()
弃用 非标
Chrome No Edge No Firefox 4 — 31 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android ? — 31 Opera Android No Safari iOS No Samsung Internet Android No
mozSetup()
弃用 非标
Chrome No Edge No Firefox 4 — 31 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android ? — 31 Opera Android No Safari iOS No Samsung Internet Android No
mozWriteAudio()
弃用 非标
Chrome No Edge No Firefox 4 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android Yes Opera Android No Safari iOS No Samsung Internet Android No

图例

完整支持
完整支持
不支持
不支持
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。

另请参阅

  1. HTMLAudioElement
  2. 构造函数
    1. Audio()
  3. 继承:
    1. HTMLMediaElement
    2. HTMLElement
    3. Element
    4. Node
    5. EventTarget
  4. Related pages for HTML DOM
    1. BeforeUnloadEvent
    2. DOMStringMap
    3. ErrorEvent
    4. GlobalEventHandlers
    5. HTMLAnchorElement
    6. HTMLAreaElement
    7. HTMLBRElement
    8. HTMLBaseElement
    9. HTMLBaseFontElement
    10. HTMLBodyElement
    11. HTMLButtonElement
    12. HTMLCanvasElement
    13. HTMLContentElement
    14. HTMLDListElement
    15. HTMLDataElement
    16. HTMLDataListElement
    17. HTMLDialogElement
    18. HTMLDivElement
    19. HTMLDocument
    20. HTMLElement
    21. HTMLEmbedElement
    22. HTMLFieldSetElement
    23. HTMLFormControlsCollection
    24. HTMLFormElement
    25. HTMLFrameSetElement
    26. HTMLHRElement
    27. HTMLHeadElement
    28. HTMLHeadingElement
    29. HTMLHtmlElement
    30. HTMLIFrameElement
    31. HTMLImageElement
    32. HTMLInputElement
    33. HTMLIsIndexElement
    34. HTMLKeygenElement
    35. HTMLLIElement
    36. HTMLLabelElement
    37. HTMLLegendElement
    38. HTMLLinkElement
    39. HTMLMapElement
    40. HTMLMediaElement
    41. HTMLMetaElement
    42. HTMLMeterElement
    43. HTMLModElement
    44. HTMLOListElement
    45. HTMLObjectElement
    46. HTMLOptGroupElement
    47. HTMLOptionElement
    48. HTMLOptionsCollection
    49. HTMLOutputElement
    50. HTMLParagraphElement
    51. HTMLParamElement
    52. HTMLPictureElement
    53. HTMLPreElement
    54. HTMLProgressElement
    55. HTMLQuoteElement
    56. HTMLScriptElement
    57. HTMLSelectElement
    58. HTMLShadowElement
    59. HTMLSourceElement
    60. HTMLSpanElement
    61. HTMLStyleElement
    62. HTMLTableCaptionElement
    63. HTMLTableCellElement
    64. HTMLTableColElement
    65. HTMLTableDataCellElement
    66. HTMLTableElement
    67. HTMLTableHeaderCellElement
    68. HTMLTableRowElement
    69. HTMLTableSectionElement
    70. HTMLTemplateElement
    71. HTMLTextAreaElement
    72. HTMLTimeElement
    73. HTMLTitleElement
    74. HTMLTrackElement
    75. HTMLUListElement
    76. HTMLUnknownElement
    77. HTMLVideoElement
    78. HashChangeEvent
    79. History
    80. ImageData
    81. Location
    82. MessageChannel
    83. MessageEvent
    84. MessagePort
    85. Navigator
    86. NavigatorGeolocation
    87. NavigatorID
    88. NavigatorLanguage
    89. NavigatorOnLine
    90. NavigatorPlugins
    91. PageTransitionEvent
    92. Plugin
    93. PluginArray
    94. PopStateEvent
    95. PortCollection
    96. PromiseRejectionEvent
    97. RadioNodeList
    98. Transferable
    99. ValidityState
    100. Window
    101. WindowBase64
    102. WindowEventHandlers
    103. WindowTimers