Audioplayer WordPress: In 2 Minuten Hintergrundmusik einbinden

Audioplayer WordPress – Wie du ihn einbinden kannst!

Warum einen Audioplayer in WordPress einbinden?

Es gibt viele Gr├╝nde, warum du dich daf├╝r entschieden haben k├Ânntest, Audiodateien auf deine Webseite einzubinden. Vielleicht bist du Musiker oder Musikerin und w├╝rdest gerne H├Ârproben hochladen oder willst deinen Webseitenbesuchern eine M├Âglichkeit geben, bestimmte Lieder anzuh├Âren. F├╝r Beatproduzenten macht es auch immer Sinn, einige ihrer Beats auf ihrer Seite zu pr├Ąsentieren und dann zum Verkauf als hochwertige Datei anzubieten. Ein weiterer Use Case k├Ânnte die Einbindung von Hintergrundmusik sein. Im Folgenden werde ich dir zeigen, wie du:

  • Einen WordPress Audioplayer per Code einbindest
  • Den Audioplayer WordPress konfigurierst, damit er als Hintergrundmusik im Loop l├Ąuft
  • Den Audioplayer WordPress nach eigenem Belieben mit minimalen ├änderungen anpasst

Schritte zur Einbindung einer Audiodatei in WordPress

1. Die richtige Audiodatei w├ĄhlenMP3, WAV, OGG

Stelle sicher, dass sich deine Audiodatei im richtigen Format befindet. Die drei unterst├╝tzten Formate sind MP3, WAV und OGG. Auf Webseiten wie Convertio kannst du Audiodateien umwandeln, sodass sie eins der Formate erf├╝llen.

2. Upload der Audiodatei

Die Audiodatei l├Ądst du, wie alle anderen Medien auch, in deinem WordPress Dashboard unter „Medien“ hoch. Hierbei kannst du die Datei einfach von deinem Desktop in die graue Box hereinziehen und loslassen.

3. Einbettungscode erhalten

Audiodatei WordPress
Kopiere den relativen Pfad der Datei

Der Link deiner Audiodatei befindet sich nun unten rechts hinter „Datei-URL“. Ich w├╝rde dir empfehlen immer den relativen Pfad zu kopieren, also alles nach dem „.de“, „.com“ oder wie auch immer deine Domainendung lautet. Solltest du deine Webseite mal auf eine neue Domain ├╝bertragen wollen, bleiben die Links auf diese Weise intakt und du musst die Verkn├╝pfungen nicht neu setzen.

4. Einbindung in einen Beitrag oder eine Seite

Jetzt geht es an den Code! Egal, ob du mit Elementor, DIVI, WPBakery, Gutenberg Editor oder irgendeinem anderen Editor arbeitest, w├Ąhle einfach in deiner Werkzeugleiste das Widget „HTML“ aus und f├╝ge es an der entsprechenden Stelle ein. In das HTML Widget f├╝gst du folgenden Code ein:

<audio>
<source src="/wp-content/uploads/2024/04/Meine-Audiodatei.mp3">
</audio>

5. Autoplay, Loop, Controls, Muted, Preload – Verschiedene Einstellungen

Je nach Bedarf bietet HTML f├╝r jede Webseite die M├Âglichkeit, verschiedene Einstellungen am Audioplayer vorzunehmen. Die erste ist besonders wichtig f├╝r unsere Hintergrundmusik, die automatisch abgespielt werden soll, und zwar „autoplay“.

Der Code sieht dann entsprechend so aus:

<audio autoplay>
<source src="/wp-content/uploads/2024/04/Meine-Audiodatei.mp3">
</audio>

Wenn wir jetzt noch weitere Eigenschaften hinzuf├╝gen wollen, k├Ânnen wir mit einem Leerzeichen hinter das „autoplay“ die jeweiligen Begriffe einsetzen. Die weiteren Einstellungen lauten wie folgt:

  • loop – Die Musik spielt immer wieder in Dauerschleife
  • controls – Zeigt die Audio mit Kontrolleinstellungen, wie den „Abspielen“ Button oder die Zeitleiste
  • muted – Die Audio ist zu Beginn stummgeschaltet
  • preload – Der Audioplayer WordPress wird vollst├Ąndig geladen, bevor die Seite fertig geladen ist

Eine vollst├Ąndige Liste zu den verschiedenen Einstellungen findest du bei W3Schools.

6. Der finale Code f├╝r Hintergrundmusik

Wenn wir jetzt das Gelernte in einen Codeschnipsel zusammenbringen f├╝r: Musik, die automatisch abgespielt wird, in Dauerschleife l├Ąuft, und Kontrolleinstellungen anzeigt, erhalten wir den folgenden Code:

<audio autoplay loop controls>
<source src="/wp-content/uploads/2024/04/Meine-Audiodatei.mp3">
</audio>

Audioplayer WordPress – Was du beachten solltest

  • Rechtliche ├ťberlegungen: Achte auf Urheberrechte, wenn du Musik oder Inhalte von Dritten verwendest. Verwende stattdessen lieber frei verf├╝gbare und lizenzfreie Audiodateien.
  • Browsereinstellungen beachten: Viele Browser blockieren automatisch das Abspielen einer Audiodatei, wenn Sie auf „autoplay“ eingestellt ist. Wundere dich also nicht, wenn deine eingebaute Musik nicht bei allen abgespielt werden sollte.
  • Alternativen in Betracht ziehen: Ziehe es in Betracht, „autoplay“ g├Ąnzlich zu entfernen und dem User die Kontrolle ├╝ber die Musik zu geben. Daf├╝r kannst du den Player einfach mit CSS sch├Ân stylen, sodass er gut zum Design deiner Webseite passt.
  • Optimierung der Dateigr├Â├če: Gr├Â├čere Audiodateien k├Ânnen die Ladezeit deiner Website verlangsamen. Verwende komprimierte Formate, um die Dateigr├Â├če zu minimieren.

Wenn dir das Tutorial zum WordPress Audioplayer gefallen haben sollte, schau gerne auch bei meinen anderen Blogartikeln vorbei! Bei Fragen kannst du mir auch einfach eine Mail schreiben. Schau ansonsten auch gerne einfach auf meiner Webseite vorbei.

Zusammenfassung

Musik in WordPress und anderen Webseiten ist super einfach mit einem kleinen Codeschnipsel und den entsprechenden Einstellungen. Erfahre mehr dazu im weiteren Verlauf.

Inhaltsverzeichnis

Audioplayer WordPress
Ein Beispiel auf der Webseite von 2ndLifeGaming
Red's Webdesign Vadim Rodt
Weitere interessante Themen
Was ist SEO? – Mit 3 super Tipps SEO verbessern + 1 Plugin!
Was ist SEO? - das Fundament jeder guten Webseite! Fragen...
WordPress Website erstellen lassen – 5 Top Gr├╝nde
WordPress Website erstellen lassen - 5 Gr├╝nde f├╝r deinen pers├Ânlichen...
Webseite optimieren – 5 starke Tipps f├╝r schnelle Webseiten
Ist dein WordPress Langsam? - Webseite optimieren! Was sind die...