Wie Sie den Sticky HTML5 WordPress Music Player zu Ihrer Website hinzufügen

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Es gibt viele Gründe, warum Sie vielleicht einen Musik- oder Audio-Player zu Ihrer WordPress-Website hinzufügen möchten. Sie können ihn verwenden, um Benutzern zu ermöglichen, die Audio-Version des Artikels abzuspielen, den sie lesen, oder Sie können ihn verwenden, um einfach nette Hintergrundmusik zu der Website hinzuzufügen. Wenn Sie eine kleine Nachrichten-Website betreiben, wäre eine weitere nützliche Möglichkeit, einen Audio-Player zu verwenden, um die Benutzererfahrung zu verbessern, Audioversionen aller Nachrichtenschlagzeilen mit einer kurzen Zusammenfassung zu versorgen.

WordPress

15 Beste WordPress Audio Player und Video Player Plugins

Jane Baker
WordPress

Hinzufügen eines Musik-Players zu Ihrer WordPress-Website

Kyle Sloka-Frey
WordPress

Wie Sie einen kostenlosen WordPress-Musik-Player zu Ihrer Website hinzufügen

Monty Shokeen
WordPress

Wie Sie einen Audio-Player zu Ihrer WordPress-Website mit einem kostenlosen Plugin hinzufügen

Sajal Soni
WordPress

Beste kostenlose WordPress Audio Player Plugins

Monty Shokeen

Es stehen eine Menge von kostenlosen und kostenpflichtigen Plugins zur Verfügung, um einen Audio-Player zu Ihrer WordPress-Website hinzuzufügen. Wir haben bereits ein Tutorial erstellt, das diskutiert, wie Sie einen kostenlosen Musik-Player zu Ihrer WordPress-Website hinzufügen. In diesem Tutorial werden wir unseren Fokus auf das Sticky HTML5 Music Player WordPress Plugin verschieben, das auf CodeCanyon verfügbar ist. Wie Sie sehen werden, bietet das kostenpflichtige Plugin eine Menge wichtiger und nützlicher Funktionen, die im kostenlosen Plugin fehlen. Sie erhalten auch kostenlosen Support für sechs Monate und lebenslange kostenlose Updates.

Warum sollten Sie das Sticky HTML5 Music Player WordPress Plugin verwenden?

Das Plugin, das Sie auf Ihrer Website verwenden möchten, hängt von Ihren eigenen Anforderungen ab. Im Falle des Sticky HTML5 Music Player WordPress Plugin, hat es einige Funktionen die die Benutzererfahrung deutlich verbessern können.

Sie haben die Möglichkeit, alle grundlegenden Einstellungen wie Autoplay, Lautstärke, Looping oder Shuffling der Musik zu steuern. Sie können auch die Farbe verschiedener UI-Elemente wie die Schaltflächen Vorheriges, Pause, Shuffle und Nächstes ändern. Sie können diese Schaltflächen auch ausblenden, wenn sie nicht benötigt werden.

Eine sehr nützliche Funktion des Plugins ist die kontinuierliche Wiedergabe. Das bedeutet, dass das Plugin immer dann, wenn Sie zu einer neuen Seite navigieren, die Audiowiedergabe der vorherigen Minute fortsetzt. Auch der Audiopegel und alles andere bleibt gleich.

Ein weiteres nützliches Merkmal des Plugins ist seine Fähigkeit, den Inhalt aus einem Ordner von MP3-Dateien zu lesen, um automatisch die Wiedergabeliste zu generieren. Auf diese Weise müssen Sie nicht jede Audiodatei manuell zur Wiedergabeliste hinzufügen.

Das Plugin erstellt einen sticky Player – das bedeutet, dass er am unteren Rand des Bildschirms klebt und nicht mit allen anderen Inhalten auf der Website interagiert. Es ermöglicht Ihnen auch, eine Reihe von Optionen zu setzen, um den Player in minimierten oder maximierten Zustand zu laden.

In diesem Tutorial werden wir alle diese Funktionen des Plugins verwenden, um einen Musik-Player zu erstellen, der in der unteren linken Ecke des Bildschirms bleibt. Es wird auch automatisch eine Wiedergabeliste basierend auf Audiodateien in einem bestimmten Ordner generieren.

Erstellen Ihres Musik-Players

