HTML5 -Audio

"Audio -Tag" leitet hier weiter. Für Metadaten, die digitales Audio beschreiben, siehe Metadaten § Digitale Musik.

HTML5 -Audio ist ein Thema der HTML5 Spezifikation, Einbeziehung von Audioeingaben, Wiedergabe und Synthese, ebenso gut wie Rede zum Textim Browser.

Das <DIO> -Element repräsentiert einen Ton oder einen Audio -Stream.[1] Es wird häufig verwendet, um eine einzige Audiodatei innerhalb einer Webseite zurückzuspielen, in der ein GUI -Widget mit Play-/Pause/Volumensteuerung angezeigt wird.

Das Element <DIO> enthält folgende Attribute:

  • Globale Attribute (AccessKey; Klasse; intentiert; Kontextmenu; Dir; Draggable; Dropzone; versteckt; id; Lang; Spellscheck; Style; Tabindex; Titel; übersetzen)
  • autoplay = "autoplay" oder "" (leerer Zeichenfolge) oder leer
    Weisen Sie den Benutzer-Agent an, automatisch mit der Wiedergabe des Audio-Streams zu beginnen, sobald er dies kann, ohne zu stoppen.
  • PRELOAD = "Keine" oder "Metadaten" oder "Auto" oder "" (leere Zeichenfolge) oder leer
    Repräsentiert einen Hinweis auf den Benutzer-Agent darüber, ob ein optimistisches Herunterladen des Audio-Streams selbst oder seiner Metadaten als lohnend angesehen wird.
    • "None": Hinweise auf den Benutzer-Agent, dass der Benutzer nicht erwartet wird, dass der Audiostrom benötigt wird oder dass ein minimierter Datenverkehr wünschenswert ist.
    • "Metadaten": Hinweise auf den Benutzer-Agent, dass der Benutzer nicht erwartet wird, dass der Audio-Stream seine Metadaten (Dauer usw.) holt, ist wünschenswert.
    • "Auto": Hinweise auf den Benutzer-Agent, dass das optimistische Herunterladen des gesamten Audio-Streams als wünschenswert angesehen wird.
  • Steuerelemente = "Steuerelemente" oder "" (leere Zeichenfolge) oder leer
    Weisen Sie die Benutzeragent an, eine Benutzeroberfläche für die Steuerung der Wiedergabe des Audiostroms aufzudecken.
  • Loop = "Loop" oder "" (leere Zeichenfolge) oder leer
    Weisen Sie den Benutzer-Agent an, beim Erreichen des Endes zum Beginn des Audiostroms zurückzukehren.
  • MediaGroup = String
    Weisen Sie den Benutzer-Agent an, mehrere Videos und/oder Audio-Streams miteinander zu verknüpfen.
  • gedämpft = "gedämpft" oder "" (leere Zeichenfolge) oder leer
    Repräsentiert den Standardzustand des Audiostroms, potenziell überschreibende Benutzerpräferenzen.
  • src = nicht leeres [url] möglicherweise von Räumen umgeben
    Die URL für den Audiostrom.

Beispiel:[2] 

<Audio- Kontrollen>  <Quelle src="https://media.w3.org/2010/07/bunny/04-death_becomes_fur.mp4" Typ="Audio/MP4" />  <Quelle src="https://media.w3.org/2010/07/bunny/04-death_becomes_fur.oga" Typ="audio/ogg; codecs = vorbis" />  <p>Ihr Benutzeragenten unterstützt das HTML5 -Audioelement nicht.p> Audio->

Unterstützende Browser

Auf dem PC:

Auf mobilen Geräten:

Unterstützte Audio -Codierungsformate

Die Einführung von HTML5 -Audio, wie bei HTML5 -Video, ist zwischen Befürwortern von polarisiert geworden frei und patentiert Formate. Im Jahr 2007 die Empfehlung zu verwenden Vorbis war zurückgezogen aus der Spezifikation durch die W3c zusammen damit zu verwenden Ogg Theoraunter Berufung auf das Fehlen eines Formats, das von allen wichtigen Browser -Anbietern akzeptiert wird.

