So fügen Sie ein Audio-Musikplayer-Widget in WordPress hinzu (2 Methoden)

Wenn Sie Musiker, Podcaster sind oder einen Blog betreiben, bei dem Ton eine große Rolle spielt, haben Sie wahrscheinlich bemerkt, dass die Standard-Audiofunktionen von WordPress ziemlich begrenzt sind.

Sie können Dateien hochladen, sicher. Aber dieses polierte, nahtlose Hörerlebnis zu schaffen, das Ihre Besucher verdienen? Da wird es knifflig.

Wir haben diese Herausforderung immer wieder erlebt, als wir beim Start von Musikblogs und Podcast-Websites geholfen haben.

Glücklicherweise gibt es einfache Lösungen, die funktionieren. Nach der Recherche der besten Musik-Tools und Plugins haben wir 2 einfache Optionen gefunden: den Audio-Block und das HTML5 Audio Player Plugin.

In dieser Anleitung führen wir Sie durch 2 Methoden zum Hinzufügen eines Audio-Musik-Player-Widgets in WordPress. Auf diese Weise können Sie die Methode wählen, die Ihren Bedürfnissen entspricht, und Ihren Audio-Player im Handumdrehen einsatzbereit haben. 🎶

Warum ein Audio-Musik-Player-Widget in WordPress hinzufügen

Ein Audioplayer-Widget erleichtert es Besuchern, Ihre Inhalte anzuhören, ohne Ihre Website zu verlassen.

Es ist besonders nützlich für Musiker, Podcaster und Content-Ersteller, die ihre Arbeit auf professionelle und zugängliche Weise präsentieren möchten. Anstatt Leute auf externe Plattformen zu schicken, können Sie sie auf Ihrer eigenen Website fesseln, wo Sie mehr Kontrolle haben.

Ein Musik-Audioplayer kann Ihnen sogar helfen, mehr Geld zu verdienen, indem Sie Anzeigen auf Ihrer Website schalten oder Ihre Audiodateien als digitale Downloads direkt verkaufen.

Und wenn Sie keine Original-Audios erstellen, ist das Einbetten von Titeln von Plattformen wie Spotify immer noch eine clevere Möglichkeit, Ihre Website dynamischer und ansprechender zu gestalten.

Dies kann dazu beitragen, dass Besucher länger auf Ihrer Website bleiben, was wichtige Metriken wie die Verweildauer auf der Website verbessert.

Das Beste daran ist, dass Audio-Widgets nicht nur für Musik gedacht sind. 💡

Sie können sie zum Einbetten von Podcasts, Hörbüchern, geführten Meditationen oder Bildungsinhalten verwenden. Dies macht Ihre Website vielseitiger und ansprechender für Audio-affine Nutzer, einschließlich Menschen mit Sehbehinderungen.

In diesem Sinne zeigen wir Ihnen, wie Sie mit 2 Methoden einen Audio-Musikplayer in WordPress hinzufügen. Sie können die Schnelllinks unten verwenden, um direkt zu der Methode zu springen, die Sie verwenden möchten:

Lassen Sie uns erkunden, wie Sie die Kraft der Musik auf Ihre WordPress-Website bringen können! 🎧

Methode 1. So fügen Sie ein Audio-Musik-Player-Widget mit dem Audio-Block hinzu (einfach)

Mit dieser Methode können Sie einen einfachen Audioplayer mit dem integrierten WordPress-Audioblock erstellen. Dieser Block kann jedes Audio-Dateiformat abspielen, einschließlich .mp3, .m4a, .ogg oder .wav-Dateien.

Der integrierte Audioplayer von WordPress ist im Vergleich zu den meisten Plugins sehr einfach. Er verfügt über eine Wiedergabe-/Pause-Schaltfläche, Lautstärkeregler, eine Download-Schaltfläche und eine Schaltfläche zum Ändern der Wiedergabegeschwindigkeit.

Dies ist eine gute Wahl, wenn Sie einige kurze Audioclips zu Ihrer Website hinzufügen möchten, ohne erweiterte Funktionen zu benötigen.

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

Hier ist zum Beispiel ein Audio-Block mit eingebetteten SoundCloud-Inhalten.

