WordPress: incrustar un reproductor de MP3 a la publicació del vostre bloc

Publicació de blocs amb reproductor de MP3 amb WordPress

Amb el podcast i l’ús compartit de música tan prevalent en línia, hi ha una gran oportunitat per millorar l’experiència dels visitants al vostre lloc mitjançant la inserció d’àudio a les publicacions del vostre bloc. Afortunadament, WordPress continua desenvolupant el seu suport per incorporar altres tipus de suports i mp3 els fitxers són fàcils de fer.

Tot i que és fantàstic mostrar un reproductor per a una entrevista recent, és possible que no sigui recomanable allotjar el fitxer d’àudio real. La majoria d’amfitrions web dels llocs de WordPress no estan optimitzats per a la transmissió de fitxers multimèdia, de manera que no us sorprengueu si comenceu a tenir problemes amb els límits d’ús de l’amplada de banda o les vostres parades d’àudio. Recomanaria allotjar el fitxer d'àudio real en un servei de transmissió d'àudio o en un motor d'allotjament de podcasts. I ... assegureu-vos que el vostre amfitrió admeti SSL (un camí https: //) ... un bloc allotjat de manera segura no reproduirà un fitxer d'àudio que no estigui allotjat de manera segura en cap altre lloc.

Dit això, si coneixeu la ubicació del fitxer i inserir-lo en una publicació del bloc és bastant senzill. WordPress té el seu propi reproductor d'àudio HTML5 integrat directament, de manera que podeu utilitzar un codi curt per mostrar el reproductor.

Aquí teniu un exemple d’un episodi de podcast recent que vaig fer:

Amb la darrera iteració de l’editor Gutenberg a WordPress, acabo d’enganxar el camí del fitxer d’àudio i l’editor realment ha creat el codi curt. Segueix el codi curt real, on substituiríeu el src per l'URL complet del fitxer que voleu reproduir.

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

WordPress admet tipus de fitxers mp3, m4a, ogg, wav i wma. Fins i tot podeu tenir un shortcode que us ofereixi una alternativa si teniu visitants que utilitzen navegadors que no admeten l’un o l’altre:

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

També podeu millorar el shortcode amb altres opcions:

  • bucle: una opció per fer un bucle de l'àudio.
  • reproducció automàtica: una opció per reproduir automàticament el fitxer tan bon punt es carrega.
  • precàrrega: una opció per precarregar el fitxer d'àudio amb la pàgina.

Reuneix-ho tot i això és el que obtens:

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

Llistes de reproducció d’àudio a WordPress

Si voleu tenir una llista de reproducció, WordPress actualment no admet allotjament extern de cadascun dels vostres fitxers per reproduir-los, però sí que l’ofereix si esteu allotjant els vostres fitxers d’àudio internament:

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

hi ha algunes solucions allà fora que podeu afegir al vostre tema infantil que permetrà carregar fitxers d'àudio externs.

Afegiu el vostre feed RSS de podcasts a la barra lateral

Amb el reproductor de WordPress, vaig escriure un connector per mostrar el podcast automàticament en un widget de la barra lateral. Tu pots llegiu-ne aquí descarregueu el connector del dipòsit de WordPress.

Personalització del reproductor d'àudio de WordPress

Com podeu veure pel meu propi lloc, el reproductor MP3 és bastant bàsic a WordPress. Tanmateix, com que és HTML5, podeu vestir-lo bastant amb CSS. CSSIgniter ha escrit un gran tutorial sobre personalització del reproductor d’àudio així que no ho repetiré tot aquí ... però aquí teniu les opcions que podeu personalitzar:

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

Milloreu el vostre reproductor de MP3 de WordPress

També hi ha alguns connectors de pagament per mostrar l'àudio MP3 en alguns reproductors d'àudio absolutament impressionants:

Divulgació: utilitzo els meus enllaços d’afiliació per als connectors anteriors mitjançant Codecanyon, un fantàstic lloc de connectors que té connectors ben compatibles i un servei i suport excel·lents.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.