Apfel und Microsoft unterstütz die ISO/IEC-definiert Formate AAC und die älter MP3. Mozilla und Oper Unterstützen Sie die freie und offen, Gebührenfrei Vorbis Format in Ogg und Webm Behälter und kritisieren die Patentnotiz von MP3 und AAC, die garantiert „nicht frei“ sind. Google hat bisher Unterstützung für alle gemeinsamen Formate geliefert.

Die meisten AAC-Dateien mit endlicher Länge sind in einen MPEG-4-Container (.MP4, .M4A) eingewickelt, der im Internet Explorer, Safari und Chrome nativ unterstützt und vom Betriebssystem in Firefox und Opera unterstützt wird.[4] Die meisten AAC -Live -Streams mit unendlicher Länge sind in einen Audio -Datentransport -Stream -Container (.aac, .Ats) eingewickelt, der von Chrome, Safari, Firefox und Edge unterstützt wird.[5][6][7]

Viele Browser unterstützen auch unkomprimiert PCM Audio in a WaveE Behälter.[8]

2012 die freie und offene Lizenzfreiheit im Jahr 2012 Opus Das Format wurde freigegeben und standardisiert durch Ietf. Es wird von Mozilla, Google, Opera und Edge unterstützt.[9][10][11][12]

Diese Tabelle dokumentiert die aktuelle Unterstützung für Audio -Codierungsformate bis zum Element.

Formate, die von verschiedenen Webbrowsern unterstützt werden
Format Container Mime Typ Chrom Internet Explorer Rand Feuerfuchs Oper Safari
PCM Wave Audio/WAV Ja Nein Ja Ja, in v3.5 Ja, in v11.00 Ja, in v3.1
MP3 MP3 Audio/MPEG Ja[13] Ja in Dh9 Ja Ja, in V71[14] Ja[13] Ja, in v3.1
AAC MP4 Audio/MP4 Ja Ja in Dh9 Ja Aus os[a] Ja Ja
Adts[b] Audio/AAC
Audio/AACP		 Ja Nein Ja Aus os[a] in v45.0 Ja Ja
Vorbis Ogg Audio/Ogg Ja, in v9 Nein In V79[16]
In V17 mit Webmedienerweiterungen[17] 		Ja, in v3.5 Ja, in V10.50 Mit XIPH QuickTime -Komponenten (macOS 10.11 und früher)
Webm Audio/Webm Ja Nein In V79[16]
In V17 mit Webmedienerweiterungen[17] 		Ja, in v4.0 Ja, in v10.60 Nein
Opus Ogg Audio/Ogg Ja, in v25
(in v31 für Windows)		 Nein In V79[18]
In V17 mit Webmedienerweiterungen[17] 		Ja, in v15.0 Ja, in V14 Nein
Webm Audio/Webm Ja Nein In V79[18]
In V17 mit Webmedienerweiterungen[17] 		Ja, in v28.0[19] Ja Nein
CAF Audio/X-CAF Nein Nein Nein Nein Nein Ja, in Safari 11 und MacOS High Sierra
Flac Flac Audio/Flac Ja, in v56[20] Nein Ja, in v16[21] Ja, in v51[22] Ja Ja, in v11[23]
Ogg Audio/Ogg Ja, in v56[20] Nein In V79[24]
In V17 mit Webmedienerweiterungen[17] 		Ja, in v51[22] Ja Nein

Web -Audio -API und Medienstream -Verarbeitungs -API

Die Web -Audio -API -Spezifikation wurde von entwickelt von W3c Beschreibt eine hochrangige JavaScript-API zur Verarbeitung und Synthese von Audio in Webanwendungen. Das primäre Paradigma besteht aus einem Audio -Routing -Diagramm, in dem eine Reihe von Audionode -Objekten miteinander verbunden sind, um das allgemeine Audio -Rendering zu definieren. Die tatsächliche Verarbeitung erfolgt hauptsächlich in der zugrunde liegenden Implementierung (typischerweise optimierte Montage / C / C ++ - Code), aber auch die direkte JavaScript -Verarbeitung und -synthese wird unterstützt.[25]

Mozillas Firefox -Browser Implementiert eine ähnliche API -Erweiterung der Audio -Daten seit Version 4, die 2010 implementiert wurde [26] und Mozilla warnt nicht standardmäßig und veraltet und empfiehlt stattdessen die Web-Audio-API.[27] Einige JavaScript -Audioverarbeitungs- und Synthesebibliotheken wie z. Audiolett Unterstützen Sie beide APIs.

