MP3 mit HTML5

Open Source

MP3-Dateien mit HTML5 in Deine Homepage einbinden

MP3-Dateien mit HTML5 in Homepages einbinden

Kurzanleitung

Folgender Code muss dazu in Homepage eingebettet werden:

<!DOCTYPE HTML>

<audio autoplay preload controls loop>
       <source src="http://www.deine-site.ch/ordner/..../mp3/song.mp3">
       <source src="http://www.deine-site.ch/ordner/..../mp3/song.wav">
       <source src="http://www.deine-site.ch/ordner/..../mp3/song.ogg">
       Ihr Browser unterstützt dieses Audio-Format und HTML5 leider nicht.
</audio>

autoplay = automatisches Abspielen / preload = Vorladen des Songs / controls = Lautstärke / loop = Endlosschleife sollten selbsterklärend sein. Probier's aus, indem Du einen Befehl weglässt. Oder so:

Es gibt 3 Formate für das Audio-Element: MP3, OGG und WAV. Heute verstehen auch fast alle Browser MP3, so dass man die MP3-Dateien nicht mehr konvertiert zum Download anbieten muss. Die WAV-Dateien verstehen alle Browser, leider sind sie sehr gross, so dass sie kaum genutzt werden mit HTML5.

Programme, um das MP3-Format ins Ogg-Format zu wandeln, findest Du hier . Mein Favorit ist der Freemake Audio Converter!

Freemake Audio Converter

Auch gut ist die Freeware Audacity: https://www.audacityteam.org

So sah der Player des Firefox im 2018 aus (Bild-Muster):

Und so der vom Internet Explorer (Bild-Muster):

Ausführliche Anleitung

Über HTML5 ist es sehr einfach geworden, Audios in die eigene Website einzubinden. Dazu gibt es den neuen HTML5 Befehl <audio>. Die Browser der üblichen Hersteller unterstützen diesen Befehl seit den Browserversionen: Google Chrome seit 4.0 / IE seit Version 9.0 / Firefox seit Version 3.5 / Safari seit Version 4.0

Grundsätzlicher Aufbau

Attribute für Play-, Pausebutton und Lautstärkeregler

Unser HTML-Befehl <audio> kann (und sollte) noch mit Standardbedienelementen versehen werden, damit der Websitebesucher auch die entsprechende Kontrolle hat (und es vor allem die Audiowiedergabe pausieren kann, bevor es nervt). Der Play- und Pause-Button und der Lautstärkeregler werden dann über das Attribut "controls" automatisch im Browser angezeigt. Manchmal sieht man bei der Angabe für dieses Attribut auch die längere Form "controls="controls"" - funktioniert, ist aber länger.

Da es ein "neuer" HTML5 Befehl ist, gibt es natürlich sehr alte Browser, die diesen Befehl nicht verstehen. Daher können wir eine Textinformation für diese veralteten Browser mitgeben. Dieser Text wird innerhalb von unserem <audio>-Befehl integriert:

<audio controls>
Ihr Browser unterstützt dieses HTML5-Audioformat leider nicht.
</audio>

Attribut "autoplay"

Weitere Attribute bei Audio ist "autoplay". Es wird dadurch sofort nach dem Laden der Website die Wiedergabe der Sound-Datei gestartet. Das kann nett sein, aber oft genug nervt das den Besucher! Wenn mehrere Tabs im Browser geöffnet sind, wird es verwirrend, wenn aus einem der "Tabs" Musik gespielt wird und man gerade eine komplett andere Seite ansieht.

Daher also das Attribut "autoplay" mit Bedacht nutzen.

Attribut "loop"

Mit diesem Attribut wird das endlose Abspielen und Wiederholen der Audio-Datei aktiviert. Da bestehen gute Chancen, den Besucher früher oder später damit zu nerven!

Attribut "preload"

Bei mobilen Geräten von Apple wird die Angabe von preload ignoriert um Übertragungsvolumen zu sparen. Hier ist die Voreinstellung immer preload=none - egal was im HTML-Code angegeben ist. Grundsätzlich kann man den Browser zum Vorladen über preload=auto überreden. Gibt es allerdings mehrere Sounddateien auf der Website, macht das wenig Sinn.

Musikdatei angeben - Attribut "src"

Bisher haben wir die eigentliche Musikdatei noch nicht integriert. Dies geschieht innerhalb unseres <audio>-Befehls. Dazu wird der HTML5-Befehl <source> genutzt. Dieser hat Attribute wie die Dateiquelle "src" und das Attribut "type".

Die Dateiquelle src="depechemode.mp3" gibt an, wie die Datei benannt wurde. Dieses kann natürlich auch zwecks Übersicht in einem eigenen Verzeichnis sein. Dann muss zusätzlich das Verzeichnis angegeben werden, das in einem Unterverzeichnis von unserer aufrufenden HTML-Datei liegt. Liegen alle Musikdateien im Verzeichnis "sound", dann sieht unser Attribut wie folgt aus: src="sound/depechemode.mp3".

Zusätzlich benötigen wir die Art der Musikdatei! Wenn wir das Dateiformat MP3 verwenden, muss als Typ type="audio/mpeg" angegeben werden.

Unser bisheriger HTML-Code:

<audio controls>
<source src="depechemode.mp3" type="audio/mpeg">
Ihr Browser unterstützt dieses HTML5-Audioformat leider nicht.
</audio>

Natürlich fragt man sich, warum zum Teufel benötigen wir dieses Attribut "type". Und hier liegt der Hund begraben. Es gibt wegen Lizenzgeschichten verschiedene Dateiformate, die je nach Browser und Browserversion unterstützt wurden oder auch nicht.

Folgende 3 Musikformate sind für den HTML5-Befehl <audio> verfügbar:

*.mp3
*.wav
*.ogg

Die gute Nachricht: das Format MP3 ist bei allen aktuellen Browsern verfügbar. Daher hat man den Spass mit mehreren Dateiformaten nur, wenn man auch alte Browser soweit wie möglich unterstützen möchte. So konnte zum Beispiel die Version 3.5 von Firefox keine MP3-Dateien abspielen und der IE 9 kein WAV-Format.

Hier der Vollständigkeit halber unser HTML-Code mit allen möglichen Angaben:

audio controls>
    <source src="depechemode.mp3" type="audio/mpeg">
    <source src="depechemode.wav" type="audio/wav">
    <source src="depechemode.ogg" type="audio/ogg">
Ihr Browser unterstützt dieses HTML5-Audioformat leider nicht.
</audio>

[Home][In Gedenken][Room to Rent][Kontakt][Kangaroo][Fotografien][Zeichnungen][Privat / Gast]