HTML-Audio

Es gibt viele Möglichkeiten, Audio in HTML abzuspielen.

Probleme, Probleme und Lösungen

Es ist nicht einfach, Audio in HTML abzuspielen!

Sie müssen viele Techniken beherrschen, um sicherzustellen, dass Ihre Audio-Dateien auf allen Browsern (Internet Explorer, Chrome, Firefox, Safari, Opera) und auf allen Hardwaren (PC, Mac, iPad, iPhone) abgespielt werden können.

In diesem Kapitel hat CodeW3C.com Fragen und Lösungen zusammengefasst.

Verwenden Sie Plugins

Browser-Plugins sind kleine Computerprogramme, die die Standardfunktionen des Browsers erweitern.

Plugins haben viele Anwendungen: Musik abspielen, Karten anzeigen, Bankkonten überprüfen, Eingaben steuern usw.

Man kann das <object> oder <embed>-Tag verwenden, um Plugins in eine HTML-Seite hinzuzufügen.

Diese Tags definieren Container für Ressourcen (normalerweise nicht HTML-Ressourcen), die entweder vom Browser angezeigt oder von einem externen Plugin angezeigt werden.

Verwenden Sie das <embed>-Element

Das <embed>-Tag definiert einen Container für externe (nicht HTML) Inhalte. (Es ist ein HTML5-Tag und ist in HTML4 ungültig, funktioniert aber in allen Browsern).

Der folgende Codeabschnitt zeigt, wie ein MP3-Datei in die Webseite eingebettet werden kann:

Beispiel

<embed height="100" width="100" src="song.mp3" />

Probieren Sie es selbst aus

Frage:

  • Das <embed>-Tag ist in HTML 4 ungültig. Die Seite kann nicht durch HTML 4 validiert werden.
  • Die verschiedenen Browser unterstützen Audioformate unterschiedlich.
  • Wenn der Browser das Dateiformat nicht unterstützt und kein Plugin installiert ist, kann das Audio nicht abgespielt werden.
  • Wenn das Plugin auf dem Computer des Benutzers nicht installiert ist, kann die Audio-Datei nicht abgespielt werden.
  • Wenn die Datei in ein anderes Format konvertiert wird, funktioniert sie immer noch nicht in allen Browsern.

Anmerkung:Verwenden Sie <!DOCTYPE html> (HTML5), um Validierungsprobleme zu lösen.

Verwenden Sie das <object>-Element

Das <object tag> kann auch ein Container für externe (nicht HTML) Inhalte definieren.

Der folgende Codeabschnitt zeigt, wie ein MP3-Datei in die Webseite eingebettet werden kann:

Beispiel

<object height="100" width="100" data="song.mp3"></object>

Probieren Sie es selbst aus

Frage:

  • Die verschiedenen Browser unterstützen Audioformate unterschiedlich.
  • Wenn der Browser das Dateiformat nicht unterstützt und kein Plugin installiert ist, kann das Audio nicht abgespielt werden.
  • Wenn das Plugin auf dem Computer des Benutzers nicht installiert ist, kann die Audio-Datei nicht abgespielt werden.
  • Wenn die Datei in ein anderes Format konvertiert wird, funktioniert sie immer noch nicht in allen Browsern.

Verwenden Sie das HTML5 <audio>-Element

Das <audio>-Element ist ein HTML5-Element und ist in HTML 4 ungültig, funktioniert aber in allen Browsern.

Beispiel

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Ihr Browser unterstützt dieses Audioformat nicht.
</audio>

Probieren Sie es selbst aus

Der obige Beispiel verwendet eine mp3-Datei, so dass sie in Internet Explorer, Chrome und Safari funktioniert.

Um sicherzustellen, dass dieses Audio in Firefox und Opera ebenfalls funktioniert, wurde eine Datei im ogg-Format hinzugefügt. Bei einem Fehler wird eine Fehlermeldung angezeigt.

Frage:

  • Das <audio>-Tag ist in HTML 4 ungültig. Ihre Seite kann nicht durch HTML 4 validiert werden.
  • Sie müssen die Audio-Datei in ein anderes Format konvertieren.
  • Das <audio>-Element funktioniert in alten Browsern nicht.

Anmerkung:Verwenden Sie <!DOCTYPE html> (HTML5), um Validierungsprobleme zu lösen.

