WordPress: inserte un reproductor MP3 en su publicación de blog

Publicación de blog Reproductor MP3 con WordPress

Dado que el podcasting y el intercambio de música son tan frecuentes en línea, existe una gran oportunidad para mejorar la experiencia de sus visitantes en su sitio incorporando audio en las publicaciones de su blog. Afortunadamente, WordPress continúa evolucionando su soporte para incrustar otros tipos de medios, y mp3 ¡Los archivos son uno de los más fáciles de hacer!

Si bien mostrar un reproductor para una entrevista reciente es excelente, es posible que no sea aconsejable alojar el archivo de audio real. La mayoría de los servidores web para sitios de WordPress no están optimizados para la transmisión de medios, así que no se sorprenda si comienza a tener algunos problemas en los que alcanza los límites en el uso de ancho de banda o su audio se detiene por completo. Recomendaría alojar el archivo de audio real en un servicio de transmisión de audio o en un motor de alojamiento de podcasts. Y ... asegúrese de que su host admita SSL (una ruta https: //) ... un blog alojado de forma segura no reproducirá un archivo de audio que no esté alojado de forma segura en otro lugar.

Dicho esto, si conoce la ubicación de su archivo, incrustarlo en una publicación de blog es bastante simple. WordPress tiene su propio reproductor de audio HTML5 integrado directamente en él, por lo que puede usar un código corto para mostrar el reproductor.

Aquí hay un ejemplo de un episodio de podcast reciente que hice:

Con la última versión del editor de Gutenberg en WordPress, simplemente pegué la ruta del archivo de audio y el editor creó el código corto. A continuación, se muestra el código abreviado real, donde debe reemplazar el src con la URL completa del archivo que desea reproducir.

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

WordPress es compatible con los tipos de archivo mp3, m4a, ogg, wav y wma. Incluso puede tener un código corto que proporcione un respaldo en caso de que tenga visitantes que utilicen navegadores que no admitan uno u otro:

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

También puede mejorar el código corto con otras opciones:

  • loop: una opción para reproducir el audio en bucle.
  • reproducción automática: una opción para reproducir automáticamente el archivo tan pronto como se cargue.
  • preload: una opción para precargar el archivo de audio con la página.

Ponlo todo junto y esto es lo que obtienes:

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

Listas de reproducción de audio en WordPress

Si desea tener una lista de reproducción, WordPress actualmente no admite el alojamiento externo de cada uno de sus archivos para reproducir, pero lo ofrecen si está alojando sus archivos de audio internamente:

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

Existen algunas soluciones que puede agregar a su tema infantil que permitirá la carga de archivos de audio externos.

Agregue su fuente RSS de podcasts a su barra lateral

Usando el reproductor de WordPress, escribí un complemento para mostrar su podcast automáticamente en un widget de barra lateral. Usted puede Leer sobre esto aquí y descargar el complemento desde el repositorio de WordPress.

Personalización del reproductor de audio de WordPress

Como puede ver en mi propio sitio, el reproductor MP3 es bastante básico en WordPress. Sin embargo, debido a que es HTML5, puedes disfrazarlo bastante usando CSS. CSSIgniter ha escrito un gran tutorial sobre personalización del reproductor de audio así que no lo repetiré todo aquí ... pero aquí están las opciones que puede personalizar:

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

Mejore su reproductor MP3 de WordPress

También hay algunos complementos pagos para mostrar su audio MP3 en algunos reproductores de audio absolutamente impresionantes:

Divulgación: estoy usando mis enlaces de afiliados para los complementos anteriores a través de Codecanyon, un fantástico sitio de complementos que tiene complementos bien compatibles y un servicio y soporte sobresalientes.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.