WordPress: Incrustà un Lettore MP3 in u Vostru Post di Blog

Blog Post Lettore MP3 cù WordPress

Cù u podcasting è a spartera musicale cusì diffusa in ligna, ci hè una grande opportunità per arricchisce l'esperienza di i vostri visitatori in u vostru situ incrustendu audio in i vostri posti di blog. Fortunatamente, WordPress continua à evoluzione u so supportu per incastà altri tippi di media - è mp3 i fugliali sò unu di quelli chì sò faciuli à fà!

Mentre visualizà un lettore per una recente intervista hè ottimu, accoglie u veru file audio pò ùn esse micca consigliabile. A maiò parte di l'òspiti web per i siti WordPress ùn sò micca ottimizzati per streaming media - allora ùn vi maravigghiate se cuminciate à incontrà qualchi prublemi induve avete toccu i limiti di l'usu di a larghezza di banda o di e vostre stalle audio. Avissi da raccomandà di ospità u fugliale audio attuale nantu à un serviziu di streaming audio o di un mutore di hosting di podcast. È ... assicuratevi chì u vostru òspite supporti SSL (un https: // chjassu) ... un blog chì hè ospitu in modu sicuru ùn riproduce micca un fugliale audio chì ùn hè micca ospitu in modu sicuru in altrò.

Dittu chistu, si cunnosce a situazione di u vostru fugliale, incarnallu in un post di blog hè abbastanza sèmplice. WordPress hà u so propiu lettore audio HTML5 integratu direttamente in ellu da pudè aduprà un shortcode per visualizà u lettore.

Eccu un esempiu da un recente episodiu di podcast chì aghju fattu:

Cù l'ultima iterazione di l'editore Gutenberg in WordPress, aghju appena incollatu u percorsu di u file audio è l'editore hà creatu in realtà u shortcode. U currettu currettu seguita, induve puderete rimpiazzà u src cù l'URL cumpletu di u fugliale chì vulete ghjucà.

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

WordPress supporta i filetipi mp3, m4a, ogg, wav è wma. Pudete ancu avè un shortcode chì furnisce una riserva in casu avete visitatori chì utilizanu navigatori chì ùn supportanu micca unu o l'altru:

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

Pudete migliurà u shortcode ancu cù altre opzioni:

  • loop - una opzione per looping l'audio.
  • riproduzione automatica - una opzione per ghjucà automaticamente u fugliale appena si carica.
  • precaricamentu - una opzione per precaricà u fugliale audio cù a pagina.

Mettite tuttu inseme è eccu ciò chì avete:

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

Playlists Audio in WordPress

Se vulete avè una lista di riproduzione, WordPress ùn supporta micca oghje l'alloghju esternu di ognunu di i vostri fugliali da ghjucà, ma l'offrenu se site l'ospitu internu di i vostri fugliali audio:

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

Ci hè qualchi suluzione là fora chì pudete aghjunghje à u vostru Tema Zitellu chì permetterà u caricamentu di file audio esterni.

Aghjunghjite u vostru Flussu RSS di Podcast À A Vostra Sidebar

Usendu u lettore WordPress, aghju scrittu un plugin per visualizà u vostru podcast automaticamente in un widget di a barra laterale. Poi leghjite quì e scaricate u plugin da u repositoriu WordPress.

Persunalizazione di u Lettore Audio WordPress

Cumu pudete vede da u mo situ, u lettore MP3 hè abbastanza basicu in WordPress. Tuttavia, perchè hè HTML5, pudete vestitelu abbastanza cù CSS. CSSIgniter hà scrittu un grande tutoriale annantu persunalizà u lettore audio allora ùn ripeteraghju micca tuttu quì ... ma eccu e opzioni chì pudete persunalizà:

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

Migliorate u vostru Lettore MP3 di WordPress

Ci hè ancu qualchì plugin pagatu per vede u vostru audio MP3 in certi lettori audio assolutamente stupenti:

Disclosure: Usu i mo ligami affiliati per i plugins sopra via Codecanyon, un situ fantasticu di plugin chì hà plugins ben supportati è serviziu è sustegnu eccezziunale.

Chì ne pensi?

Stu situ utilizeghja Akismet per reducisce u puzzicheghju. Sapete ciò chì i dati di i vostri dati è processatu.