TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

133

Medien sind sehr wichtig, um Benutzer anzuziehen und auf Ihrer Website zu halten. Sie können YouTube und andere Videos ganz einfach in Ihr WordPress einbetten. Wenn Sie ein Audio auf Ihrer Website einbetten möchten, können Sie dies wie folgt tun. WordPress verfügt über einen integrierten HTML5-Audioplayer, um Ihre Audiodateien auf einfache Weise zu präsentieren. Sie können entweder einen Player mit einzelnem Audio oder mit mehreren Audiodateien als Playlist erstellen. In diesem Artikel erklären wir, wie Sie mit dem Standard-Audio-Shortcode einen Audioplayer zur WordPress-Site hinzufügen.



Audio in WordPress ohne Plugin hinzufügen

WordPress verfügt über einen integrierten Audio-Shortcode zum Einfügen eines HTML5-Audioplayers in Ihre Beiträge, Seiten und Widgets. Es unterstützt alle HTML5-unterstützten Dateitypen wie .mp3, .egg und .wav.

Einfügen einer einzelnen Audiodatei

Laden Sie Ihre Audiodatei wie bei allen anderen Bildern und Videos über die Schaltfläche "Medien hinzufügen" im WordPress-Posteditor hoch. Nachdem die Datei hochgeladen wurde, geben Sie die Trackdetails auf dem Medienbildschirm ein. WordPress ermöglicht es Ihnen, Trackdetails wie den Titel Ihres Audios hinzuzufügen, Künstlername, Albumname, Bildunterschrift und Beschreibung für Ihre Audiodatei wie unten gezeigt.

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

Hinzufügen von Trackdetails einer Audiodatei in WordPress

Obwohl der Einzeldatei-Audioplayer diese Details auf dem Bildschirm nicht verwendet, werden diese Details in der Wiedergabeliste angezeigt. Scrollen Sie bis zum Ende des Bereichs und überprüfen Sie, ob Sie die Option „Media Player einbetten” ausgewählt haben. Es sollte aus der Dropdown-Liste unter "Einbetten oder Verknüpfen" im Abschnitt "Einstellungen für die Anzeige von Anhängen" ausgewählt werden.

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

Wählen Sie die Option Media Player einbetten

Dies ist eine wichtige Einstellung, die es WordPress ermöglicht, einen Audioplayer einzufügen, anstatt auf die Mediendatei oder die Anhangsseite zu verlinken. Klicken Sie auf die Schaltfläche „In Beitrag einfügen”, um die Datei zu Ihrem WordPress-Beitrag hinzuzufügen. WordPress fügt automatisch den HTML5-Audioplayer hinzu.

Unten sehen Sie ein Beispiel für einen standardmäßigen HTML5-Audioplayer, der mithilfe eines Audio-Shortcodes eingefügt wurde.

Der Audioplayer verfügt über minimale Bedienelemente mit Play / Pause-Tasten, Fortschrittsbalken mit Zeitdauer, Lautstärkeregler und Lautstärkebalken. Der Standard-Audioplayer reagiert und belegt die verfügbare Breite basierend auf der Breite des Browsers. Und der veröffentlichte Artikel hat denselben Audioplayer, den Sie im Post-Editor sehen.

Anpassen des Audio-Shortcodes

Klicken Sie nun im Editor auf die Registerkarte „Text”, um zu sehen, dass die Audiodatei im Wesentlichen einen Shortcode verwendet, um als Player angezeigt zu werden.

[if lt IE 9]><script>document.createElement('audio');</script><![endif]

Obwohl der Shortcode sowohl offene als auch schließende Tags hat, ist das schließende Audio-Tag nicht obligatorisch. Sie können die Fallback-Audiodateien auch mit dem folgenden Shortcode hinzufügen. Wenn in diesem Fall ein Problem beim Abspielen der .mp3-Datei auftritt, wählt WordPress die Fallback-Option .ogg und dann .wav.

Audio Player

Looping- und Autoplay-Optionen können wie folgt hinzugefügt werden:

Audio Player

Stellen Sie sicher, dass Sie die Autoplay-Option nur bei Bedarf aktivieren, um eine gute Benutzererfahrung zu bieten.

Einfügen einer Playlist