Um einen einfachen Audio-Musikplayer zu Ihrer WordPress-Website hinzuzufügen, können Sie eine beliebige Seite oder einen Beitrag öffnen und auf das Symbol '+' klicken.

Geben Sie im erscheinenden Popup im Suchfeld „Audio“ ein, um den richtigen Block zu finden. Sie können dann auf den Audio-Block klicken, um ihn zu Ihrer Seite hinzuzufügen.

An diesem Punkt 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 Sie dann die Datei von Ihrem lokalen Laufwerk Ihres Computers aus.

Eine andere Option ist, auf die Schaltfläche „Mediathek“ zu klicken und dann eine vorhandene Datei in Ihrer WordPress-Mediathek auszuwählen.

Wenn Sie die vollständige Audioaufnahme hochladen, möchten Sie den Besuchern vielleicht die Möglichkeit geben, Ihre Arbeit als Musiker oder Podcaster zu unterstützen, indem sie Ihnen eine Spende senden. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden zum Hinzufügen eines Stripe-Spenden-Buttons in WordPress.

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

Dies funktioniert wie das Hinzufügen von Videos zu WordPress. Sie fügen einfach den YouTube-Link ein, und WordPress wird den Player automatisch auf Ihrer Seite anzeigen.

Seien Sie sich nur bewusst, dass die meisten Plattformen nur eine Vorschau der vollständigen Audiodatei einbetten. Der Block kann die Leute sogar dazu ermutigen, Ihre Website zu verlassen und die Drittanbieterplattform zu besuchen, um die vollständige Audioaufnahme zu hören.

Im folgenden Bild leitet der Audio-Block Besucher zur Spotify-Website weiter.

Wenn Sie Musiker sind, kann dies Ihre Tantiemen erhöhen, indem Besucher ermutigt werden, Ihre Inhalte auf anderen Plattformen abzuspielen. Es kann jedoch auch Leute von Ihrer Website weg und auf andere Plattformen lenken.

Um Audio von einer Drittanbieterplattform einzubetten, können Sie zunächst auf die Schaltfläche „Von URL einfügen“ klicken. Daraufhin öffnet sich eine kleine Leiste „URL einfügen oder eingeben“.

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

Normalerweise müssen Sie nur den Song oder das Audio besuchen, das Sie einbetten möchten, und dann dessen 'Teilen'-Einstellungen öffnen.

Danach können Sie die bereitgestellte URL kopieren.

Sehen wir uns zum Beispiel an, wie Sie jeden Spotify-Song auf Ihrer Website einbetten können.

Finden Sie zunächst den Song oder die Playlist, die Sie zu Ihrer WordPress-Website hinzufügen möchten. Klicken Sie dann einfach auf die drei Punkte, die Spotify neben der Playlist oder dem Song anzeigt.

Wenn Sie dies getan haben, klicken Sie auf Teilen » Song kopieren.

Um den Ton zum Musik-Player-Widget hinzuzufügen, fügen Sie den Link einfach in den Audio-Block ein.

In unserem Spotify-Beispiel wandelt WordPress den Audio-Block in einen Spotify-Block um.

Diese Änderung erfolgt automatisch, sodass Sie sich keine Sorgen machen müssen.

Nach dem Hinzufügen einer Audiodatei können Sie auf den Audio-Block klicken, um zu sehen, welche Einstellungen Sie für diesen Block konfigurieren können.

Die angezeigten Einstellungen können variieren, je nachdem, ob Sie eine Audiodatei hochgeladen oder eine Vorschau von einer Drittanbieter-Website eingebettet haben.

Sie können beispielsweise oft festlegen, dass der Ton automatisch abgespielt wird, indem Sie auf die Umschaltfläche „Autoplay“ klicken.

Die meisten dieser Einstellungen sind selbsterklärend, daher ist es eine gute Idee, sie zu erkunden, um zu sehen, was für Ihre Website am besten funktioniert.

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

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

Methode 2. So fügen Sie ein Audio-Musik-Player-Widget mit einem Plugin hinzu (anpassbarer)

Der WordPress-Audioblock ist ein einfaches Werkzeug zum Hinzufügen von Audioplayern. Er ist einfach zu bedienen, bietet aber nicht viele Optionen, um sein Aussehen oder seine Funktionsweise zu ändern.

