HTML5 Audio

"Audio tag" redirects here. For metadata describing digital audio, see Metadata § Digital music.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as speech to text, in the browser.

<audio> element

The <audio> element represents a sound, or an audio stream.[1] 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:

Example:[2]

<audio controls>
  <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4' />
  <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type='audio/ogg; codecs=vorbis' />
  <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

Supported browsers

Supported audio coding formats

The adoption of HTML5 audio, as with HTML5 video, has become polarized between proponents of free and patent-encumbered formats. In 2007, the recommendation to use Vorbis was retracted from the specification by the W3C together with that to use Ogg Theora, citing the lack of a format accepted by all the major browser vendors.

Apple and Microsoft support the ISO/IEC-defined formats AAC and the older MP3. Mozilla and Opera support the free and open, royalty-free Vorbis format in Ogg and WebM containers, and criticize the patent-encumbered nature of MP3 and AAC, which are guaranteed to be “non-free”. Google has 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.[4] Most AAC live streams with infinite length are wrapped in an Audio Data Transport Stream container (.aac, .adts), which is currently only supported by Chrome and Safari.[5][6] Support for AAC in an ADTS container is added in Firefox 45.[7]

Many browsers also support uncompressed PCM audio in a WAVE container.[8]

In 2012, the free and open royalty-free Opus format was released and standardized by IETF. It is supported by Mozilla, Google, and Opera.[9][10][11]

This table documents the current support for audio coding formats by the <audio> element.

Formats supported by different web browsers
Format Chrome Internet Explorer Edge Firefox Opera Safari
PCM (WAV container) Yes No Yes Yes, in v3.5 Yes, in v11.00 Yes, in v3.1
MP3 (no container) Yes Yes, in IE9 Yes From OS[lower-alpha 1] From OS[lower-alpha 1] Yes, in v3.1
AAC (MP4 container) Yes Yes, in IE9 Yes From OS[lower-alpha 1] From OS[lower-alpha 1] Yes
AAC (ADTS container)[lower-alpha 2] Yes No Yes From OS, in v45.0 No Yes
Vorbis (Ogg container) Yes, in v9 No No Yes, in v3.5 Yes, in v10.50 With Xiph QuickTime Components
Vorbis (WebM container) Yes No No[15] Yes, in v4.0 Yes, in v10.60 No
Opus (Ogg container) Yes, in v25
(in v31 for Windows) 		No No Yes, in v15.0 Yes, in v14 No
Opus (WebM container) Yes No Yes[16][17] Yes, in v28.0[18] Yes No

Web Audio API and MediaStream Processing API

The Web Audio API specification developed by W3C describes 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.[19]

Mozilla's Firefox browser implements a similar Audio Data API extension since version 4, implemented in 2010 [20] and released in 2011, but Mozilla warns it is non-standard and deprecated, and recommends the Web Audio API instead.[21] Some JavaScript audio processing and synthesis libraries such as Audiolet support both APIs.

The W3C Audio Working Group is also considering the MediaStream Processing API specification developed by Mozilla.[22] 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.[23]

Supported browsers

Web Speech API

The Web Speech API aims 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.[26] The HTML Speech Incubator group has proposed the implementation of audio-speech technology in browsers in the form of uniform, cross-platform APIs. The API contains both:[27]

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

<script type="application/javascript">
    function startSearch(event) {
        event.target.form.submit();
    }
</script>
<form action="http://www.google.com/search">
  <input type="search" name="q" speech required onspeechchange="startSearch">
</form>

Supported Browsers

See also

Notes

  1. 1 2 3 4 There is no native support for MPEG codecs due to licensing reasons. Decoding of audio files requires the host OS to provide a compatible library.[12][13]
  2. ↑ 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.[14]

References

  1. ↑ HTML5 audio element - W3C
  2. ↑ https://www.w3.org/wiki/HTML/Elements/audio
  3. 1 2 About HTML5 Audio and Video - Safari HTML5 Audio and Video Guide
  4. ↑ Is it possible to play this stream using HTML5/javascript?
  5. ↑ MP4 container · Issue #95 · karlheyes/icecast-kh · GitHub
  6. ↑ https://developer.apple.com/library/ios/technotes/tn2236/_index.html#//apple_ref/doc/uid/DTS40008748-CH1-SECTION5
  7. ↑ https://bugzilla.mozilla.org/show_bug.cgi?id=1224887
  8. ↑ https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements
  9. ↑ https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements#Ogg_Opus
  10. ↑ https://www.xiph.org/press/2012/rfc-6716/
  11. ↑ https://hacks.mozilla.org/2012/09/its-opus-it-rocks-and-now-its-an-audio-codec-standard/
  12. ↑ http://html5hub.com/so-do-we-have-a-cross-browser-audio-format-yet/
  13. ↑ http://stackoverflow.com/questions/28237510/does-opera-support-audio-mp3-files
  14. ↑ https://developer.apple.com/library/ios/technotes/tn2236/_index.html#//apple_ref/doc/uid/DTS40008748-CH1-SECTION5
  15. ↑ https://dev.modern.ie/platform/status/vorbisaudiocodec/
  16. ↑ https://developer.microsoft.com/en-us/microsoft-edge/platform/status/opusaudioplayback
  17. ↑ https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webmcontainer
  18. ↑ http://www.mozilla.org/en-US/firefox/28.0/releasenotes/
  19. ↑ Chris Rogers (2012-03-15). "Web Audio API". W3C. Archived from the original on 2012-03-15. Retrieved 2012-07-04.
  20. ↑ "Audio Data API".
  21. ↑ "Introducing the Audio API extension". Mozilla Developer Network. Mozilla. 2012-03-05. Archived from the original on 2014-01-16. Retrieved 2012-07-04.
  22. ↑ "Audio Processing API". W3C. 2011-12-15. Archived from the original on 2011-12-15. Retrieved 2012-07-04.
  23. ↑ Robert O'Callahan (2012-05-31). "MediaStream Processing API". W3C. Retrieved 2012-07-04.
  24. ↑ Web Audio API is now available in Chrome
  25. ↑ Scott Gilbertson (2011-09-19). "Chrome 14 Adds Better Audio, 'Native Client' Support". Webmonkey. Wired. Retrieved 2012-07-04.
  26. ↑ "API draft". Retrieved January 28, 2012.
  27. ↑ "HTML5 Speech API". Retrieved January 28, 2012.
  28. ↑ "Talking to your computer". Retrieved January 28, 2012.
  29. ↑ "Firefox 44 for developers - Mozilla | MDN". Retrieved March 9, 2016.
  30. ↑ "Firefox — Notes (45.0) — Mozilla". Retrieved March 9, 2016.
  31. ↑ "Web Speech API - Web APIs | MDN". Retrieved March 9, 2016.

External links

This article is issued from Wikipedia - version of the 8/8/2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.