Das W3C Audio -Arbeitsgruppe überlegt auch die Medienstream -Verarbeitungs -API Spezifikation entwickelt von Mozilla.[28] Zusätzlich zum Audio -Mischen und -verarbeitung deckt es mehr allgemeines Medienstreaming ab, einschließlich der Synchronisation mit HTML -Elementen, Erfassung von Audio- und Video -Streams und Peer-to-Peer-Routing solcher Medienströme.[29]

Unterstützende Browser

Auf dem PC:

Auf mobilen Geräten:

  • Google Chrome für Android 28 (standardmäßig seit 29 aktiviert)
  • Safari 6 (hat Einschränkungen bei der Verwendung (gedämpft, sofern der Benutzer genannt)))
  • Feuerfuchs 23 (standardmäßig aktiviert seit 25)
  • Tizen

Web -Sprach -API

Das Web -Sprach -API Ziel ist es, eine alternative Eingabemethode für Webanwendungen bereitzustellen (ohne eine Tastatur). Mit dieser API können Entwickler Web -Apps die Möglichkeit geben, Voice aus dem Mikrofon des Computers auf Text zu transkribieren. Der aufgezeichnete Audio wird zur Transkription an Sprachserver gesendet, wonach der Text für den Benutzer eingegeben wird. Die API selbst ist agnostisch für die zugrunde liegende Redenerkennungsimplementierung und kann sowohl serverbasierte als auch eingebettete Erkenner unterstützen.[32] Das HTML -Sprachinkubatorgruppe hat die Implementierung der Audio-Speech-Technologie in Browsern in Form eines einheitlichen plattformübergreifenden APIs vorgeschlagen. Die API enthält beide:[33]

  • Spracheingabe -API
  • Text zur Sprachapi

Google hat diese Funktion im März 2011 in Google Chrome integriert.[34] Lassen Sie seine Benutzer das Web mit ihrer Stimme mit Code wie folgt durchsuchen:

<Skript Typ="Anwendung/JavaScript">  Funktion Suche starten(Veranstaltung) {  Veranstaltung.Ziel.bilden.einreichen();  } Skript> <bilden Aktion="http://www.google.com/search">  <Eingang Typ="Suche" Name="q" Rede erforderlich OnSpeechChange="Suche starten"> bilden>

