HTML audio: Difference between revisions

Revision as of 15:34, 25 November 2024

Latest revision as of 20:14, 27 August 2025

(14 intermediate revisions by 14 users not shown)

Line 1:

{{Short description|HTML element}}

'''HTML audio''' is a subject of the [[HTML]] specification, incorporating audio input, playback, and synthesis, as well as [[speechincluding recognition|speech to text]], all in the browser.

== <audio> 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 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 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}}

|}

== Web Audio API and MediaStream Processing API ==

The Web Audio API specification developed by [[W3C]] describes a high-level JavaScript API for processing and synthesi10zingsynthesizing 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.<ref>{{Cite web |url=https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html |title=Web Audio API |author=Chris Rogers |date=2012-03-15 |publisher=[[W3C]] |archive-url=https://web.archive.org/web/20120720115514/https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html |archive-date=2012-07-20 |access-date=2012-07-04 |url-status=bot: unknown }}</ref>

[[Firefox 4|Mozilla's Firefox browser]] implements a similar Audio Data API extension since version 4, implemented in 2010 <ref>{{Cite web | url=https://wiki.mozilla.org/Audio_Data_API | title=Audio Data API}}</ref> and released in 2011, but Mozilla warns it is non-standard and deprecated, and recommends the Web Audio API instead.<ref>{{Cite web |url=https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension |title=Introducing the Audio API extension |date=2012-03-05 |work=[[Mozilla Developer Network]] |publisher=[[Mozilla]] |archive-url=https://web.archive.org/web/20120505042746/https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension |archive-date=2012-05-05 |access-date=2012-07-04 |url-status=dead }}</ref>

Line 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 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 146 ⟶ 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]]