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 Probleme und deren 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 und vieles mehr.

Sie können das <object> oder <embed>-Tag verwenden, um Plugins in die HTML-Seite hinzuzufügen.

Diese Tags definieren Container für Ressourcen (normalerweise nicht HTML-Ressourcen), die je nach Typ sowohl vom Browser als auch von externen Plugins angezeigt werden.

Verwenden Sie das <embed> Element

Das <embed>-Tag definiert ein Container für externe (nicht HTML) Inhalte. (Dies ist ein HTML5-Tag, der in HTML4 ungültig ist, aber in allen Browsern funktionsfähig ist).

Der folgende Code-Abschnitt kann das in der Webseite eingebettete MP3-Datei anzeigen:

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.
  • 不同的浏览器对音频格式的支持也不同。
  • Wenn der Browser das Dateiformat nicht unterstützt und kein Plugin installiert ist, kann die Audio-Datei nicht abgespielt werden.
  • Wenn auf dem Computer des Benutzers kein Plugin installiert ist, kann die Audio-Datei nicht abgespielt werden.
  • Wenn die Datei in ein anderes Format konvertiert wird, kann sie immer noch nicht in allen Browsern abgespielt werden.

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

Verwenden Sie das <object> Element

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

Der folgende Code-Abschnitt kann das in der Webseite eingebettete MP3-Datei anzeigen:

Beispiel

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

Probieren Sie es selbst aus

Frage:

  • 不同的浏览器对音频格式的支持也不同。
  • Wenn der Browser das Dateiformat nicht unterstützt und kein Plugin installiert ist, kann die Audio-Datei nicht abgespielt werden.
  • Wenn auf dem Computer des Benutzers kein Plugin installiert ist, kann die Audio-Datei nicht abgespielt werden.
  • Wenn die Datei in ein anderes Format konvertiert wird, kann sie immer noch nicht in allen Browsern abgespielt werden.

Verwenden Sie das HTML5 <audio>-Element

Das <audio>-Element ist ein HTML5-Element, das in HTML 4 ungültig ist, aber in allen Browsern funktionsfähig ist.

Beispiel

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Ihr Browser unterstützt diesen Audio-Format nicht.
</audio>

Probieren Sie es selbst aus

Der obige Beispiel verwendet eine mp3-Datei, sodass sie in Internet Explorer, Chrome und Safari funktionsfähig ist.

Um dieses Audio in Firefox und Opera ebenfalls funktionsfähig zu machen, 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 Audiodatei 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. Failschlägt dies, wird der Code versuchen, 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.

Die einfachste Methode, Audio zu einer Webseite hinzuzufügen

Wie einfach ist es, Audio zu einer Webseite hinzuzufügen?

Yahoo Media Player ist sicherlich einer davon.

Die Nutzung des Yahoo Media Players ist ein anderer Weg. Sie müssen nur Yahoo die Aufgabe des Musikabspiels überlassen.

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

Yahoo Media Player

Beispiel

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

Probieren Sie es selbst aus

Die Nutzung des Yahoo Players ist kostenlos. Um ihn zu verwenden, müssen Sie diesen JavaScript-Code am Ende Ihrer Webseite einfügen:

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

Dann fügen Sie einfach die MP3-Dateilinks in Ihre HTML-Seite ein, und JavaScript erstellt automatisch Play-Buttons für jedes Lied:

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

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

Bitte beachten Sie, dass dieser Player immer am unteren Rand des Fensters befestigt ist. 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 Codeausschnitt 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 als Teil der Webseite verwenden, werden sie als Inline-Töne bezeichnet.

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

Unser bestes 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.