¿Quieres añadir un widget reproductor de música en WordPress?
Un reproductor de música es una forma estupenda de compartir canciones, podcasts, entrevistas y otros archivos de audio con su audiencia. Esto puede ayudar a crear una experiencia más interesante y participativa en su sitio.
En este artículo, le mostraremos cómo puede añadir un reproductor de música de audio en WordPress.
Por qué añadir un widget de reproductor de música en WordPress
Un reproductor de música permite a los visitantes escuchar audio directamente en su sitio web WordPress.
Si eres podcaster o músico, incluir audio en tu propio sitio puede mantener a tus visitantes y seguidores al día de tu trabajo.
También puede animar a la gente a visitar tu sitio web directamente en lugar de reproducir tu audio en otras plataformas. Una vez que estas personas estén en tu sitio, podrás ganar más dinero mostrando anuncios en tu blog de WordPress o vendiendo el archivo de audio como descarga digital.
Aunque no crees audio original, incrustar contenido de plataformas de terceros como Spotify es una forma sencilla de crear un sitio web más atractivo. Esto puede mantener a los visitantes en tu sitio durante más tiempo y hacer que la experiencia sea más divertida.
Dicho esto, veamos cómo añadir un reproductor de música en WordPress. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar.
- Método 1. Cómo añadir un widget reproductor de música usando el bloque Audio (fácil)
- Método 2. Cómo añadir un widget reproductor de música usando un plugin (más personalizable)
Método 1. Cómo añadir un widget de reproductor de música con el bloque de audio (fácil)
Con este método puedes crear un sencillo reproductor de música de audio utilizando el bloque Audio incorporado en WordPress. Puedes utilizar el bloque para reproducir cualquier archivo .mp3, .m4a, .ogg o .wav.
El reproductor de audio es muy sencillo en comparación con la mayoría de plugins de reproducción de audio. Tiene un botón de reproducción/pausa, controles de volumen, un botón de descarga y un botón para cambiar la velocidad de reproducción.
El bloque de audio integrado es una buena opción si desea añadir algunos clips de audio breves a su sitio y no necesita ninguna característica avanzada.
Si incrustas contenido de una plataforma de terceros compatible con Spotify o SoundCloud, el bloque Audio mostrará los controles de reproducción de dicha plataforma. También puede mostrar contenido adicional de la plataforma, como el nombre del artista y la imagen de portada.
Por ejemplo, aquí hay un bloque de Audio con contenido incrustado de SoundCloud.
Para añadir un sencillo reproductor de música a tu sitio web WordPress, abre cualquier página o entrada. A continuación, haga clic en el icono +.
En el mensaje / ventana emergente que aparece, escribe “Audio” para encontrar el bloque adecuado. A continuación, basta con hacer clic en el bloque Audio para añadirlo a la página.
En este punto puedes añadir un archivo de audio o incrustar un clip de audio de otra plataforma.
Nota: En la mayoría de los casos recomendamos alojar sus archivos de audio y vídeo en un sitio de terceros por muchas razones, entre ellas la optimización de la calidad y el ahorro de ancho de banda. A continuación te explicamos por qué nunca debes subir un vídeo a WordPress.
Para añadir un archivo de audio desde su ordenador, haga clic en ‘Subido’ y luego elija el archivo que desea utilizar. Otra opción es hacer clic en ‘Biblioteca de medios’ y luego elegir un archivo de la biblioteca de medios de WordPress.
Si subes el audio completo, puede que quieras dar a los visitantes la opción de dar soporte a tu trabajo como músico o podcaster enviándote una donación. Para obtener información paso a paso, consulte nuestra guía práctica sobre cómo añadir un botón de donación de Stripe en WordPress.
¿Quieres incrustar audio de otra plataforma?
Es similar a la forma de incrustar vídeos en WordPress, en la que basta con pegar la URL de un vídeo de YouTube y WordPress lo incrusta automáticamente.
Ten en cuenta que la mayoría de las plataformas solo incrustan una vista previa del archivo de audio completo. El bloqueo puede incluso animar a los usuarios a abandonar su sitio web y visitar la plataforma de terceros para escuchar el audio completo.
En la siguiente imagen, el bloque Audio dirige a los visitantes hacia el sitio web de Spotify.
Si eres músico, esto puede aumentar tus derechos de autor al animar a los visitantes a reproducir tu contenido en otras plataformas. Sin embargo, también puede alejar a la gente de tu sitio web y llevarla a otras plataformas.
Para incrustar audio desde una plataforma de terceros, empieza por hacer clic en “Insertar desde URL”.
Se abre una pequeña barra “Pegar o escribir URL”.
Ahora puede introducir la URL del clip de audio que desea incrustar en su blog de WordPress.
Normalmente, sólo tienes que visitar la canción o el audio que quieres incrustar y abrir sus ajustes de “Compartir”.
A continuación, puede copiar la URL proporcionada.
A modo de ejemplo, veamos cómo puedes incrustar cualquier canción de Spotify en tu sitio. Para empezar, busca la canción o lista de reproducción que quieras añadir a tu sitio web WordPress.
A continuación, sólo tienes que hacer clic en los tres puntos que Spotify muestra junto a la lista de reproducción o canción.
Una vez hecho esto, haz clic en Compartir ” Copiar enlace de canción.
Para añadir el audio a un widget reproductor de música, sólo tienes que enlazarlo al bloque Audio.
En nuestro ejemplo de Spotify, WordPress convertirá el bloque Audio en un bloque Spotify. Este cambio se produce automáticamente, así que no es algo de lo que tengas que preocuparte.
Después de añadir un archivo de audio, puedes hacer clic en el bloque Audio para ver qué ajustes puedes establecer para ese bloque.
Los ajustes que veas pueden variar dependiendo de si has subido un archivo de audio o incrustado una vista previa de un sitio de terceros. Por ejemplo, puedes establecer la reproducción automática del audio al hacer clic en el conmutador “Reproducción automática”.
La mayoría de estos ajustes se explican por sí mismos, por lo que es una buena idea pasar algún tiempo probando los diferentes ajustes para ver qué funciona mejor para su sitio.
Cuando esté satisfecho con cómo se ha establecido el bloque, puede actualizar o publicar la página.
Ahora, si visitas la página en tu sitio, verás el reproductor de música de audio en directo. También puedes escuchar el audio utilizando los botones de control de reproducción del bloque.
Método 2. Cómo añadir un widget de reproductor de música utilizando un plugin (más personalizable)
El bloque de audio integrado en WordPress es una forma rápida y sencilla de crear un reproductor de audio simple. Sin embargo, tiene sus límites, sobre todo cuando se trata de personalizar el reproductor y la experiencia de reproducción.
Tampoco hay un lugar central donde puedas gestionar tus reproductores de audio. Esto significa que no puedes utilizar el mismo reproductor varias veces en tu sitio.
Si quieres características más avanzadas y reproductores de audio reutilizables, entonces te recomendamos Html5 Audio Player. Este plugin puede reproducir cualquier archivo mp3, .wav, o .ogg.
El plugin solo puede reproducir un archivo de audio por reproductor. Sin embargo, puede crear tantos reproductores de audio como desee para poder reproducir muchas pistas diferentes en su sitio.
Incluso puedes añadir varios reproductores de audio a la misma página.
En primer lugar, tendrás que instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado, estarás listo para construir tu primer reproductor de audio yendo a Html5 Audio Player ” Html5 Audio Player.
A continuación, haz clic en el botón “Añadir reproductor de audio”.
Para empezar, escribe un nombre para el reproductor de audio en el campo que muestra “Añadir título”.
Esto es sólo para tu referencia, así que puedes usar el título que quieras.
Una vez hecho esto, desplázate hasta la sección “Configuración del reproductor”.
Aquí puede añadir un archivo de audio al reproductor haciendo clic en el botón “Añadir audio”.
Ahora puedes seleccionar cualquier archivo de audio de la biblioteca de medios o subir un archivo desde tu ordenador.
Después de elegir un archivo, ya está listo para personalizar el reproductor de audio. Por defecto, el visitante sólo tiene que hacer clic en el botón Reproducir y el audio empezará a reproducirse con el volumen ya subido.
Así es como la mayoría de los visitantes esperan que actúe un reproductor de audio, por lo que normalmente querrá utilizar estos ajustes por defecto.
También hay opciones para silenciar el audio por defecto, reproducción automática, repetición, etc.
Cuando esté satisfecho con la configuración del reproductor, desplácese hasta la parte superior de la pantalla y haga clic en el botón “Guardar”.
A continuación, puede añadir el reproductor de audio a su sitio mediante shortcode o el bloque Reproductor de audio HTML5.
El bloque es el método más sencillo. Sin embargo, si desea colocar el reproductor mediante shortcode, encontrará el código en la parte superior de la pantalla.
Para más detalles sobre cómo colocar el shortcode, puede consultar nuestra guía sobre cómo añadir un shortcode en WordPress.
Para añadir el reproductor de música de audio mediante un bloque, abre cualquier página o entrada. Ahora puedes hacer clic en el botón +.
En la ventana emergente que aparece, escribe “Reproductor de audio HTML5” para encontrar el bloque adecuado. Al hacer clic en el bloque “Reproductor de audio HTML5 – Insertar”, se añadirá el bloque a la página.
A continuación, abre el desplegable que muestra “Seleccionar un reproductor” para ver una lista de todos los reproductores de audio que has creado.
Ahora puedes hacer clic en un reproductor de audio para añadirlo a la página o entrada.
El editor de páginas de WordPress no muestra el reproductor de audio.
Sin embargo, si hace clic en el botón Vista previa, podrá ver el aspecto que tendrá el reproductor para las personas que visiten su sitio web. Incluso puedes escuchar el audio y probar los diferentes botones de reproducción.
Cuando estés satisfecho con el aspecto y el funcionamiento del reproductor de audio, puedes actualizar o publicar la página.
Ahora, si visitas esta página en tu sitio web WordPress, verás el reproductor de audio en directo.
¿Desea añadir otras pistas de audio a su sitio? Entonces sólo tiene que seguir el proceso descrito anteriormente para crear más reproductores de audio y añadirlos a su sitio web WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo añadir un widget de reproductor de audio en WordPress. También puedes consultar nuestra guía sobre el mejor software de avisos instantáneos y cómo crear un boletín de correo electrónico.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Diao says
I have a question. How to auto play the song in this widget?
TiBs says
this is cool, but how to have the music plays in background from the start?
WPBeginner Staff says
Please see this article, it explains what kind of plugins should be considered abandoned or outdated.
Brian Visagie says
Thank you for responding.
Brian Visagie says
Hi, I subscribe to WPBeginner
and appreciate your input to the WordPress community – I regard it as
invaluable.
How is it then that you, sir, in the present unsafe and hacker
infested internet environment, recommend plugins (a widget in this case), that
are not up to date?
I get scores of bruteforce attacks everyday on my
websites and I regard the use and recommendation of out-dated plugins as
irresponsible.