Sobald Sie das Plugin gekauft und installiert haben, ist es sehr einfach, einen Musik-Player zu Ihrer Website hinzuzufügen. Sie müssen nur die Option Neu hinzufügen aus dem WordPress-Dashboard unter LBG AUDIO3 HTML5 wählen.

Auf dem nächsten Bildschirm können Sie Ihrem Spieler einen beliebigen Namen geben. Dieser Name wird nur verwendet, um ihnen zu helfen, den Spieler zu identifizieren, so dass Sie ihn später ändern können.

Give your player a name for easy reference

Sie können nun das Aussehen des Spielers und viele andere Optionen ändern, indem Sie auf Spieler verwalten gehen und dann auf Spielereinstellungen klicken.

Select the player to change its settings

Auf der nächsten Seite sehen Sie viele Einstellungen, die für jeden Audio-Player, den Sie mit diesem Plugin erstellen, individuell geändert werden können. Für alle Steuerelemente im Audioplayer stehen zwei Skins zur Verfügung: blackControllers und whiteControllers. Sie bestimmen die Farbe verschiedener Schaltflächen wie Vorheriges, Spielen, Pause, Shuffle und Nächstes.

Die Farbe anderer UI-Elemente wie der Lautstärkeregelung oder der Pufferindikatoren kann mit einer Farbauswahl eingestellt werden. Sie können die Farben in einen beliebigen Wert ändern, um sie dem Gesamttheme der Website anzugleichen.

Es gibt viele andere Einstellungen am unteren Rand der gleichen Seite. Sie ermöglichen es Ihnen, verschiedene Wiedergabetasten ein- oder auszublenden. Sie können auch den Abstand zwischen dem Player und der Wiedergabeliste steuern, indem Sie den Wert des Player-Rands optimieren.

Wenn Sie möchten, dass Ihre Benutzer eine kontinuierliche Wiedergabe genießen, wenn sie verschiedene Seiten auf Ihrer Website besuchen, sollten Sie einen geeigneten Wert für die Einstellung Cookie-Ablaufzeit festlegen. Standardmäßig ist sie auf 1 festgelegt. Dies bedeutet, dass jeder Benutzer, der die Website mehrmals innerhalb eines Tages besucht, in der Lage sein wird, die Audiowiedergabe von der gleichen Position, an der er gegangen ist, fortzusetzen.

Hinzufügen von Songs zu einer Wiedergabeliste

Es gibt zwei Möglichkeiten, den Pfad von Audiodateien in Ihrem Musikplayer anzugeben und sie der Wiedergabeliste hinzuzufügen.

Die erste Methode erfordert, dass Sie auf die Playlist-Schaltfläche des entsprechenden Musik-Players auf dem Bildschirm Player verwalten klicken. Auf der nächsten Seite sehen Sie alle vorhandenen Audiodateien, die der aktuellen Wiedergabeliste bereits hinzugefügt wurden. Sie können sie umherziehen, um die Reihenfolge zu ändern, in der sie abgespielt werden.

Klicken Sie auf die Schaltfläche Neue hinzufügen, um der Wiedergabeliste eine Audiodatei hinzuzufügen. Nun müssen Sie nur den Pfad zu einer MP3-Datei angeben und einen Titel dafür festlegen. Alles andere ist optional. Der Titel der Datei wird in der Wiedergabeliste angezeigt. Klicken Sie auf die Schaltfläche Aufnahme hinzufügen, und die Änderungen werden sofort in der Musikplayer-Benutzeroberfläche widergespiegelt.

Dieser Vorgang kann sehr mühsam sein, wenn Sie 20 oder 30 Audiodateien zu einer einzelnen Wiedergabeliste hinzufügen möchten. Glücklicherweise generiert der Sticky HTML5 Music Player eine Playlist für Sie, wenn Sie einfach den Pfad zu dem Ordner angeben, in dem sich alle Ihre Dateien befinden.

Um dies zu tun, müssen Sie Playlist aus Ordner generieren unter LBG AUDIO3 HTML5 im WordPress-Dashboard auswählen. Geben Sie nun den Pfad zu dem Ordner an, in dem sich alle Audiodateien befinden. Denken Sie daran, dass dieser Pfad relativ zum WordPress-Installationsverzeichnis ist, sodass Sie keine führenden oder nachfolgenden Schrägstriche hinzufügen müssen. Wenn sich die Audiodateien beispielsweise in einem Ordner befinden, der favorite_music im Stammverzeichnis genannt wird, geben Sie einfach den Pfad als favorite_music anstelle von favorite_music/ oder /favorite_music/ an.

