HTML audio
HTML audio is a subject of the HTML specification, incorporating audio input, playback, and synthesis, as well as speech to text, all in the browser.
<audio> element
The <audio>
element represents a sound, or an audio stream. It is commonly used to play back a single audio file within a web page, showing a GUI widget with play/pause/volume controls.
The <audio>
element has these attributes:
- global attributes (accesskey; class; contenteditable; contextmenu; dir; draggable; dropzone; hidden; id; lang; spellcheck; style; tabindex; title; translate)
- autoplay = "autoplay" or "" (empty string) or empty
Instructs the User-Agent to automatically begin playback of the audio stream as soon as it can do so without stopping. - preload = "none" or "metadata" or "auto" or "" (empty string) or empty
Represents a hint to the User-Agent about whether optimistic downloading of the audio stream itself or its metadata is considered worthwhile.- "none": Hints to the User-Agent that the user is not expected to need the audio stream, or that minimizing unnecessary traffic is desirable.
- "metadata": Hints to the User-Agent that the user is not expected to need the audio stream, but that fetching its metadata (duration and so on) is desirable.
- "auto": Hints to the User-Agent that optimistically downloading the entire audio stream is considered desirable.
- controls = "controls" or "" (empty string) or empty
Instructs the User-Agent to expose a user interface for controlling playback of the audio stream. - loop = "loop" or "" (empty string) or empty
Instructs the User-Agent to seek back to the start of the audio stream upon reaching the end. - mediagroup = string
Instructs the User-Agent to link multiple videos and/or audio streams together. - muted = "muted" or "" (empty string) or empty
Represents the default state of the audio stream, potentially overriding user preferences. - src = non-empty [URL] potentially surrounded by spaces
The URL for the audio stream.
Example:
Supporting browsers
On PC:
- Google Chrome
- Internet Explorer 9
- Firefox 3.5
- Opera 10.5
- Safari 3.1
On mobile devices:
- Android Browser 2.3
- Google Chrome
- Internet Explorer Mobile 9
- Safari 4
- Firefox
- Opera Mobile 11
Supported audio coding formats
The adoption of HTML audio, as with
Most AAC files with finite length are wrapped in an MPEG-4 container (.mp4, .m4a), which is supported natively in Internet Explorer, Safari, and Chrome, and supported by the OS in Firefox and Opera.[citation needed] Most AAC live streams with infinite length are wrapped in an Audio Data Transport Stream container (.aac, .adts), which is supported by Chrome, Safari, Firefox and Edge.[1][2][3]
Many browsers also support uncompressed
In 2012, the free and open royalty-free Opus format was released and standardized by IETF. It is supported by Mozilla, Google, Opera and Edge.[4][5][6][7]
This table documents the current support for audio coding formats by the <audio>
element.
Format | Container | MIME type | Chrome | Internet Explorer | Edge | Firefox | Opera | Safari |
---|---|---|---|---|---|---|---|---|
PCM | WAV | audio/wav | Yes | No | Yes | Yes, in v3.5[citation needed] | Yes, in v11.00 | Yes, in v3.1 |
MP3 | MP3 | audio/mpeg | Yes[8] | Yes, in IE9 | Yes | Yes, in v71[9] | Yes[8] | Yes, in v3.1 |
AAC | MP4 |
audio/mp4 | Yes | Yes, in IE9 | Yes | From OS[a] | Yes | Yes |
ADTS[b]
|
audio/aac audio/aacp |
Yes | No | Yes | From OS[a] in v45.0[11][12] | Yes | Yes | |
Vorbis | Ogg | audio/ogg | Yes, in v9 | No | In v79[13] In v17, with Web Media Extensions[14] |
Yes, in v3.5[15] | Yes, in v10.50 | With Xiph QuickTime Components (macOS 10.11 and earlier)
|
WebM |
audio/webm | Yes | No | In v79[13] In v17, with Web Media Extensions[14] |
Yes, in v4.0[16] | Yes, in v10.60 | No | |
Opus | Ogg | audio/ogg | Yes, in v25 (in v31 for Windows) |
No | In v79[17] In v17, with Web Media Extensions[14] |
Yes, in v15.0[18] | Yes, in v14 | No |
WebM |
audio/webm | Yes | No | In v79[17] In v17, with Web Media Extensions[14] |
Yes, in v28.0[19] | Yes | Yes, in Safari 15+ and macOS Monterey[20][21] | |
CAF | audio/x-caf | No | No | No | No | No | Yes, in Safari 11 and macOS High Sierra | |
FLAC | FLAC | audio/flac | Yes, in v56[22] | No | Yes, in v16[23] | Yes, in v51[24] | Yes | Yes, in v11[25] |
Ogg | audio/ogg | Yes, in v56[22] | No | In v79[26] In v17, with Web Media Extensions[14] |
Yes, in v51[24] | Yes | No |
Web Audio API and MediaStream Processing API
The Web Audio API specification developed by
Mozilla's Firefox browser implements a similar Audio Data API extension since version 4, implemented in 2010 [28] and released in 2011, but Mozilla warns it is non-standard and deprecated, and recommends the Web Audio API instead.[29] Some JavaScript audio processing and synthesis libraries such as Audiolet Archived 2013-01-28 at the Wayback Machine support both APIs.
The W3C Audio Working Group is also considering the
In addition to audio mixing and processing, it covers more general media streaming, including synchronization with HTML elements, capture of audio and video streams, and peer-to-peer routing of such media streams.[31]Supporting browsers
On PC:
- Google Chrome 10[32] (Enabled by default since 14[33])
- Firefox 23 (Enabled by default since 25)
- Opera 15
- Safari 6
- Microsoft Edge 12
- Opera GX36
On mobile devices:
- Google Chrome for Android 28 (Enabled by default since 29) and Apple iPads
- Safari 6 (Has restrictions on use (Muted unless user called))
- Firefox 23 (Enabled by default since 25)
- Tizen
Web Speech API
The
- Speech Input API
- Text to Speech API
Google integrated this feature into Google Chrome in March 2011.[36] Letting its users search the web with their voice with code like:
Supporting browsers
- Safari 14.1 and up [37]
- Google Chrome 25 and up
- Firefox Desktop 44.0 and up (Linux and Mac) / 45.0 and up (Windows) [PARTIAL: speech synthesis only; no recognition; enabled by default since 49.0][38][39]
See also
Notes
- ^ a b There is no native support for the AAC codec due to licensing reasons. Decoding of audio files requires the host OS to provide a compatible library.[10]
- ^ An MPEG-4 file contains a header that includes metadata followed by "tracks" which can include video as well as audio data, for example, H.264 encoded Video and AAC encoded Audio. ADTS in contrast is a streaming format consisting of a series of frames, each frame having a header followed by the AAC data.[2]
References
- ^ "MP4 container · Issue #95 · karlheyes/icecast-kh". GitHub. Retrieved 2022-11-18.
- ^ a b "Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC)".
- ^ "1224887 – Implement OpenMax IL AAC audio decoding client".
- ^ a b "Media type and format guide: image, audio, and video content – Web media technologies | MDN". developer.mozilla.org.
- ^ "September 11, 2012: Opus audio codec is now RFC6716, Opus 1.0.1 reference source released".
- ^ "It's Opus, it rocks and now it's an audio codec standard! – Mozilla Hacks – the Web developer blog".
- ^ "WebM, VP9 and Opus Support in Microsoft Edge – Microsoft Edge Dev BlogMicrosoft Edge Dev Blog". blogs.windows.com. 18 April 2016. Retrieved 2017-03-22.
- ^ a b "Enable mp3 support in Chromium". Google. Retrieved 2018-05-01.
- ^ "Firefox 71.0 release notes". Mozilla. December 3, 2019.
- ^ "Media type and format guide: image, audio, and video content". Mozilla Developer Network. Mozilla. Retrieved 2019-12-06.
- ^ "1190341 - audio/aacp shoutcast is not supported".
- ^ "1169212 - Create ADTSDemuxer, a MediaDataDemuxer".
- ^ a b "Platform Status – Microsoft Edge Developer".
- ^ a b c d e "Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge". Microsoft Edge Dev Blog. Microsoft. December 5, 2017.
- ^ "Firefox Notes - Desktop".
- ^ "Firefox Notes - Desktop".
- ^ a b "Platform Status – Microsoft Edge Developer". developer.microsoft.com.
- ^ "Firefox Notes - Desktop".
- ^ "Firefox 28.0, See All New Features, Updates and Fixes".
- ^ Simmons, Jen (October 26, 2021). "New WebKit Features in Safari 15".
- ^ "Apple Developer Documentation". developer.apple.com.
- ^ a b "FLAC codec support for <audio> and WebAudio". Chrome Platform Status. Retrieved 2016-12-27.
- ^ "Platform Status – Microsoft Edge Developer". developer.microsoft.com.
- ^ a b "Firefox 51 for developers". Mozilla Developer Network. Retrieved 2016-12-27.
- ^ Chaim Gartenberg (June 6, 2017). "Apple reportedly adds support for FLAC lossless audio in iOS 11". The Verge.
- ^ "Platform Status – Microsoft Edge Developer".
- )
- ^ "Audio Data API".
- Mozilla Developer Network. Mozilla. 2012-03-05. Archived from the originalon 2012-05-05. Retrieved 2012-07-04.
- )
- W3C. Retrieved 2012-07-04.
- ^ "Web Audio API is now available in Chrome from Chris Rogers on 2011-02-01 ([email protected] from February 2011)". lists.w3.org. Retrieved 2022-11-18.
- ^ Scott Gilbertson (2011-09-19). "Chrome 14 Adds Better Audio, 'Native Client' Support". Webmonkey. Wired. Retrieved 2012-07-04.
- ^ "API draft". Retrieved January 28, 2012.
- ^ "HTML5 Speech API". Retrieved January 28, 2012.
- ^ "Talking to your computer". Retrieved January 28, 2012.
- ^ "Web Speech API – Web APIs | MDN". Retrieved May 20, 2024.
- ^ "Firefox 49 for developers – Mozilla | MDN". Retrieved May 20, 2024.
- ^ "Web Speech API – Web APIs | MDN". Retrieved May 20, 2024.
External links
- HTML/Elements/audio – W3C Wiki
- HTML5 audio element – W3C
- Web Audio API – W3C
- MediaStream Processing API – W3C
- Web Speech API – W3C
- Web Audio DAW – GitHub
- Mozilla's Web Audio API