Neueste Web-Entwicklung Tutorials

HTML5 Audio


HTML5 bietet einen Standard für Audio-Dateien.

HTML5 Audio ist ein Gegenstand der HTML5-Spezifikation, Audio-Eingang enthält, Wiedergabe und Synthese sowie Sprache in Text, in dem Browser.


Audio im Web

Vor HTML5, gab es keinen Standard für die Wiedergabe von Audio-Dateien auf einer Webseite.

Bevor HTML5 könnten Audio - Dateien nur mit einem Plug-in gespielt werden (like flash) .

Die HTML5 <audio> -Element gibt ein Standard - Audio in einer Webseite einbetten.


Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser - Version, die das voll unterstützt <audio> Element.

Element
<audio> 4.0 9.0 3.5 4.0 10.5

Die HTML <audio> Element

Um eine Audiodatei in HTML zu spielen, verwenden Sie das <audio> Element:

Beispiel

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Versuch es selber "

Das <audio> -Element stellt einen Ton oder einen Audio-Stream. Es wird allgemein zur Wiedergabe eine einzelne Audiodatei auf einer Webseite, zeigt einen GUI-Widget mit Play / Pause / Lautstärkeregler verwendet.

Das <audio> -Element hat diese Attribute:

globale Attribute (accesskey; Klasse; contenteditable; contextmenu; dir; ziehbar; Dropzone; hidden; id; lang, Rechtschreibprüfung, Stil, tabindex, Titel, übersetzen)

Autoplay = „Automatische Wiedergabe“ oder „“ (leere Zeichenkette) oder leer Weist die User-Agenten automatisch die Wiedergabe des Audiostreams zu beginnen, sobald es so, ohne zu stoppen tun können.

Vorspannung = „none“ oder „Metadaten“ oder „Auto“ oder „“ (leere Zeichenkette) oder leer Stellt einen Hinweis auf den User-Agenten, ob optimistisch Herunterladen der Audio-Stream selbst oder seine Metadaten sinnvoll betrachtet.

„None“: Hinweise zu den User-Agenten, dass der Benutzer nicht den Audio-Stream müssen, ist zu erwarten, oder dass unnötiger Verkehr minimiert wünschenswert ist.

„Metadaten“: Hinweise zu den User-Agent, dass der Benutzer nicht den Audio-Stream müssen, ist zu erwarten, aber das Abrufen seiner Metadaten (Dauer usw.) ist wünschenswert.

„Auto“: Hinweise zu den User-Agent, der optimistisch den gesamten Audio-Stream Download wird als wünschenswert angesehen.

Kontrollen = „Kontrollen“ oder „“ (leere Zeichenkette) oder leer Weist die User-Agenten eine Benutzerschnittstelle zur Steuerung der Wiedergabe des Audio-Streams zu belichten.

loop = „Schleife“ oder „“ (leere Zeichenkette) oder leer Weist den User-Agent zu Beginn des Audio-Stream zu suchen wieder das Ende bei Erreichen. mediagroup = string Weist den User-Agent zusammen mehrere Videos und / oder Audiostreams zu verknüpfen.

stumm geschaltet = „stumm geschaltet“ oder „“ (leere Zeichenkette) oder leer Stellt den Standardzustand des Audio-Stream, möglicherweise Benutzereinstellungen überschreiben. src = nicht-leere [URL] möglicherweise durch Leerzeichen die URL für den Audio-Stream umgeben.


HTML Audio - Wie es funktioniert

Die controls Attribut fügt Audio - Steuerelemente, wie Wiedergabe, Pause und Lautstärke.

Text zwischen dem <audio> und </audio> Tags werden in Browsern angezeigt werden, die nicht das unterstützen <audio> Element.

Mehrere <source> Elemente können auf verschiedene Audio-Dateien verknüpfen. Der Browser wird das erste anerkannte Format verwenden.


HTML Audio - Browser-Unterstützung

Derzeit gibt es drei unterstützte Dateiformate für das <audio> Element: MP3, WAV und Ogg:

Browser MP3 wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Audio - Medientypen

Datei Format Medientyp
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML Audio - Methoden, Eigenschaften und Ereignisse

HTML5 definiert DOM - Methoden, Eigenschaften und Ereignisse für das <audio> Element.

Auf diese Weise können Sie laden, abspielen und pausieren Audios, sowie festgelegte Dauer und Volumen.

Es gibt auch DOM-Ereignisse, die Sie benachrichtigen können, wenn ein Audio zu spielen beginnt, pausiert, usw.

Für eine vollständige DOM - Referenz, gehen Sie auf unsere HTML5 Audio / Video DOM Referenz .


HTML5 Audio Tags

Etikett Beschreibung
<audio> Definiert Tonin
<source> Definiert mehrere Medienressourcen für die Medienelemente wie <video> und <audio>

HTML Audio - Web Speech API

Die Web Speech API zielt darauf ab, eine alternative Eingabemethode für Web-Anwendungen zur Verfügung zu stellen (ohne Tastatur). Mit dieser API können Entwickler Web-Apps geben die Möglichkeit, Stimme zu Text transkribieren, vom Mikrofon des Computers. Das aufgezeichnete Audiosignal wird auf Sprachserver für die Transkription gesendet, wonach der Text für den Benutzer eingegeben werden. Die API selbst ist Agnostiker der zugrunde liegenden Spracherkennung Implementierung und kann sowohl Server-basierte als auch Embedded-Erkenner unterstützen. Die HTML Speech Incubator Gruppe hat die Umsetzung von Audio-Sprachtechnologie in Browsern in Form einheitlicher, plattformübergreifende APIs vorgeschlagen. Das API enthält sowohl:

  • Spracheingabe API
  • Text-to-Speech-API