Unterstützende Browser

  • Safari 6.1 und up [partiell: nur Sprachsynthese; Keine Anerkennung]
  • Google Chrome 25 und up
  • Feuerfuchs Desktop 44.0 und UP (Linux und Mac) / 45.0 und UP (Windows) [partiell: Sprachsynthese; Keine Anerkennung; Derzeit benötigt "media.webSpeech.recognition.enable" über: Konfigurationsoption, um manuell in "True" zu ändern.[35][36][37]

Siehe auch

Anmerkungen

  1. ^ a b Der AAC -Codec wird aus Lizenzgründen keine native Unterstützung für den AAC -Codec gibt. Nach Dekodierung von Audiodateien muss das Host -Betriebssystem eine kompatible Bibliothek bereitstellen.[15]
  2. ^ Eine MPEG-4-Datei enthält einen Header, der enthält Metadaten Gefolgt von "Tracks", die sowohl Video als auch Audiodaten enthalten können, z. ADTS dagegen ist ein Streaming -Format, das aus einer Reihe von Frames besteht, wobei jeder Rahmen einen Header mit gefolgtem AAC -Daten mit einem Kopfzeile hat.[6]

Verweise

  1. ^ "HTML5 -Audioelement - W3C". Archiviert von das Original Am 2013-06-06. Abgerufen 2013-07-02.
  2. ^ "Das Einbettungs -Audioelement - HTML: Hypertext Markup Language | Mdn".
  3. ^ a b Über HTML5 Audio und Video - Safari HTML5 Audio- und Videohandbuch
  4. ^ Ist es möglich, diesen Stream mit HTML5/JavaScript abzuspielen?
  5. ^ MP4 Container · Ausgabe #95 · Karlheyes/ICECAST-KH · GitHub
  6. ^ a b "Technischer Hinweis TN2236: Hocheffizientes erweiterte Audiocodierung (HE-AAC)".
  7. ^ "1224887 - Implementieren Sie OpenMax IL AAC Audio Decoding Client".
  8. ^ "Medientyp und Formathandbuch: Bild, Audio und Videoinhalte - Web Media Technologies | MDN".
  9. ^ "Medientyp und Formathandbuch: Bild, Audio und Videoinhalte - Web Media Technologies | MDN".
  10. ^ "11. September 2012: OPUS Audio Codec ist jetzt RFC6716, OPUS 1.0.1 Referenzquelle veröffentlicht".
  11. ^ "Es ist Opus, es rockt und jetzt ist es ein Audio -Codec -Standard! - Mozilla Hacks - der Webentwickler -Blog".
  12. ^ "Webm, VP9 und OPUS -Unterstützung in Microsoft Edge - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog". blogs.windows.com. 18. April 2016. Abgerufen 2017-03-22.
  13. ^ a b "Aktivieren Sie die MP3 -Unterstützung in Chromium". Google. Abgerufen 2018-05-01.
  14. ^ "Firefox 71.0 Versionsnotizen". Mozilla. 3. Dezember 2019.
  15. ^ "Medientyp und Formathandbuch: Bild, Audio und Videoinhalte". Mozilla Developer Network. Mozilla. Abgerufen 2019-12-06.
  16. ^ a b "Plattformstatus - Microsoft Edge Developer".
  17. ^ a b c d e "Einführung des Web Media -Erweiterungspakets mit OGG Vorbis und Theora -Unterstützung für Microsoft Edge". Microsoft Edge Dev Blog. Microsoft. 5. Dezember 2017.
  18. ^ a b "Plattformstatus - Microsoft Edge Developer".
  19. ^ "Firefox 28.0, siehe alle neuen Funktionen, Updates und Korrekturen".
  20. ^ a b "FLAC -Codec -Unterstützung für <DIO> und Webaudio". Chrome -Plattformstatus. Abgerufen 2016-12-27.
  21. ^ "Plattformstatus - Microsoft Edge Developer".
  22. ^ a b "Firefox 51 für Entwickler". Mozilla Developer Network. Abgerufen 2016-12-27.
  23. ^ Chaim Gartenberg (6. Juni 2017). "Apple fügt Berichten zufolge in iOS 11 Unterstützung für FLAC Lustless Audio hinzu.". Der Verge.
  24. ^ "Plattformstatus - Microsoft Edge Developer".
  25. ^ Chris Rogers (2012-03-15). "Web -Audio -API". W3c. Archiviert von das Original Am 2012-03-15. Abgerufen 2012-07-04.
  26. ^ "Audio -Daten -API".
  27. ^ "Einführung der Audio -API -Erweiterung". Mozilla Developer Network. Mozilla. 2012-03-05. Archiviert von das Original Am 2014-01-16. Abgerufen 2012-07-04.
  28. ^ "Audioverarbeitungs -API". W3c. 2011-12-15. Archiviert von das Original Am 2011-12-15. Abgerufen 2012-07-04.
  29. ^ Robert O'Callahan (2012-05-31). "Medienstream -Verarbeitungs -API". W3c. Abgerufen 2012-07-04.
  30. ^ Web -Audio -API ist jetzt in Chrome verfügbar
  31. ^ Scott Gilbertson (2011-09-19). "Chrome 14 fügt ein besseres Audio hinzu, 'native Client' Support". Webmonkey. Verdrahtet. Abgerufen 2012-07-04.
  32. ^ "API -Entwurf". Abgerufen 28. Januar, 2012.
  33. ^ "HTML5 -Sprachapi". Abgerufen 28. Januar, 2012.
  34. ^ "Mit Ihrem Computer sprechen". Abgerufen 28. Januar, 2012.
  35. ^ "Firefox 44 für Entwickler - Mozilla | Mdn". Abgerufen 9. März, 2016.
  36. ^ "Firefox - Notizen (45,0) - Mozilla". Abgerufen 9. März, 2016.
  37. ^ "Web Speech -API - Web -APIs | Mdn". Abgerufen 9. März, 2016.

Externe Links