Klicken Sie in Ihrem Post-Editor auf die Schaltfläche „Medien hinzufügen” und dann auf die Option „Audio-Playlist erstellen”. Laden Sie die gewünschten Audiodateien hoch oder wählen Sie sie aus, die in der Playlist angezeigt werden sollen, und klicken Sie auf die Schaltfläche „Neue Playlist erstellen”.

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

Erstellen einer Audio-Playlist in WordPress

Sie werden zum Bildschirm zum Bearbeiten der Wiedergabeliste weitergeleitet, wie unten gezeigt. Ziehen Sie die Dateien per Drag-and-Drop, um die Abspielreihenfolge neu zu ordnen und die Untertitel bei Bedarf zu ändern.

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

Bearbeiten von Audio-Playlists in WordPress

Aktivieren oder deaktivieren Sie im Bereich "Playlist-Einstellungen" auf der rechten Seite die Titelliste, den Künstlernamen und die vorgestellten Bilder, die im Audioplayer angezeigt werden sollen oder nicht.

Klicken Sie abschließend auf „Audio-Playlist einfügen” und Sie sehen den Audio-Player mit Playlist wie folgt:

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

Audioplayer mit Playlist in WordPress

Hinweis: Um ausgewählte Bilder für Audiodateien hinzuzufügen, navigieren Sie zum Menü „Medien > Bibliothek”. Bearbeiten Sie die hochgeladenen Audiodateien und fügen Sie jeder Audiodatei ein vorgestelltes Bild hinzu.


In Verbindung stehende Artikel:


Anpassen des Playlist-Shortcodes

Wenn Sie zur Registerkarte "Text" wechseln, werden Sie wieder feststellen, dass WordPress Shortcode verwendet, um eine Playlist wie folgt einzufügen:

[playlist ids="xxx,xxx,xxx"]

Sie können die folgenden Parameter hinzufügen, um die Wiedergabeliste anzupassen:

Parameter Standardwert Andere mögliche Werte Beschreibung
Typ Audio- Video Ändern Sie den Audioplayer in den Videoplayer (Sie müssen die erforderlichen Videos hochgeladen haben).
Auftrag ASC DESC Aufsteigende oder absteigende Reihenfolge
ids Anhangs-IDs Durch Komma getrennt
ausschließen leer Anhang-IDs eingeben Eingegebene IDs werden von der Playlist ausgeschlossen
Trackliste wahr falsch Playlist anzeigen oder ausblenden
Titelnummern wahr falsch Titelnummern in der Playlist anzeigen oder ausblenden
Bilder wahr falsch Vorgestelltes Bild im Player anzeigen oder ausblenden
Künstler wahr falsch Künstlernamen in der Playlist anzeigen oder ausblenden
Stil hell dunkel Tragen Sie helle oder dunkle Haut auf

Sie können beispielsweise den Standardplayer für den hellen Stil in den dunklen Stil ändern und die Titelnummern in der Liste deaktivieren, indem Sie den folgenden Shortcode verwenden:

[playlist ids="xxx,xxx,xxx" style="dark" tracknumbers="false"]

Audioplayer in Seitenleiste und Fußzeile einfügen

Der Zweck der Verwendung von Shortcode ist sehr einfach – er kann in jeden Bereich Ihrer Website wie Seitenleiste und Fußzeile eingefügt werden. Ziehen Sie unter „Darstellung > Widgets” das „Text”-Widget auf die Seitenleiste oder den Fußbereich, in dem Sie den Player hinzufügen möchten.

Wie füge ich einen Audioplayer in einer WordPress-Site ohne Plugin hinzu?

Audioplayer im Widget-Bereich hinzufügen

Fügen Sie die Audio- oder Playlist-Shortcodes mit Ihrer Anpassung wie oben beschrieben ein. Speichern Sie Ihr Widget und der Player wird im ausgewählten Widget-Bereich angezeigt.

Letzte Worte

Obwohl die integrierte Audioeinbettung eine gute Option ist, ist sie einfach und kann möglicherweise nicht erfüllt werden, wenn Sie eine vollständige Audioplayer-Einrichtung benötigen. Die alternativen Optionen sind die Verwendung eines Audioplayer-Plugins oder das Einbetten von Audioplayern von Drittanbieter-Websites wie SoundCloud.

Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen