WordPress: incorpora un lettore MP3 nel tuo post sul blog

Post sul blog Lettore MP3 con WordPress

Con il podcasting e la condivisione di musica così diffusi online, c'è una grande opportunità per migliorare l'esperienza dei tuoi visitatori sul tuo sito incorporando l'audio nei post del tuo blog. Per fortuna, WordPress continua ad evolvere il suo supporto per l'incorporamento di altri tipi di media - e mp3 i file sono uno di quelli facili da fare!

Sebbene mostrare un giocatore per una recente intervista sia fantastico, ospitare il file audio effettivo potrebbe non essere consigliabile. La maggior parte degli host web per i siti WordPress non sono ottimizzati per lo streaming multimediale, quindi non sorprenderti se inizi a riscontrare alcuni problemi in cui raggiungi i limiti sull'utilizzo della larghezza di banda o si blocca del tutto l'audio. Consiglierei di ospitare il file audio effettivo su un servizio di streaming audio o un motore di hosting di podcast. E ... assicurati che il tuo host supporti SSL (un percorso https: //) ... un blog ospitato in modo sicuro non riprodurrà un file audio che non sia ospitato in modo sicuro altrove.

Detto questo, se conosci la posizione del tuo file, incorporarlo in un post del blog è abbastanza semplice. WordPress ha il proprio lettore audio HTML5 integrato direttamente in esso in modo da poter utilizzare uno shortcode per visualizzare il lettore.

Ecco un esempio tratto da un recente episodio di podcast che ho fatto:

Con l'ultima iterazione dell'editor Gutenberg in WordPress, ho appena incollato il percorso del file audio e l'editor ha effettivamente creato lo shortcode. Segue lo shortcode effettivo, dove si sostituirà src con l'URL completo del file che si desidera riprodurre.

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

WordPress supporta i tipi di file mp3, m4a, ogg, wav e wma. Puoi persino avere uno shortcode che fornisce un fallback nel caso in cui i visitatori utilizzino browser che non supportano l'uno o l'altro:

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

Puoi migliorare lo shortcode anche con altre opzioni:

  • loop - un'opzione per riprodurre in loop l'audio.
  • autoplay: un'opzione per riprodurre automaticamente il file non appena viene caricato.
  • preload - un'opzione per precaricare il file audio con la pagina.

Metti tutto insieme ed ecco cosa ottieni:

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

Playlist audio in WordPress

Se vuoi avere una playlist, WordPress attualmente non supporta l'hosting esterno di ciascuno dei tuoi file da riprodurre, ma lo offrono se stai ospitando internamente i tuoi file audio:

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

Ci sono alcune soluzioni là fuori che puoi aggiungere al tuo tema figlio che abiliterà il caricamento di file audio esterno.

Aggiungi il feed RSS del tuo podcast alla barra laterale

Utilizzando il lettore WordPress, ho scritto un plugin per visualizzare automaticamente il tuo podcast in un widget della barra laterale. Puoi Leggi qui qui scarica il plugin dal repository di WordPress.

Personalizzazione del lettore audio di WordPress

Come puoi vedere dal mio sito, il lettore MP3 è piuttosto semplice in WordPress. Tuttavia, poiché è HTML5, puoi vestirlo un po 'usando i CSS. CSSIgniter ha scritto un ottimo tutorial su personalizzazione del lettore audio quindi non ripeterò tutto qui ... ma ecco le opzioni che puoi personalizzare:

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

Migliora il tuo lettore MP3 WordPress

Ci sono anche alcuni plugin a pagamento per visualizzare il tuo audio MP3 in alcuni lettori audio assolutamente sbalorditivi:

Divulgazione: sto usando i miei link di affiliazione per i plugin di cui sopra tramite CodeCanyon, un fantastico sito di plugin che ha plugin ben supportati e un servizio e supporto eccezionali.

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.