HTML audio: Difference between revisions

Revision as of 02:58, 11 July 2024

Latest revision as of 20:14, 27 August 2025

(22 intermediate revisions by 20 users not shown)

Line 1:

{{Short description|HTML element}}

<ref name="safari_html5">{{Cite web |title=Resources – Safari |url=https://developer.apple.com/safari/resources/ |access-date=2022-11-18 |website=Apple Developer |language=en}}</ref>'''HTML audio''' is a subject of the [[HTML]] specification, incorporating audio input, playback,including speech andto synthesistext, all in the browser.

== &lt;audio&gt; element ==

The {{tag|audio|o}} 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 {{tag|audio|o}} element has these attributes: the music

* global attributes (accesskey; class; contenteditable; contextmenu; dir; draggable; dropzone; hidden; id; lang; spellcheck; style; tabindex; title; translate)

* autoplay = "autoplay" or "" (empty string) or empty<br />Instructs the User-Agent to automatically begin playback of the audio stream as soon as it can do so without stopping.

Line 26:

* Firefox 3.5

* Opera 10.5

* Google

* Safari 3.1

On mobile devices:

Line 42 ⟶ 41:

[[Apple Inc.|Apple]] and [[Microsoft]] support the [[International Organization for Standardization|ISO]]/[[International Electrotechnical Commission|IEC]]-[[technical standard|defined]] formats [[Advanced Audio Coding|AAC]] and the older [[MP3]]. [[Mozilla]] and [[Opera Software|Opera]] support the free and [[Open-source software|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.<ref>{{Cite webcn|titledate=TechFans.netAugust – Technology and Business News blog|url=https://www.techfans.net/|access-date=2022-11-18|website=TechFans.net|language=en-US2024}}</ref> 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.<ref>{{Cite web|title=MP4 container · Issue #95 · karlheyes/icecast-kh|url=https://github.com/karlheyes/icecast-kh/issues/95|access-date=2022-11-18|website=GitHub|language=en}}</ref><ref name="developer.apple.com">{{Cite web|url=https://developer.apple.com/library/ios/technotes/tn2236/_index.html#//apple_ref/doc/uid/DTS40008748-CH1-SECTION5|title = Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC)}}</ref><ref>{{Cite web|url=https://bugzilla.mozilla.org/show_bug.cgi?id=1224887|title = 1224887 – Implement OpenMax IL AAC audio decoding client}}</ref>

Many browsers also support uncompressed [[PCM]] audio in a [[WAV]]E container.<ref name="auto">{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Media/Formats|title=Media type and format guide: image, audio, and video content – Web media technologies &#124; MDN|website=developer.mozilla.org}}</ref>

Line 75 ⟶ 74:

|-

! scope="row" rowspan="2"| [[Vorbis]]

| [[Ogg]] || audio/ogg || {{yes|Yes, in v9}} || {{no}} || {{Yes|In v79<ref name="Edge-Vorbis">{{Cite web | url=https://developer.microsoft.com/en-us/microsoft-edge/status/vorbisaudiocodec/ | title=Platform Status – Microsoft Edge Developer | access-date=2020-05-11 | archive-date=2021-02-27 | archive-url=https://web.archive.org/web/20210227033022/https://developer.microsoft.com/en-us/microsoft-edge/status/vorbisaudiocodec/ | url-status=dead }}</ref><br />In v17, with Web Media Extensions<ref name="Edge-MediaExt">{{Cite web |url=https://blogs.windows.com/msedgedev/2017/12/05/introducing-web-media-extension-package-ogg-vorbis-theora-support/ |title=Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge |date=December 5, 2017 |website=Microsoft Edge Dev Blog |publisher=[[Microsoft]] }}</ref>}} || {{yes|Yes, in v3.5}}<ref name="firefox_html5">{{Cite web|url=https://website-archive.mozilla.org/www.mozilla.org/firefox_releasenotes/en-us/firefox/3.5/releasenotes/|title = Firefox Notes - Desktop}}</ref> || {{yes|Yes, in v10.50}} || {{Partial|With [[Xiph QuickTime Components]] ([[OS X El Capitan|macOS 10.11]] and earlier)}}

|-

| [[WebM Project|WebM]] || audio/webm || {{yes}} || {{no}} || {{Yes|In v79<ref name="Edge-Vorbis" /><br />In v17, with Web Media Extensions<ref name="Edge-MediaExt" />}} || {{yes|Yes, in v4.0}}<ref>{{Cite web|url=https://website-archive.mozilla.org/www.mozilla.org/firefox_releasenotes/en-us/firefox/4.0/releasenotes/|title = Firefox Notes - Desktop}}</ref> || {{yes|Yes, in v10.60}} || {{no}}

|-

! scope="row" rowspan="3"| [[Opus (audio format)|Opus]]

| [[Ogg]] || audio/ogg || {{yes|Yes, in v25<br />(in v31 for Windows)}} || {{no}} || {{Yes|In v79<ref name="Edge-Opus">{{Cite web|url=https://developer.microsoft.com/en-us/microsoft-edge/status/opusaudioplayback/|title=Platform Status – Microsoft Edge Developer|website=developer.microsoft.com|access-date=2020-05-11|archive-date=2021-02-27|archive-url=https://web.archive.org/web/20210227034744/https://developer.microsoft.com/en-us/microsoft-edge/status/opusaudioplayback/|url-status=dead}}</ref><br />In v17, with Web Media Extensions<ref name="Edge-MediaExt" />}} || {{yes|Yes, in v15.0}}<ref>{{Cite web|url=https://website-archive.mozilla.org/www.mozilla.org/firefox_releasenotes/en-us/firefox/15.0/releasenotes/|title = Firefox Notes - Desktop}}</ref> || {{yes|Yes, in v14}} || {{no}}

|-

| [[WebM Project|WebM]] || audio/webm || {{yes}} || {{no}} || {{Yes|In v79<ref name="Edge-Opus" /><br />In v17, with Web Media Extensions<ref name="Edge-MediaExt" />}} || {{yes|Yes, in v28.0}}<ref>{{Cite web|url=https://www.mozilla.org/en-US/firefox/28.0/releasenotes/|title = Firefox 28.0, See All New Features, Updates and Fixes}}</ref> || {{yes}} || {{yes|Yes, in Safari 15+ and [[macOS Monterey]]}}<ref>{{Cite web|url=https://webkit.org/blog/11989/new-webkit-features-in-safari-15/|title=New WebKit Features in Safari 15|first=Jen|last=Simmons|date=October 26, 2021}}</ref><ref>{{Cite web|url=https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes|title=Apple Developer Documentation|website=developer.apple.com}}</ref>

Line 87 ⟶ 86:

|-

! scope="row" rowspan="2" | [[FLAC]]

| [[FLAC]] || audio/flac || {{yes|Yes, in v56}}<ref name="FLAC-lac">{{Cite web |url=https://www.chromestatus.com/features/5744731434778624 |title=FLAC codec support for &lt;audio&gt; and WebAudio |website=Chrome Platform Status |access-date=2016-12-27 }}</ref> || {{no}} || {{yes|Yes, in v16}}<ref name="Edge-FLAC">{{Cite web|url=https://developer.microsoft.com/en-us/microsoft-edge/status/flacaudiocodec/|title=Platform Status – Microsoft Edge Developer|website=developer.microsoft.com|access-date=2020-05-11|archive-date=2021-02-27|archive-url=https://web.archive.org/web/20210227043710/https://developer.microsoft.com/en-us/microsoft-edge/status/flacaudiocodec/|url-status=dead}}</ref> || {{yes|Yes, in v51}}<ref name="FLAC-lac2">{{Cite web |url=https://developer.mozilla.org/en-US/Firefox/Releases/51 |title=Firefox 51 for developers |website=Mozilla Developer Network |access-date=2016-12-27 }}</ref> || {{yes}} || {{yes|Yes, in v11}}<ref>{{Cite web |url=https://www.theverge.com/2017/6/6/15747518/apple-flac-lossless-audio-compressed-alac-ios-11 |title=Apple reportedly adds support for FLAC lossless audio in iOS 11 |author=Chaim Gartenberg |date=June 6, 2017 |website=The Verge }}</ref>

|-

| [[Ogg]] || audio/ogg || {{yes|Yes, in v56}}<ref name="FLAC-lac" /> || {{no}} || {{Yes|In v79<ref name="Edge-Ogg">{{Cite web | url=https://developer.microsoft.com/en-us/microsoft-edge/status/oggcontainer/ | title=Platform Status – Microsoft Edge Developer | access-date=2020-05-11 | archive-date=2021-02-27 | archive-url=https://web.archive.org/web/20210227042630/https://developer.microsoft.com/en-us/microsoft-edge/status/oggcontainer/ | url-status=dead }}</ref><br />In v17, with Web Media Extensions<ref name="Edge-MediaExt" />}} || {{yes|Yes, in v51}}<ref name="FLAC-lac2" /> || {{yes}} || {{no}}

|}

Line 117 ⟶ 116:

== 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.<ref>{{Cite web | url=http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html#introduction | title=API draft | access-date=January 28, 2012}}</ref>

The '''HTML Speech Incubator group''' has proposed the implementation of audio-speech technology in browsers in the form of uniform, [[Cross-platform software|cross-platform]] APIs. The API contains both:<ref>{{Cite web | url=https://wiki.mozilla.org/HTML5_Speech_API | title=HTML5 Speech API | access-date=January 28, 2012}}</ref>

* Speech Input API

Line 123 ⟶ 122:

Google integrated this feature into Google Chrome in March 2011.<ref>{{Cite web | url=http://chrome.blogspot.com/2011/03/talking-to-your-computer-with-html5.html | title=Talking to your computer | access-date=January 28, 2012}}</ref> Letting its users search the web with their voice with code like:

<syntaxhighlight lang="html">

<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>

</syntaxhighlight>

=== Supporting browsers ===

* [[Safari (web browser)|Safari]] 14.1 and up <ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API|title=Web Speech API – Web APIs &#124; MDN|access-date=May 20, 2024}}</ref>

* [[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]<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/49|title=Firefox 49 for developers – Mozilla &#124; MDN|access-date=May 20, 2024}}</ref><ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API|title=Web Speech API – Web APIs &#124; MDN|access-date=May 20, 2024}}</ref>

== See also ==

Line 147 ⟶ 157:

* [https://github.com/rserota/wad Web Audio DAW – GitHub]

* [https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Mozilla's Web Audio API]

{{Web interfaces}}

[[Category:HTML5]]