HTML und Audio
Seit HTML5 ist es möglich, Musikdateien wie Mp3, WAV und mehr auf Websites einzubetten. Die Einbindung erfolgt hierbei nicht mehr mit zusätzlichen Plugins wie Flash sondern nativ. Das heißt, moderne Browser unterstützen Mediendateien wie Audio und Video von Haus aus. Hinweis nebenbei: Den Internet Explorer zählen wir nicht zu den modernen Browsern.
Alle modernen Browser unterstützen mittlerweile die bekannte und weit verbreitete Mp3. Auch wenn die Mp3 technisch gesehen als längst überholt und veraltet anzusehen ist, wird sie noch immer am meisten genutzt. Nicht nur auf tragbaren Geräten sondern eben auch im Internet auf Webseiten.
Mp3 auf einer Website einbinden
Mit nur wenigen Kenntnissen in HTML können Sie eine Mp3 auf Ihrer Website oder Hompage einbinden. Der HTML Code ist dank der nativen Unterstützung ohne zusätzliche Plugins sehr einfach zu verstehen und funktioniert mit allen gängigen Browsern. Hier ein einfaches HTML5 Audio Beispiel.
<audio controls preload="auto">
<source
src="https://www.cayzland.de/musik.mp3"
type="audio/mpeg">
</source>
</audio>
Das wars schon. Damit zeigt der Browser automatisch einen Player, der Ihre Mp3 abspielen kann. Einige Leute mögen hier nun sicher aufschreien, dass man zusätzliche Formate angeben muss, falls ein Browser keine Mp3 verarbeiten kann und sogar noch ein fallback, falls ein Browser gar keine HTML Audiodateien abspielen kann. Hierzu der Hinweis, dass dieser Artikel sich auf die jeweils aktuelle Version der Browser bezieht. Sie können das Format Mp3 mit allen aktuellen Browsern abspielen und brauchen keine zusätzlichen Formate wie z.B. ogg. Es gibt im Netz viele weitere Beispiele für die Einbindung, wie z.B. folgende:
<audio controls preload="auto"
src="https://www.cayzland.de/musik.mp3">
</audio>
Technisch gesehen zunächst nicht ganz verkehrt, funktioniert aber nicht in allen Browsern, da bei diesen das source Tag erforderlich ist. Nutzen Sie einfach den zuerst genannten Code und Ihre Audiodatei wird auf allen aktuellen Geräten und Browsern abgespielt.
Erklärung der HTML Audio Elemente
audio
Mit dem audio Tag (Tag = HTML Element) wird dem Browser mitgeteilt, dass eine Audiodatei eingebunden werden soll. Dasselbe gilt übrigens für Videos, diese werden, man glaubt es kaum, mit dem video Tag eingebunden.
source
Das source Tag gibt dem Browser die Information, wo die Datei auf einem Server zu finden ist. Hier sollte immer die komplette URI zur Audiodatei angegeben werden, um die Funktion in allen gängigen Browsern zu gewährleisten. Also den vollen Namen der Domain inkl. Protokoll, also etwa https://www.cayzland.de/musik.mp3
type
Das type Attribut dient hier nur zur ergänzenden Erklärung. Es zeigt dem Browser, um welches Audioformat es sich handelt, kann jedoch problemlos weggelassen werden.
controls
Mit controls weisen wir den Browser an, Kontrollelemente darzustellen. Dieser Player ist optisch und technisch von Browser zu Browser unterschiedlich, es besitzen jedoch alle die minimalen Grundfunktionen wie Play, Stop, Pause und Lautstärke.
preload
Mit preoload legen wir fest, wie die Audiodatei geladen werden soll. Mögliche Werte sind auto, metadata und none. Bei auto entscheidet der Browser, was vorgeladen wird. Mit metadata werden nur die Metadaten der Audiodatei geladen wie z.B. Name und Dauer. Mit preload="none" wird nichts vorgeladen. Es wird nur der Player angezeigt und das (Vor)laden beginnt erst mit Klick auf Play. Dies ist vorteilhaft, wenn mehrere Audiodateien gleichzeitig eingebunden werden. Würde der Browser alle Daten vorladen, käme es ggf. zu großen Datenmengen, was bei geringen Internetgeschwindigkeiten prblematisch ist. Deshalb wird preoload z.B. bei iOS (Apple) ignoriert, da man davon ausgeht, dass der Nutzer mobil unterwegs ist. Auf Desktopgeräten kann man jedoch mit preoload arbeiten. Grundsätzlich empfiehlt sich bei mehreren Audiodateien die Nutzung von preload="none".