WordPress: incrustar un reprodutor de MP3 na publicación do teu blog

Reprodutor de mensaxes de blogue con WordPress

Co podcast e o intercambio de música tan prevalentes en liña, hai unha gran oportunidade para mellorar a experiencia dos teus visitantes no teu sitio inserindo audio nas publicacións do teu blog. Afortunadamente, WordPress segue desenvolvendo o seu soporte para incorporar outros tipos de medios e mp3 Os ficheiros son dos que son fáciles de facer.

Aínda que mostrar un reprodutor para unha entrevista recente é xenial, é posible que non sexa recomendable aloxar o ficheiro de audio real. A maioría dos servidores web de sitios de WordPress non están optimizados para transmitir contido multimedia, polo que non se sorprenda se empeza a atopar algúns problemas nos que alcanza os límites de uso de ancho de banda ou os seus postos de audio. Recomendo aloxar o ficheiro de audio real nun servizo de transmisión de audio ou motor de aloxamento de podcasts. E ... asegúrese de que o seu servidor admite SSL (un camiño https: //) ... un blog aloxado de forma segura non reproducirá un ficheiro de audio que non estea aloxado de forma segura noutros lugares.

Dito isto, se coñeces a situación do teu ficheiro e inserilo nunha publicación de blog é bastante sinxelo. WordPress ten o seu propio reprodutor de audio HTML5 integrado directamente nel para que poida usar un shortcode para amosar o reprodutor.

Aquí tes un exemplo dun episodio de podcast recente que fixen:

Coa última iteración do editor Gutenberg en WordPress, acabo de pegar a ruta do ficheiro de audio e o editor realmente creou o código curto. Segue o código curto real, onde substituiría o src polo URL completo do ficheiro que desexa reproducir.

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

WordPress admite tipos de ficheiros mp3, m4a, ogg, wav e wma. Incluso pode ter un código curto que proporcione unha alternativa no caso de que teña visitantes que utilizan navegadores que non admiten un ou outro:

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

Tamén pode mellorar o shortcode con outras opcións:

  • loop: unha opción para facer looping do audio.
  • reprodución automática: unha opción para reproducir automaticamente o ficheiro en canto se carga.
  • precarga - unha opción para precargar o ficheiro de audio coa páxina.

Xunta todo e aquí tes o que obtés:

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

Listas de reprodución de audio en WordPress

Se queres ter unha lista de reprodución, WordPress non admite actualmente o aloxamento externo de cada un dos teus ficheiros para reproducir, pero ofréceno se aloxas os teus ficheiros de audio internamente:

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

Existen algunhas solucións por aí que podes engadir ao teu tema infantil que permitirá a carga de ficheiros de son externos.

Engade o teu feed RSS de podcast á túa barra lateral

Usando o reprodutor de WordPress, escribín un complemento para amosar o podcast automaticamente nun widget da barra lateral. Podes le sobre isto aquí descarga o complemento do repositorio de WordPress.

Personalización do reprodutor de audio de WordPress

Como podes ver no meu propio sitio, o reprodutor MP3 é bastante básico en WordPress. Non obstante, porque é HTML5, podes disfrazalo bastante usando CSS. CSSIgniter escribiu un bo tutorial sobre personalizando o reprodutor de audio así que non o vou repetir todo aquí ... pero aquí tes as opcións que podes 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;
}

Mellora o teu reprodutor de MP3 de WordPress

Tamén hai algúns complementos de pago para amosar o seu audio MP3 nalgúns reprodutores de audio absolutamente impresionantes:

Divulgación: estou a usar as miñas ligazóns de afiliados para os complementos anteriores Codecanyon, un fantástico sitio de complementos que ten complementos ben soportados e un excelente servizo e soporte.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.