Jump to content

HTML audio

From Wikipedia, the free encyclopedia

[1]HTML audiois a subject of theHTMLspecification, incorporating audio input, playback, and synthesis, all in the browser.

<audio> element[edit]

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[edit]

On PC:

  • Google Chrome
  • Internet Explorer 9
  • Firefox 3.5
  • Opera 10.5
  • Google
  • 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[edit]

The adoption of HTML audio, as withHTML video,has become polarized between proponents offreeandpatent-encumberedformats. In 2007, the recommendation to useVorbiswasretractedfrom theHTML5specification by theW3Ctogether with that to useOgg Theora,citing the lack of a format accepted by all the major browser vendors.

AppleandMicrosoftsupport theISO/IEC-definedformatsAACand the olderMP3.MozillaandOperasupport the free andopen,royalty-freeVorbisformat inOggandWebMcontainers, and criticize the patent-encumbered nature of MP3 and AAC, which are guaranteed to be “non-free”.Googlehas so far provided support for all common formats.

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.[2]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.[3][4][5]

Many browsers also support uncompressedPCMaudio in aWAVE container.[6]

In 2012, the free and open royalty-freeOpusformat was released and standardized byIETF.It is supported by Mozilla, Google, Opera and Edge.[6][7][8][9]

This table documents the current support foraudio coding formatsby the<audio>element.

Formats supported by different web browsers
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[10] Yes, inIE9 Yes Yes, in v71[11] Yes[10] Yes, in v3.1
AAC MP4 audio/mp4 Yes Yes, inIE9 Yes From OS[a] Yes Yes
ADTS[b] audio/aac
audio/aacp		 Yes No Yes From OS[a]in v45.0[13][14] Yes Yes
Vorbis Ogg audio/ogg Yes, in v9 No In v79[15]
In v17, with Web Media Extensions[16]		 Yes, in v3.5[17] Yes, in v10.50 WithXiph QuickTime Components(macOS 10.11and earlier)
WebM audio/webm Yes No In v79[15]
In v17, with Web Media Extensions[16]		 Yes, in v4.0[18] Yes, in v10.60 No
Opus Ogg audio/ogg Yes, in v25
(in v31 for Windows)		 No In v79[19]
In v17, with Web Media Extensions[16]		 Yes, in v15.0[20] Yes, in v14 No
WebM audio/webm Yes No In v79[19]
In v17, with Web Media Extensions[16]		 Yes, in v28.0[21] Yes Yes, in Safari 15+ andmacOS Monterey[22][23]
CAF audio/x-caf No No No No No Yes, in Safari 11 andmacOS High Sierra
FLAC FLAC audio/flac Yes, in v56[24] No Yes, in v16[25] Yes, in v51[26] Yes Yes, in v11[27]
Ogg audio/ogg Yes, in v56[24] No In v79[28]
In v17, with Web Media Extensions[16]		 Yes, in v51[26] Yes No

Web Audio API and MediaStream Processing API[edit]

The Web Audio API specification developed byW3Cdescribes a high-level JavaScript API for processing and synthesizing audio in web applications. The primary paradigm is of an audio routing graph, where a number of AudioNode objects are connected together to define the overall audio rendering. The actual processing will primarily take place in the underlying implementation (typically optimized Assembly / C / C++ code), but direct JavaScript processing and synthesis is also supported.[29]

Mozilla's Firefox browserimplements a similar Audio Data API extension since version 4, implemented in 2010[30]and released in 2011, but Mozilla warns it is non-standard and deprecated, and recommends the Web Audio API instead.[31] Some JavaScript audio processing and synthesis libraries such asAudioletArchived2013-01-28 at theWayback Machinesupport both APIs.

TheW3C Audio Working Groupis also considering theMediaStream Processing APIspecification developed byMozilla.[32] In addition to audio mi xing and processing, it covers more general media streaming, including synchronization with HTML elements, capture of audio and video streams, andpeer-to-peer routingof such media streams.[33]

Supporting browsers[edit]

On PC:

On mobile devices:

  • Google Chromefor Android 28 (Enabled by default since 29) and Apple iPads
  • Safari6 (Has restrictions on use (Muted unless user called))
  • Firefox23 (Enabled by default since 25)
  • Tizen

Web Speech API[edit]

TheWeb Speech APIaims to provide an alternative input method for web applications (without using a keyboard). With this API, developers can give web apps the ability to transcribe voice to text, from the computer's microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for the user. The API itself is agnostic of the underlying speech recognition implementation and can support both server based as well as embedded recognizers.[36] TheHTML Speech Incubator grouphas proposed the implementation of audio-speech technology in browsers in the form of uniform, cross-platform APIs. The API contains both:[37]

  • Speech Input API
  • Text to Speech API

Google integrated this feature into Google Chrome in March 2011.[38]Letting its users search the web with their voice with code like:

Supporting browsers[edit]

  • Safari14.1 and up[39]
  • Google Chrome25 and up
  • FirefoxDesktop 44.0 and up (Linux and Mac) / 45.0 and up (Windows) [PARTIAL: speech synthesis only; no recognition; enabled by default since 49.0][40][41]

See also[edit]

Notes[edit]

  1. ^abThere 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.[12]
  2. ^An MPEG-4 file contains a header that includesmetadatafollowed 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.[4]

References[edit]

  1. ^"Resources – Safari".Apple Developer.Retrieved2022-11-18.
  2. ^"TechFans.net – Technology and Business News blog".TechFans.net.Retrieved2022-11-18.
  3. ^"MP4 container · Issue #95 · karlheyes/icecast-kh".GitHub.Retrieved2022-11-18.
  4. ^ab"Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC)".
  5. ^"1224887 – Implement OpenMax IL AAC audio decoding client".
  6. ^ab"Media type and format guide: image, audio, and video content – Web media technologies | MDN".developer.mozilla.org.
  7. ^"September 11, 2012: Opus audio codec is now RFC6716, Opus 1.0.1 reference source released".
  8. ^"It's Opus, it rocks and now it's an audio codec standard! – Mozilla Hacks – the Web developer blog".
  9. ^"WebM, VP9 and Opus Support in Microsoft Edge – Microsoft Edge Dev BlogMicrosoft Edge Dev Blog".blogs.windows.18 April 2016.Retrieved2017-03-22.
  10. ^ab"Enable mp3 support in Chromium".Google.Retrieved2018-05-01.
  11. ^"Firefox 71.0 release notes".Mozilla. December 3, 2019.
  12. ^"Media type and format guide: image, audio, and video content".Mozilla Developer Network.Mozilla.Retrieved2019-12-06.
  13. ^"1190341 - audio/aacp shoutcast is not supported".
  14. ^"1169212 - Create ADTSDemuxer, a MediaDataDemuxer".
  15. ^ab"Platform Status – Microsoft Edge Developer".
  16. ^abcde"Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge".Microsoft Edge Dev Blog.Microsoft.December 5, 2017.
  17. ^"Firefox Notes - Desktop".
  18. ^"Firefox Notes - Desktop".
  19. ^ab"Platform Status – Microsoft Edge Developer".developer.microsoft.
  20. ^"Firefox Notes - Desktop".
  21. ^"Firefox 28.0, See All New Features, Updates and Fixes".
  22. ^Simmons, Jen (October 26, 2021)."New WebKit Features in Safari 15".
  23. ^"Apple Developer Documentation".developer.apple.
  24. ^ab"FLAC codec support for <audio> and WebAudio".Chrome Platform Status.Retrieved2016-12-27.
  25. ^"Platform Status – Microsoft Edge Developer".developer.microsoft.
  26. ^ab"Firefox 51 for developers".Mozilla Developer Network.Retrieved2016-12-27.
  27. ^Chaim Gartenberg (June 6, 2017)."Apple reportedly adds support for FLAC lossless audio in iOS 11".The Verge.
  28. ^"Platform Status – Microsoft Edge Developer".
  29. ^Chris Rogers (2012-03-15)."Web Audio API".W3C.Archived from the original on 2012-07-20.Retrieved2012-07-04.{{cite web}}:CS1 maint: bot: original URL status unknown (link)
  30. ^"Audio Data API".
  31. ^"Introducing the Audio API extension".Mozilla Developer Network.Mozilla.2012-03-05. Archived fromthe originalon 2012-05-05.Retrieved2012-07-04.
  32. ^"Audio Processing API".W3C.2011-12-15. Archived from the original on 2012-06-14.Retrieved2012-07-04.{{cite web}}:CS1 maint: bot: original URL status unknown (link)
  33. ^Robert O'Callahan (2012-05-31)."MediaStream Processing API".W3C.Retrieved2012-07-04.
  34. ^"Web Audio API is now available in Chrome from Chris Rogers on 2011-02-01 ([email protected] from February 2011)".lists.w3.org.Retrieved2022-11-18.
  35. ^Scott Gilbertson (2011-09-19)."Chrome 14 Adds Better Audio, 'Native Client' Support".Webmonkey.Wired.Retrieved2012-07-04.
  36. ^"API draft".RetrievedJanuary 28,2012.
  37. ^"HTML5 Speech API".RetrievedJanuary 28,2012.
  38. ^"Talking to your computer".RetrievedJanuary 28,2012.
  39. ^"Web Speech API – Web APIs | MDN".RetrievedMay 20,2024.
  40. ^"Firefox 49 for developers – Mozilla | MDN".RetrievedMay 20,2024.
  41. ^"Web Speech API – Web APIs | MDN".RetrievedMay 20,2024.

External links[edit]

Retrieved from "https://en.wikipedia.org/w/index.php?title=HTML_audio&oldid=1233840300"