Wie man ein Audio-Musik-Player-Widget in WordPress hinzufügt

Möchten Sie ein Audio-Musik-Player-Widget in WordPress hinzufügen?

Ein Musikplayer ist eine gute Möglichkeit, Songs, Podcasts, Interviews und andere Audiodateien mit Ihrem Publikum zu teilen. Dies kann dazu beitragen, Ihre Website interessanter und ansprechender zu gestalten.

In diesem Artikel zeigen wir Ihnen, wie Sie einen Audio-Musik-Player in WordPress hinzufügen können.

Warum ein Audio Music Player Widget in WordPress hinzufügen

Mit einem Musikplayer können Besucher direkt auf Ihrer WordPress-Website Audiodateien anhören.

Wenn Sie ein Podcaster oder ein Musiker sind, können Sie Ihre Besucher und Fans mit Audiodateien auf Ihrer Website über Ihre Arbeit auf dem Laufenden halten.

Es kann auch Menschen dazu bringen, Ihre Website direkt zu besuchen, anstatt Ihre Audiodatei auf anderen Plattformen abzuspielen. Sobald diese Menschen auf Ihrer Website sind, können Sie möglicherweise mehr Geld verdienen, indem Sie Anzeigen in Ihrem WordPress-Blog schalten oder die Audiodatei als digitalen Download verkaufen.

Selbst wenn Sie keine Original-Audiodateien erstellen, ist das Einbetten von Inhalten von Drittanbieter-Plattformen wie Spotify eine einfache Möglichkeit, eine ansprechende Website zu erstellen. Dies kann Besucher länger auf Ihrer Website halten und das Erlebnis angenehmer gestalten.

Schauen wir uns also an, wie Sie einen Audio-Musik-Player in WordPress hinzufügen können. Verwenden Sie einfach die unten stehenden Links, um direkt zur gewünschten Methode zu springen.

• Methode 1. Hinzufügen eines Audio-Musik-Player-Widgets mit dem Audio-Block (einfach)
• Methode 2. Hinzufügen eines Audio-Musikplayer-Widgets mithilfe eines Plugins (besser anpassbar)

Methode 1. Hinzufügen eines Audio-Musik-Player-Widgets mit dem Audio-Block (einfach)

Mit dieser Methode können Sie einen einfachen Audio-Musikplayer mit dem integrierten WordPress-Audioblock erstellen. Sie können den Block verwenden, um jede .mp3-, .m4a-, .ogg- oder .wav-Datei abzuspielen.

Der Audio-Player ist im Vergleich zu den meisten Audio-Player-Plugins sehr einfach. Er verfügt über eine Play/Pause-Taste, Lautstärkeregler, eine Download-Taste und eine Taste zum Ändern der Wiedergabegeschwindigkeit.

Der integrierte Audioblock ist eine gute Wahl, wenn Sie Ihrer Website einige kurze Audioclips hinzufügen möchten und keine erweiterten Funktionen benötigen.

Wenn Sie Inhalte von einer unterstützten Drittanbieterplattform wie Spotify oder SoundCloud einbetten, zeigt der Audioblock die Wiedergabesteuerung für diese Plattform an. Möglicherweise werden auch zusätzliche Inhalte der Plattform angezeigt, z. B. der Name des Interpreten und das Coverbild.

Hier ist zum Beispiel ein Audioblock mit eingebettetem SoundCloud-Inhalt.

Um Ihrer WordPress-Website einen einfachen Audio-Musik-Player hinzuzufügen, öffnen Sie eine beliebige Seite oder einen Beitrag. Klicken Sie dann auf das Symbol +.

Geben Sie in dem daraufhin angezeigten Popup „Audio“ ein, um den richtigen Block zu finden. Sie können dann einfach auf den Audioblock klicken, um ihn zu Ihrer Seite hinzuzufügen.

An dieser Stelle können Sie entweder eine Audiodatei hinzufügen oder einen Audioclip von einer anderen Plattform einbetten.

Um eine Audiodatei von Ihrem Computer hinzuzufügen, klicken Sie auf „Hochladen“ und wählen dann die gewünschte Datei aus. Eine andere Möglichkeit ist, auf „Medienbibliothek“ zu klicken und dann eine Datei aus der WordPress-Medienbibliothek auszuwählen.