Außerdem können Sie nicht einen Player erstellen und ihn in verschiedenen Teilen Ihrer Website verwenden. Sie müssen jedes Mal einen neuen Player hinzufügen, wenn Sie einen verwenden möchten.

Wenn Sie erweiterte Funktionen und wiederverwendbare Audioplayer wünschen, empfehlen wir das Plugin HTML5 Audio Player.

Ähnlich wie der Audio-Block von WordPress kann dieses Plugin verschiedene Audioformate abspielen, wie z. B. eine .mp3-, .wav- oder .ogg-Datei. Es bietet jedoch mehr Anpassungsoptionen.

Während das Plugin pro Player nur eine Audiodatei abspielen kann, können Sie beliebig viele Audio-Player erstellen. So können Sie trotzdem viele verschiedene Titel auf Ihrer WordPress-Website abspielen. Sie können sogar mehrere Audio-Player auf derselben Seite hinzufügen.

Um zu beginnen, müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie Ihren ersten Audio-Player erstellen, indem Sie zu HTML5 Audio Player » HTML5 Audio Player gehen.

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

Der nächste Schritt besteht darin, dem Audioplayer einen Namen in das Feld einzugeben, in dem „Titel hinzufügen“ steht.

Dies dient nur zu Ihrer Information, sodass Sie jeden Titel verwenden können, den Sie möchten.

Sobald Sie dies getan haben, scrollen Sie zum Abschnitt „Player-Konfiguration“.

In diesem Bereich können Sie eine Audiodatei zum Player hinzufügen, indem Sie auf die Schaltfläche „Audio hinzufügen“ klicken.

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

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

So erwarten die meisten Besucher, dass sich ein Audioplayer verhält, daher möchten Sie diese Standardeinstellungen normalerweise verwenden. Es gibt jedoch auch Optionen, um den Ton standardmäßig stummzuschalten, automatisch abzuspielen, zu wiederholen und mehr. Erkunden Sie diese Einstellungen also gerne.

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

Dann können Sie den Audio-Player mit einem Shortcode oder dem HTML5 Audio Player-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 weiter oben auf dem Bildschirm.

Weitere Details zum Platzieren des Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Um den Audio-Musikplayer mit einem Block hinzuzufügen, müssen Sie eine beliebige Seite oder Beitrag öffnen und auf die Schaltfläche „+“ klicken.

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

Als Nächstes können Sie das Dropdown-Menü „Player auswählen“ öffnen, um die Liste aller von Ihnen erstellten Audio-Player anzuzeigen.

Sie können nun auf einen Audio-Player klicken, um ihn zur Seite oder zum Beitrag hinzuzufügen.

Möglicherweise stellen Sie dann fest, dass der WordPress-Seiten-Editor den Audioplayer nicht anzeigt.

Wenn Sie jedoch auf die Schaltfläche „Vorschau“ klicken, können Sie sehen, wie der Player für Ihre Website-Besucher aussieht. In diesem Modus können Sie sogar die Audios anhören und die verschiedenen Wiedergabetasten selbst testen.

Wenn Sie mit dem Aussehen und der Funktionsweise des Audio-Players zufrieden sind, können Sie die Seite aktualisieren oder veröffentlichen.

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

Möchten Sie weitere Audiotracks zu Ihrer Website hinzufügen? Dann können Sie einfach den oben beschriebenen Prozess befolgen, um weitere Audioplayer zu erstellen und sie zu Ihrer Website hinzuzufügen.

Bonustipp: Machen Sie Ihre Website mit Bild- und Videogalerien unterhaltsamer

Möchten Sie Ihre Website unterhaltsamer und ansprechender gestalten? Erwägen Sie das Hinzufügen von Bild- und Videogalerien, die zu Ihrem Audio-Musik-Player-Widget passen.

Durch das Erstellen einer Galerie können Sie Ihre Fotos in einem übersichtlichen Rasterlayout präsentieren, Platz sparen und Ihre Website professioneller aussehen lassen. Thumbnails ermöglichen es Besuchern, Bilder in der Vorschau anzuzeigen, und sie können auf sie klicken, um sie in voller Größe zu sehen.

