Content deleted Content added
Sonixrulerz (talk | contribs) |
m Reverted 1 edit by 178.240.56.119 (talk) to last revision by 96.40.152.201 |
||
| (46 intermediate revisions by 36 users not shown) | |||
Line 1:
{{Short description|HTML element}}
'''
▲'''HTML5 Audio''' is a subject of the [[HTML5]] specification, incorporating audio input, playback, and synthesis, as well as [[speech recognition|speech to text]], in the browser.
== <audio> element ==
The {{
The {{
* 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 20 ⟶ 18:
* src = non-empty [URL] potentially surrounded by spaces<br />The URL for the audio stream.
Example:
=== Supporting browsers ===
On PC:
*
*
* Firefox 3.5
*
* Safari 3.1
On mobile devices:
*
*
*
*
* Safari 4
*
*
== Supported audio coding formats ==
The adoption of
[[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.
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 | MDN|website=developer.mozilla.org}}</ref>
Line 85 ⟶ 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}} || {{
|-
| [[Core Audio Format|CAF]] || audio/x-caf || {{no}} || {{no}} || {{no}} || {{no}} || {{no}} || {{yes|Yes, in Safari 11 and [[macOS High Sierra]]}}
|-
! 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 <audio> 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 127 ⟶ 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 134 ⟶ 123:
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="
<script type="application/javascript">
function startSearch(event) {
Line 146 ⟶ 135:
=== Supporting browsers ===
* [[Safari (web browser)|Safari]]
* [[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;
== See also ==
* [[
* [[Use of Ogg formats in HTML5]]
Line 168 ⟶ 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]
[[Category:HTML5]]
| |||