Musik und Podcasts einbinden – mit HTML, WordPress & Co
Veröffentlicht am 19.08.2021 von DomainFactory
Websites sind längst keine reinen Buchstabenwüsten mehr. Neben attraktiven Bildern gewinnen Multimedia-Inhalte im Web immer stärker an Bedeutung. Audioinhalte in Form von Musik, Sound- und Sprachbeispielen, Reportagen oder Hörbüchern können viel zur Attraktivität einer Website beitragen und den Traffic erhöhen. Insbesondere regelmäßige Audioblogs, also Podcasts, erfreuen sich zunehmender Beliebtheit. 2020 hat jeder dritte Verbraucher laut Bitcom-Umfrage mindestens schon einmal einen Podcast gehört – im Vorjahr traf dies nur auf jeden vierten Deutschen zu.
In diesem Beitrag erfahren Sie, wie Sie in Ihre Webseite Audios und Podcasts einbinden.
Audiodateien mit HTML einbinden
Mit dem Audio-Tag <audio> in HTML5 ist es sehr leicht geworden, Audios direkt und ohne Flashplayer oder zusätzliche Plugins in eine Webseite einzubetten. Da alle modernen Browser inklusive deren mobiler Varianten das <audio>-Element unterstützen, gibt es in der Regel auch bei der Wiedergabe keine Kompatibilitätsprobleme.
Um ein Audio in eine Website einzubinden, fügen Sie Folgendes in den Quellcode Ihrer Website ein:
<audio controls
src="beispielordner/beispielaudio.mp3" type audio/mpeg">
</audio>
Das Attribut controls steuert dabei die Einblendung der Bedienelemente wie Play, Stop, Pause und Lautstärke. Je nach Browser werden diese unterschiedlich dargestellt. type ist eine Ergänzung, die dem Browser das jeweilige Audioformat anzeigt.
Um das Verhalten des eingebundenen Audioplayers näher zu konfigurieren, stellt HTML5 zusätzliche Attribute zu Verfügung. Mit preload kann bestimmt werden, wie die Audiodatei geladen werden soll. Dabei sind die Werte auto, metadata und none möglich. Mit preload="auto" entscheidet der Browser automatisch, was vorgeladen wird. Bei preload="metadata" werden nur die Metadaten ohne die eigentlichen Audiodaten (z. B. Name und Dauer) geladen. Mit preload="none" beginnt das Laden der Audiodatei erst mit einem Klick auf Play. Dies empfiehlt sich vor allem, wenn mehrere Audiodateien gleichzeitig in eine Seite eingebunden werden und/oder die Ladezeit der Seite reduziert werden soll, denn so werden die Datenmengen beim Laden der Seite so gering wie möglich gehalten.
Die Attribute autoplay und loop sorgen für ein automatisches Abspielen des Audios, wenn die Seite geladen wird und für eine Wiedergabe in Endlosschleife. Diese Attribute sollten aber nur mit Bedacht verwendet werden, um die Seitenbesucher nicht durch unerwünschte oder gar unaufhörliche Beschallung zu belästigen.
Audioformate
Der Siegeszug des MP3-Audioformats begann Ende der 1990er Jahre mit den kleinen, tragbaren MP3-Playern. Während MP3-Player längst Geschichte sind, erfreut sich das namensgebende Audioformat weiterhin großer Beliebtheit, und inzwischen wird .mp3 von allen modernen Browsern unterstützt. Firefox, Chrome und Opera geben auch die Audioformate .wav und .ogg wieder. Der Internet Explorer wiederum unterstützt weder .wav noch .ogg und Safari gibt grundsätzlich keine .ogg-Dateien wieder.
Mit .mp3 sind Sie also in den allermeisten Fällen gut beraten. Für das Format spricht zudem, dass ihm ein sehr effektives Kompressionsverfahren zugrunde liegt, mit dem die Datenmengen von Audiodateien deutlich verringert werden können. Darüber hinaus ist es weit verbreitet, sodass viele Audios bereits als .mp3 vorliegen und für die Wiedergabe im Browser nicht erst konvertiert werden müssen.
In Ausnahmen kann es allerdings mit Opera und .mp3-Dateien, abhängig von dem Betriebssystem, zu Problemen kommen. Wenn Sie auf der sicheren Seite sein wollen, bietet sich als Fallback an, die Dateien auch in anderen Formaten anzubieten. Der Code wäre dann z. B.
<audio controls>
<source src="beispielordner/beispielaudio.mp3" type="audio/mp3">
<source src="beispielordner/beispielaudio.wav" type="audio/wav">
<source src=" beispielordner/beispielaudio.ogg" type="audio/ogg">
Ihr Browser kann dieses Audio leider nicht wiedergeben.
</audio>
Tipp: Sollte Ihre Audiodatei nicht das gewünschte Format haben, können Sie sie mithilfe von kostenfreien Programmen wie Audacity oder VLC media player konvertieren und schneiden.
Audios per Plugin einbinden – WordPress und Joomla!
Nutzer der verbreitetsten CMS-Systeme WordPress und Joomla! können darüber hinaus Audioinhalte ganz einfach per Audioplayer-Plugin in die Website einbauen. Je nach Plugin haben Sie die Möglichkeit, den Player nach Ihren Vorstellungen zu konfigurieren, zu designen sowie den Funktionsumfang zu erweitern. WordPress-Nutzer finden hier einen Überblick über entsprechende Plugins für ihr CMS. Audio-Extensions für Joomla! finden Sie hier.
Podcasts einbinden
Podcast-Episoden sind zwar im Kern auch „nur“ Audiodateien, aber für das Einbinden eines Audioblogs in eine Website oder einen Blog gelten doch andere Bedingungen. Einer der wichtigsten Unterschiede zu einfachen Audiodateien: Bei Podcasts entstehen regelmäßig neue, meist längere Beiträge (Episoden). Dadurch fallen weitaus größere Datenmengen an. Darüber hinaus ist ein Podcast auf regelmäßig wiederkehrende Hörer (Abonnenten) ausgerichtet und soll Reichweite, ggf. auch Einnahmen erzeugen – z. B. durch eingebettete Werbung.
Podcast-Hosting
Soll der Podcast auf dem eigenen Webspace gehostet werden, sollten Sie sicherstellen, dass Ihnen für die entsprechend großen, kumulativen Datenmengen genügend Speicherplatz zur Verfügung steht. Eine 20-minütige Episode ist ca. 25 MB groß, bei üblichen Webhosting-Angeboten kann das Speicher-Limit damit schnell erschöpft sein.
Zudem sollten Sie darauf achten, dass Ihr Hoster ausreichend Leistung und Bandbreite zur Verfügung stellt, damit Ihre Episoden stets schnell geladen und auch dann noch flüssig und unterbrechungsfrei wiedergegeben werden, sobald mehrere Hörer gleichzeitig auf eine Episode zugreifen.
Spezialisierte Podcast-Hoster wie podigee, libsyn, podbean, letscast oder podcaster stellen darüber hinaus auch umfangreiche Auswertungs-Tools zu Hörerstatistiken oder zum Download-Verhalten zur Verfügung, ebenso wie Monetarisierungs-Funktionen (z. B. zur Einbindung von Werbung). Auch eine automatische Generierung von RSS-Feeds und die Syndizierung der gehosteten Podcasts auf den großen Plattformen wie iTunes/Apple Podcasts, Spotify & Co sind in den meisten Paketen solcher Anbieter bereits enthalten.
Podcast-Integration in die eigene Website
Podcast-Hoster stellen in der Regel einen eigenen Podcast-Player zur Verfügung. Diese Player bieten neben den Abspielfunktionen zusätzliche Features wie Abonnier- oder Share-Buttons, Playlisten oder verschiedene Designs. Die Integration der Player in die eigene Website oder den eigenen Blog erfolgt ganz einfach per Embed-Code, der vom Hoster zur Verfügung gestellt wird.
Wer seinen Podcast auf dem eigenen Webspace hostet oder „seinen“ Player noch individueller gestalten möchte, kann als Nutzer der verbreitetsten CMS-Systeme auf spezielle Plugins zurückgreifen. Insbesondere WordPress bietet eine große Auswahl an Player-Plugins. Beliebte Plugins wie PowerPress, Seriously Simple Podcasting oder Podcast Player ermöglichen eine einfache Podcast-Integration und bieten zahlreiche Konfigurationsmöglichkeiten.
Wenn Sie eine leistungsstarke und sichere Hosting-Plattform für Ihre WordPress-Webseite mit kostenlosem SSL-Zertifikat suchen, empfehlen wir Ihnen WordPress-Hosting von DomainFactory. Zur Produktübersicht
Nicht ganz so groß ist die Auswahl bei Joomla!. Aber mit Extensions wie MyPlayer oder Podcast können Sie auch Joomla!-Nutzer , Podcasts einbinden - ganz einfach per Plugin in Ihr CMS.
Titelmotiv: Photo by Will Francis on Unsplash