Specify a folder for automatic playlist creation

Sobald Sie auf Playlist generieren klicken, wird das Plugin automatisch den Titel und andere Informationen für jede Audiodatei basierend auf ihren Metadaten ausfüllen. Sie können den Titel oder den Autornamen später weiterhin manuell ändern, wenn Sie möchten.

Anpassen der Darstellung der Wiedergabeliste

Sie können auch den Abstand und die Farbe der Wiedergabeliste ändern, die unter dem Musikplayer angezeigt wird. Die Einstellungen dafür finden Sie unter Allgemeine Einstellungen auf derselben Seite.

Die Einstellung mit dem Titel Anzahl der Elemente pro Bildschirm bestimmt, wie viele Songs in der Wiedergabeliste gleichzeitig unter dem Player aufgelistet werden. Der Player beginnt, eine Bildlaufleiste auf der rechten Seite der Wiedergabeliste anzuzeigen, wenn zusätzliche Songs nicht auf einem einzigen Bildschirm angezeigt werden könnten. Dies ist sehr hilfreich, wenn die Wiedergabeliste viele Songs oder Audiodateien hat und Sie nicht möchten, dass der Player viel Platz auf dem Bildschirm einnimmt, wenn er maximiert wird.

Sobald Sie alle Werte an Ihre eigenen Projektanforderungen angepasst haben, können Sie oben auf die Schaltfläche Vorschau-Player klicken, um zu sehen, wie der Musik-Player am Ende aussieht.

Sobald Sie mit der Benutzeroberfläche und anderen Aspekten des Musikplayers voll zufrieden sind, können Sie sie jeder Webseite mit Shortcodes hinzufügen, wo Sie den Player verwenden möchten.

Hinzufügen des Musikplayers zu Ihrer Website

Dies ist der letzte Schritt des Tutorials. Sie können das Sticky HTML5 Music Player WordPress-Plugin zu jedem Beitrag oder jeder Seite hinzufügen, indem Sie den Shortcode kopieren, der auf der Seite Player verwalten im Dashboard-Menü des Plugins angezeigt wird. In unserem Fall ist der Shortcode [lbg_audio3_html5 settings_id='4'].

The completed player on a WordPress site

Wenn Sie den Shortcode auf jeder Seite Ihrer Website anzeigen möchten, wäre es eine bessere Option, ihn hinzuzufügen, einfach die Option Für Fußzeilen aktivieren unter Playereinstellungen auf true zu setzen. Dadurch wird der Musik-Player zur Fußzeile jeder Seite auf Ihrer Website hinzugefügt, ohne dass ein Shortcode verwendet wird.

Eine weitere Sache, die Sie sich merken sollten, ist, dass der Code für den Musik-Player an der Stelle hinzugefügt wird, an der Sie den Shortcode einfügen. Optisch bleibt der Spieler jedoch immer an einer festen Position auf der Webseite – in der unteren linken Ecke in unserem Fall.

Abschließende Gedanken

In diesem Tutorial lernten wir, wie man einen Musik-Player zu jeder WordPress-Website mit dem Sticky HTML5 Music Player WordPress-Plugin von CodeCanyon hinzufügt. Das Plugin bietet einige nette Funktionen wie die automatische Generierung von Wiedergabelisten aus dem Inhalt eines Ordners und kontinuierliche Wiedergabe, wenn Benutzer verschiedene Webseiten laden. Es ist auch sehr einfach, die Benutzeroberfläche verschiedener Musikplayer so zu ändern, dass sie sich perfekt mit dem Rest der Website verbinden.

Es gibt ein paar Situationen, in denen die Verwendung der kontinuierlichen Wiedergabefunktion nützlich sein könnte, wie das Spielen aller wichtigen Schlagzeilen des Tages oder das Erzählen eines Ereignisses oder einer Geschichte. In ähnlicher Weise können Sie auch die Funktion zur automatischen Wiedergabeliste verwenden, um schnell verschiedene Wiedergabelisten für verschiedene Benutzer und Anlässe zu erstellen.

Wie planen Sie die Verwendung dieses Musikplayers auf Ihrer Website? Lassen Sie es uns in den Kommentaren wissen.