WordPress: Vložte do svého blogového příspěvku MP3 přehrávač

Přehrávač MP3 na blogu s WordPress

Díky podcastingu a sdílení hudby tak rozšířenému online existuje skvělá příležitost, jak vylepšit zážitek vašich návštěvníků na vašem webu vložením zvuku do vašich příspěvků na blogu. Naštěstí WordPress nadále vyvíjí svou podporu pro vkládání dalších typů médií - a mp3 soubory jsou jedním z těch, které se dají snadno udělat!

I když je zobrazení přehrávače na nedávném pohovoru skvělé, hostování skutečného zvukového souboru nemusí být vhodné. Většina webových hostitelů pro weby WordPress není optimalizována pro streamování médií - takže nebuďte překvapeni, když začnete narazit na problémy, kde narazíte na limity využití šířky pásma nebo vaše zvukové stánky úplně. Doporučil bych hostovat skutečný zvukový soubor ve službě streamování zvuku nebo v hostitelském modulu podcastu. A… ujistěte se, že váš hostitel podporuje SSL (cesta https: //) ... blog, který je bezpečně hostován, nebude přehrávat zvukový soubor, který není bezpečně hostován jinde.

To znamená, že znáte umístění souboru, jeho vložení do příspěvku na blogu je poměrně jednoduché. WordPress má vlastní audiopřehrávač HTML5 zabudovaný přímo do něj, takže k zobrazení přehrávače můžete použít krátký kód.

Zde je příklad z nedávné epizody podcastu, kterou jsem udělal:

S nejnovější iterací editoru Gutenberg ve WordPressu jsem právě vložil cestu k audio souboru a editor ve skutečnosti vytvořil krátký kód. Následuje skutečný zkrácený kód, kde byste src nahradili úplnou adresou URL souboru, který chcete přehrát.

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

WordPress podporuje typy souborů mp3, m4a, ogg, wav a wma. Můžete dokonce mít zkrácený kód, který poskytuje záložní řešení v případě, že máte návštěvníky pomocí prohlížečů, které nepodporují jeden nebo druhý:

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

Zkrácený kód můžete vylepšit také dalšími možnostmi:

  • smyčka - možnost smyčkování zvuku.
  • autoplay - možnost automatického přehrávání souboru, jakmile se načte.
  • preload - možnost předběžného načtení zvukového souboru se stránkou.

Spojte to dohromady a získáte následující:

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

Zvukové seznamy skladeb ve WordPressu

Pokud chcete mít seznam skladeb, WordPress aktuálně nepodporuje externí hostování každého z vašich souborů, které chcete přehrát, ale nabízí to, pokud hostujete zvukové soubory interně:

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

Existují některá řešení tam můžete přidat do svého podřízeného motivu, který umožní načítání externích zvukových souborů.

Přidejte svůj RSS kanál podcast na svůj postranní panel

Pomocí přehrávače WordPress jsem napsal plugin pro automatické zobrazení podcastu v widgetu postranního panelu. Můžeš Přečtěte si o tom zde a stáhněte si plugin z úložiště WordPress.

Přizpůsobení zvukového přehrávače WordPress

Jak vidíte na mých vlastních stránkách, MP3 přehrávač je ve WordPressu docela jednoduchý. Protože je to ale HTML5, můžete to pomocí CSS trochu obléct. CSSIgniter napsal skvělý návod přizpůsobení audio přehrávače takže to tady nebudu opakovat… ale tady jsou možnosti, které si můžete přizpůsobit:

/* 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;
}

Vylepšete svůj MP3 přehrávač WordPress

K dispozici jsou také některé placené doplňky pro zobrazení zvuku MP3 v některých naprosto ohromujících zvukových přehrávačích:

Zveřejnění: Používám své přidružené odkazy pro výše uvedené doplňky prostřednictvím Codecanyon, skvělý web s pluginy, který má dobře podporované pluginy a vynikající služby a podporu.

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.