Wenn Sie das vollständige Audio hochladen, möchten Sie Ihren Besuchern vielleicht die Möglichkeit geben, Ihre Arbeit als Musiker oder Podcaster durch eine Spende zu unterstützen. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden zum Hinzufügen einer Stripe-Spendenschaltfläche in WordPress.

Möchten Sie stattdessen Audio von einer anderen Plattform einbetten?

Das ist ähnlich wie beim Einbetten von Videos in WordPress, wo man einfach die URL eines YouTube-Videos einfügt und WordPress es automatisch einbettet.

Beachten Sie jedoch, dass die meisten Plattformen nur eine Vorschau der vollständigen Audiodatei einbetten. Die Sperre kann sogar dazu führen, dass die Besucher Ihre Website verlassen und die Drittanbieterplattform besuchen, um die vollständige Audiodatei zu hören.

In der folgenden Abbildung leitet der Audio-Block die Besucher auf die Spotify-Website.

Wenn Sie ein Musiker sind, kann dies Ihre Tantiemen erhöhen, da die Besucher dazu ermutigt werden, Ihre Inhalte auf anderen Plattformen abzuspielen. Es kann aber auch dazu führen, dass Besucher von Ihrer Website auf die anderen Plattformen wechseln.

Um Audio von einer Drittanbieter-Plattform einzubetten, klicken Sie zunächst auf „Von URL einfügen“.

Dies öffnet eine kleine Leiste „URL einfügen oder eingeben“.

Sie können nun die URL des Audioclips eingeben, den Sie in Ihren WordPress-Blog einbetten möchten.

Normalerweise müssen Sie nur das Lied oder die Audiodatei besuchen, die Sie einbetten möchten, und dann die Einstellungen für die „Freigabe“ öffnen.

Danach können Sie die angegebene URL kopieren.

Sehen wir uns als Beispiel an, wie Sie einen beliebigen Spotify-Song in Ihre Website einbetten können. Suchen Sie zunächst den Song oder die Wiedergabeliste, die Sie zu Ihrer WordPress-Website hinzufügen möchten.

Klicken Sie dann einfach auf die drei Punkte, die Spotify neben der Wiedergabeliste oder dem Titel anzeigt.

Klicken Sie anschließend auf Freigeben “ Song-Link kopieren.

Um den Ton zu einem Musikplayer-Widget hinzuzufügen, fügen Sie einfach den Link in den Audioblock ein.

In unserem Spotify-Beispiel verwandelt WordPress den Audio-Block in einen Spotify-Block. Diese Änderung geschieht automatisch, Sie müssen sich also nicht darum kümmern.

Nachdem Sie eine Audiodatei hinzugefügt haben, können Sie auf den Audioblock klicken, um zu sehen, welche Einstellungen Sie für diesen Block konfigurieren können.

Die Einstellungen, die Sie sehen, können variieren, je nachdem, ob Sie eine Audiodatei hochgeladen oder eine Vorschau von einer Drittanbieter-Website eingebettet haben. So können Sie zum Beispiel oft die automatische Wiedergabe der Audiodatei einstellen, indem Sie auf den Schalter „Autoplay“ klicken.

Die meisten dieser Einstellungen sind selbsterklärend. Es empfiehlt sich daher, einige Zeit damit zu verbringen, die verschiedenen Einstellungen auszuprobieren, um herauszufinden, welche für Ihre Website am besten geeignet sind.

Wenn Sie mit der Einrichtung des Blocks zufrieden sind, können Sie die Seite aktualisieren oder veröffentlichen.

Wenn Sie nun die Seite auf Ihrer Website besuchen, sehen Sie den Audio-Musik-Player live. Sie können die Audiodaten auch über die Wiedergabesteuerungsschaltflächen des Blocks anhören.

Methode 2. Hinzufügen eines Audio-Musik-Player-Widgets mit einem Plugin (besser anpassbar)

Der integrierte WordPress-Audioblock ist eine schnelle und einfache Möglichkeit, einen einfachen Audioplayer zu erstellen. Er hat jedoch seine Grenzen, insbesondere wenn es um die Anpassung des Players und der Wiedergabe geht.

Außerdem gibt es keine zentrale Stelle, an der Sie Ihre Audioplayer verwalten können. Das bedeutet, dass Sie denselben Player nicht mehrfach auf Ihrer Website verwenden können.

Wenn Sie erweiterte Funktionen und wiederverwendbare Audioplayer wünschen, empfehlen wir den Html5 Audio Player. Dieses Plugin kann jede mp3-, .wav- oder .ogg-Datei abspielen.