Beste HTML-Lösung

Beispiel

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Probieren Sie es selbst aus

Der obige Beispiel verwendet zwei verschiedene Audioformate. Das HTML5 <audio>-Element versucht, Audio in mp3 oder ogg abzuspielen. Fails, versucht der Code, das <embed>-Element zu verwenden.

Frage:

  • Sie müssen das Audio in ein anderes Format konvertieren.
  • Das <audio>-Element kann nicht mit HTML 4 und XHTML validiert werden.
  • Das <embed>-Element kann nicht mit HTML 4 und XHTML validiert werden.
  • Das <embed>-Element kann nicht zurückgesetzt werden, um Fehlermeldungen anzuzeigen.

Anmerkung:Verwenden Sie <!DOCTYPE html> (HTML5), um Validierungsprobleme zu lösen.

Der einfachste Weg, Audio zu einer Webseite hinzuzufügen

Wie ist der einfachste Weg, Audio zu einer Webseite hinzuzufügen?

Yahoo Media Player ist definitiv einer davon.

Die Nutzung von Yahoo Media Player ist ein anderer Weg. Sie müssen nur Yahoo damit beauftragen, die Musik abzuspielen.

Er kann mp3 und eine Reihe anderer Formate abspielen. Mit einem einfachen Zeilencode können Sie ihn in die Webseite einfügen und die HTML-Seite in eine professionelle Wiedergabeliste umwandeln.

Yahoo Media Player

Beispiel

<a href="song.mp3">Klang abspielen</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Probieren Sie es selbst aus

Die Nutzung von Yahoo Media Player ist kostenlos. Um ihn zu verwenden, müssen Sie diesen JavaScript-Code am Ende der Webseite einfügen:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Dann müssen Sie nur den MP3-Dateilink in Ihre HTML-Seite einfügen, und JavaScript erstellt automatisch einen Abspielknopf für jedes Lied:

<a href="song1.mp3">Song 1 abspielen</a>
<a href="song2.mp3">Song 2 abspielen</a>
...
...
...

Yahoo Media Player bietet Ihren Benutzern einen kleinen Abspielknopf, nicht jedoch einen vollständigen Player. Klicken Sie jedoch auf diesen Knopf, und ein vollständiger Player wird geöffnet.

Beachten Sie, dass dieser Player immer im Fensterboden angezeigt wird. Klicken Sie darauf, um ihn herauszuziehen.

Verwenden Sie Hyperlinks

Wenn eine Webseite Hyperlinks zu Mediendateien enthält, verwenden die meisten Browser ein "Zusatzprogramm", um die Datei abzuspielen.

Der folgende Code-Abschnitt zeigt einen Link zu einer mp3-Datei. Wenn der Benutzer auf diesen Link klickt, startet der Browser ein "Zusatzprogramm", um die Datei abzuspielen:

Beispiel

<a href="song.mp3">Play the sound</a>

Probieren Sie es selbst aus

Inline-Töne

Wenn Sie Töne in einer Webseite enthalten oder sie als Teil der Webseite verwenden, werden sie als Inline-Töne bezeichnet.

Wenn Sie beabsichtigen, Inline-Töne in Web-Anwendungen zu verwenden, müssen Sie sich bewusst sein, dass viele Menschen Inline-Töne lästig finden. Beachten Sie auch, dass der Benutzer möglicherweise die Inline-Tonoption im Browser deaktiviert hat.

Unser bester Rat ist, sie nur dort zu verwenden, wo der Benutzer eine Inline-Tonwiedergabe wünscht. Ein positives Beispiel ist, wenn der Benutzer eine Aufnahme hören und auf einen Link klicken muss, öffnet sich eine Seite und die Aufnahme wird abgespielt.

HTML 4.01 Multimedia-Tags

Tag Beschreibung
<applet> Nicht empfohlen. Definieren Sie eingebettete Applets.
<embed> Nicht empfohlen in HTML4, erlaubt in HTML5. Definieren Sie eingebettete Objekte.
<object> Definieren Sie den eingebetteten Objekt.
<param> Definieren Sie die Parameter des Objekts.

HTML 5 Multimedia-Tags

Tag Beschreibung
<audio> Tags definieren Töne, wie Musik oder andere Audiostreams.
<embed> Tags definieren eingebettete Inhalte, wie Plugins.