Zum Beispiel, wenn Sie Fotograf sind, kann eine gut organisierte Galerie Ihre Arbeit auf elegante und visuell beeindruckende Weise präsentieren.

Jetzt ist das Hinzufügen von Bildern zu Ihren WordPress-Beiträgen mit dem Bildblock ziemlich einfach. Aber die Dinge können etwas unübersichtlich werden, wenn Sie mehrere Bilder hinzufügen. Sie werden nacheinander gestapelt, sodass die Benutzer viel scrollen müssen.

Das ist definitiv nicht die visuell ansprechendste Einrichtung. 😬

Versuchen Sie stattdessen, den Galerie-Block im Gutenberg-Editor zu verwenden. Es ist eine einfache Möglichkeit, mehrere Bilder übersichtlicher anzuzeigen. Und wenn Sie noch mehr Funktionen wünschen, gibt es viele Galerie-Plugins, die Ihre Bildanzeige auf die nächste Stufe heben können, wie z. B. Envira Gallery.

Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Erstellung einer Bildergalerie in WordPress.

Außerdem sind Bilder zwar großartig, aber Videos können noch besser sein. Ein Videoschieberegler kann alles von Produktdemos und Rezensionen bis hin zu Kundenrezensionen in einem dynamischen Bereich präsentieren.

Zum Beispiel könnte eine Immobilien-Website virtuelle Immobilienbesichtigungen anbieten. Währenddessen könnte eine Reise-Website Reiseziele und Erlebnisse hervorheben, um Besucher anzulocken.

Mit einem Video-Slider können Sie ansprechende Inhalte verwenden, um Ihre besten Funktionen zu präsentieren, seien es Testimonials, Fallstudien oder Produkt-Highlights. Das Beste daran? Soliloquy kann Ihnen dabei helfen, einen ganz einfach zu erstellen.

Weitere Informationen finden Sie in unserem Leitfaden zur Erstellung eines Videoschiebereglers in WordPress.

Alles in allem können interaktive Galerien, sei es eine Albumgalerie, eine Produktpräsentation oder Video-Tutorials, die allgemeine Attraktivität Ihrer Website steigern und die Benutzererfahrung verbessern.

FAQs: So fügen Sie ein Audio-Player-Widget in WordPress hinzu

Wir haben viele Fragen zum Hinzufügen von Audio in WordPress erhalten. Hier sind die Antworten auf einige der häufigsten Fragen.

Was ist das beste Audio-Dateiformat für WordPress?

Für die beste Balance zwischen Klangqualität und Dateigröße empfehlen wir das MP3-Format. Es wird von allen modernen Browsern und Geräten weitgehend unterstützt. So können Ihre Besucher ein reibungsloses Hörerlebnis genießen, unabhängig davon, wie sie auf Ihre Website zugreifen.

Kann ich eine Playlist mit mehreren Songs erstellen?

Ja, das können Sie. Während der Standard-WordPress-Audioblock für einzelne Titel konzipiert ist, ermöglichen viele Plugins die Erstellung vollständiger Wiedergabelisten. Einige Plugins verbinden sich sogar mit Diensten wie Spotify oder SoundCloud, um ganze Alben auf Ihrer Website anzuzeigen.

Wie füge ich einen Audioplayer zur Seitenleiste meines WordPress-Blogs hinzu?

Sie können einen Audioplayer zu Ihrer Seitenleiste oder Ihrem Footer hinzufügen, mit WordPress-Widgets.

Navigieren Sie einfach zu Darstellung » Widgets in Ihrem Dashboard. Von dort aus können Sie den Audio-Block oder einen Block aus Ihrem gewählten Plugin zu jedem widget-fähigen Bereich Ihres Themes hinzufügen.

Weitere Anleitungen zur Verwendung von Audio auf WordPress

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Audio-Player-Widget in WordPress hinzufügen. Wenn Sie dies hilfreich fanden, möchten Sie vielleicht auch unsere anderen Anleitungen lesen zu:

• Wie man MP3-Audiodateien in WordPress hinzufügt
• Wie man Musik online auf WordPress verkauft
• Wie man einen Podcast startet und ihn erfolgreich macht
• Beste Audio-Player-Plugins für WordPress
• Beste WordPress-Plugins für Podcaster

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.