Das Plugin kann nur eine Audiodatei pro Player abspielen. Sie können jedoch so viele Audioplayer erstellen, wie Sie möchten, sodass Sie auf Ihrer Website viele verschiedene Titel abspielen können.

Sie können sogar mehrere Audioplayer auf derselben Seite hinzufügen.

Zunächst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie Ihren ersten Audioplayer erstellen, indem Sie zu Html5 Audio Player “ Html5 Audio Player gehen.

Klicken Sie hier auf die Schaltfläche „Audio-Player hinzufügen“.

Geben Sie zunächst einen Namen für den Audioplayer in das Feld mit der Aufschrift „Titel hinzufügen“ ein.

Dies dient nur als Referenz, Sie können also jeden Titel verwenden, den Sie möchten.

Sobald Sie das getan haben, blättern Sie zum Abschnitt „Spielerkonfiguration“.

Hier können Sie dem Player eine Audiodatei hinzufügen, indem Sie auf die Schaltfläche „Audio hinzufügen“ klicken.

Sie können nun eine beliebige Audiodatei aus der Medienbibliothek auswählen oder eine Datei von Ihrem Computer hochladen.

Nachdem Sie eine Datei ausgewählt haben, können Sie den Audioplayer anpassen. Standardmäßig braucht der Besucher nur auf die Schaltfläche „Abspielen“ zu klicken, und das Audio wird mit bereits aufgedrehter Lautstärke abgespielt.

Die meisten Besucher erwarten, dass sich ein Audioplayer so verhält, weshalb Sie in der Regel diese Standardeinstellungen verwenden sollten.

Außerdem gibt es Optionen für die standardmäßige Stummschaltung des Tons, die automatische Wiedergabe, die Wiederholung und mehr.

Wenn Sie mit der Einrichtung des Players zufrieden sind, scrollen Sie einfach zum oberen Rand des Bildschirms und klicken Sie auf die Schaltfläche „Speichern“.

Anschließend können Sie den Audioplayer entweder mit einem Shortcode oder dem HTML5-Audioplayer-Block zu Ihrer Website hinzufügen.

Der Block ist die einfachste Methode. Wenn Sie den Player jedoch mit einem Shortcode platzieren möchten, finden Sie den Code oben auf dem Bildschirm.

Weitere Einzelheiten zur Platzierung des Shortcodes finden Sie in unserer Anleitung zum Hinzufügen eines Shortcodes in WordPress.

Um den Audio-Musik-Player über einen Block hinzuzufügen, öffnen Sie eine beliebige Seite oder einen Beitrag. Sie können nun auf die Schaltfläche + klicken.

Geben Sie in dem erscheinenden Popup ‚HTML5 Audio Player‘ ein, um den richtigen Block zu finden. Sobald Sie auf den Block „HTML5 Audio Player – Einfügen“ klicken, wird der Block Ihrer Seite hinzugefügt.

Öffnen Sie als Nächstes die Dropdown-Liste „Player auswählen“, um eine Liste aller von Ihnen erstellten Audioplayer anzuzeigen.

Sie können nun auf einen Audioplayer klicken, um ihn der Seite oder dem Beitrag hinzuzufügen.

Der WordPress-Seiteneditor zeigt den Audio-Player nicht an.

Wenn Sie jedoch auf die Schaltfläche Vorschau klicken, können Sie sehen, wie der Player für die Besucher Ihrer Website aussehen wird. Sie können sich sogar den Ton anhören und die verschiedenen Wiedergabeschaltflächen testen.

Wenn Sie mit dem Aussehen und den Funktionen des Audioplayers zufrieden sind, können Sie die Seite aktualisieren oder veröffentlichen.

Wenn Sie nun diese Seite auf Ihrer WordPress-Website besuchen, sehen Sie den Audioplayer live.

Möchten Sie weitere Audiospuren zu Ihrer Website hinzufügen? Dann können Sie einfach dem oben beschriebenen Prozess folgen, um weitere Audioplayer zu erstellen und zu Ihrer WordPress-Website hinzuzufügen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein Audio-Player-Widget in WordPress hinzufügt. Sie können auch unseren Leitfaden über die beste Web-Push-Benachrichtigungssoftware lesen und erfahren, wie Sie einen E-Mail-Newsletter erstellen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.