WordPress: Betten Sie einen MP3-Player in Ihren Blog-Beitrag ein

Blog Post MP3 Player mit WordPress

Da Podcasting und Musikaustausch online so verbreitet sind, besteht eine großartige Möglichkeit, die Erfahrung Ihrer Besucher auf Ihrer Website zu verbessern, indem Sie Audio in Ihre Blog-Beiträge einbetten. Zum Glück entwickelt WordPress seine Unterstützung für die Einbettung anderer Medientypen weiter - und mp3 Dateien sind eine von denen, die einfach zu machen sind!

Während das Anzeigen eines Players für ein aktuelles Interview großartig ist, ist das Hosten der eigentlichen Audiodatei möglicherweise nicht ratsam. Die meisten Webhosts für WordPress-Websites sind nicht für Streaming-Medien optimiert. Seien Sie also nicht überrascht, wenn Sie auf Probleme stoßen, bei denen Sie die Bandbreitennutzung einschränken oder Ihre Audio-Stalls insgesamt. Ich würde empfehlen, die eigentliche Audiodatei auf einem Audio-Streaming-Dienst oder einer Podcast-Hosting-Engine zu hosten. Und… stellen Sie sicher, dass Ihr Host SSL (einen https: // Pfad) unterstützt… ein Blog, das sicher gehostet wird, spielt keine Audiodatei ab, die an anderer Stelle nicht sicher gehostet wird.

Wenn Sie jedoch den Speicherort Ihrer Datei kennen, ist das Einbetten in einen Blog-Beitrag recht einfach. In WordPress ist ein eigener HTML5-Audio-Player direkt integriert, sodass Sie den Player mithilfe eines Shortcodes anzeigen können.

Hier ist ein Beispiel aus einer Podcast-Episode, die ich kürzlich gemacht habe:

Mit der neuesten Iteration des Gutenberg-Editors in WordPress habe ich gerade den Audiodateipfad eingefügt und der Editor hat tatsächlich den Shortcode erstellt. Es folgt der eigentliche Shortcode, in dem Sie den src durch die vollständige URL der Datei ersetzen, die Sie abspielen möchten.

[audio src="audio-source.mp3"]

WordPress unterstützt die Dateitypen mp3, m4a, ogg, wav und wma. Sie können sogar einen Shortcode verwenden, der einen Fallback für den Fall bietet, dass Besucher Browser verwenden, die den einen oder anderen nicht unterstützen:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

Sie können den Shortcode auch mit anderen Optionen erweitern:

  • loop - eine Option zum Schleifen des Audios.
  • Autoplay - eine Option zum automatischen Abspielen der Datei, sobald sie geladen wird.
  • Preload - eine Option zum Vorladen der Audiodatei mit der Seite.

Füge alles zusammen und hier ist was du bekommst:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

Audio-Wiedergabelisten in WordPress

Wenn Sie eine Wiedergabeliste haben möchten, unterstützt WordPress derzeit nicht das externe Hosting jeder Ihrer abzuspielenden Dateien. Sie bieten diese jedoch an, wenn Sie Ihre Audiodateien intern hosten:

[playlist ids="123,456,789"]

Es gibt einige Lösungen da draußen, die Sie Ihrem untergeordneten Thema hinzufügen können, um das Laden externer Audiodateien zu ermöglichen.

Fügen Sie Ihren Podcast-RSS-Feed zu Ihrer Seitenleiste hinzu

Mit dem WordPress-Player habe ich ein Plugin geschrieben, um Ihren Podcast automatisch in einem Seitenleisten-Widget anzuzeigen. Sie können Lesen Sie hier darüber Laden Sie das Plugin herunter aus dem WordPress-Repository.

Anpassung des WordPress Audio Players

Wie Sie auf meiner eigenen Website sehen können, ist der MP3-Player in WordPress ziemlich einfach. Da es sich jedoch um HTML5 handelt, können Sie es mit CSS ziemlich gut gestalten. CSSIgniter hat ein großartiges Tutorial dazu geschrieben Anpassen des Audio-Players Ich werde hier also nicht alles wiederholen ... aber hier sind die Optionen, die Sie anpassen können:

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
.mytheme-mejs-container .mejs-button > button {
  background-image: url("images/mejs-controls-dark.svg");
}

.mytheme-mejs-container .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
  height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
  top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
  margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
  top: 19px;
}

Erweitern Sie Ihren WordPress MP3-Player

Es gibt auch einige kostenpflichtige Plugins für die Anzeige Ihres MP3-Audios in einigen absolut atemberaubenden Audio-Playern:

Offenlegung: Ich verwende meine Affiliate-Links für die oben genannten Plugins über Codecanyon, eine fantastische Plugin-Site mit gut unterstützten Plugins und hervorragendem Service und Support.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.