Cómo agregar un widget de reproductor de música de audio en WordPress (2 métodos)

Si eres músico, podcaster o tienes un blog donde el sonido juega un papel importante, probablemente te habrás dado cuenta de que el audio predeterminado de WordPress es bastante limitado.

Puedes subir archivos, claro. ¿Pero crear esa experiencia auditiva pulida y fluida que tus visitantes merecen? Ahí es donde se pone complicado.

Hemos visto este desafío surgir una y otra vez al ayudar a lanzar blogs de música y sitios de podcasts.

Afortunadamente, existen soluciones sencillas que funcionan. Después de investigar las mejores herramientas y plugins de música, encontramos 2 opciones simples: el bloque de Audio y el plugin Reproductor de Audio HTML5.

En esta guía, te mostraremos 2 métodos para agregar un widget de reproductor de música de audio en WordPress. De esa manera, puedes elegir el que mejor se adapte a tus necesidades y tener tu reproductor de audio funcionando en poco tiempo. 🎶

¿Por qué agregar un widget de reproductor de música de audio en WordPress?

Un widget de reproductor de audio facilita que los visitantes escuchen tu contenido sin salir de tu sitio.

Es especialmente útil para músicos, podcasters y creadores de contenido que desean mostrar su trabajo de una manera profesional y accesible. En lugar de enviar a las personas a plataformas externas, puedes mantenerlas interesadas en tu propio sitio web, donde tienes más control.

Un reproductor de audio y música puede incluso ayudarte a ganar más dinero al mostrar anuncios en tu sitio o vendiendo tus archivos de audio como descargas digitales directamente.

Y si no estás creando audio original, incrustar pistas de plataformas como Spotify sigue siendo una forma inteligente de hacer tu sitio más dinámico y atractivo.

Puede ayudar a mantener a los visitantes en tu sitio por más tiempo, lo que mejora métricas clave como el tiempo en el sitio.

¡Lo mejor de todo es que los widgets de audio no son solo para música. 💡

Puedes usarlos para incrustar podcasts, audiolibros, meditaciones guiadas o contenido educativo. Esto hace que tu sitio sea más versátil y atractivo para los usuarios que prefieren el audio, incluidos aquellos con discapacidades visuales.

Con esto en mente, te mostraremos cómo agregar un reproductor de audio y música en WordPress usando 2 métodos. Puedes usar los enlaces rápidos a continuación para ir directamente al método que deseas usar:

• Método 1. Cómo agregar un widget de reproductor de audio y música usando el bloque de audio (fácil)
• Método 2. Cómo agregar un widget de reproductor de música de audio usando un plugin (más personalizable)
• Consejo adicional: ¡Haz tu sitio más divertido usando galerías de imágenes y videos!
• Preguntas frecuentes: ¿Cómo agregar un widget de reproductor de audio en WordPress?
• Más guías sobre el uso de audio en WordPress

¡Exploremos cómo llevar el poder de la música a tu sitio web de WordPress! 🎧

Método 1. Cómo agregar un widget de reproductor de audio y música usando el bloque de audio (fácil)

Con este método, puedes crear un reproductor de audio simple usando el bloque de audio integrado de WordPress. Este bloque puede reproducir cualquier formato de archivo de audio, incluidos archivos .mp3, .m4a, .ogg o .wav.

El reproductor de audio integrado de WordPress es muy simple en comparación con la mayoría de los plugins. Tiene un botón de reproducir/pausar, controles de volumen, un botón de descarga y un botón para cambiar la velocidad de reproducción.

Es una buena opción si deseas agregar algunos clips de audio cortos a tu sitio sin necesidad de funciones avanzadas.

Si incrustas contenido de una plataforma de terceros compatible, como Spotify o SoundCloud, el bloque de audio mostrará los controles de reproducción de esa 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 de SoundCloud incrustado.

Para agregar un reproductor de música de audio simple a tu sitio web de WordPress, puedes abrir cualquier página o publicación y hacer clic en el ícono ‘+’.

En la ventana emergente que aparece, escribe ‘Audio’ en la barra de búsqueda para encontrar el bloque correcto. Luego puedes hacer clic en el bloque de Audio para agregarlo a tu página.

En este punto, puedes agregar un archivo de audio o incrustar un clip de audio de otra plataforma.

Para agregar un archivo de audio desde tu computadora, haz clic en ‘Subir’ y luego elige el archivo desde la unidad local de tu computadora.

Otra opción es hacer clic en el botón ‘Biblioteca de medios’ y luego elegir un archivo existente en tu biblioteca de medios de WordPress.

Si subes el audio completo, es posible que desees dar a los visitantes la opción de apoyar tu trabajo como músico o podcaster enviándote una donación. Para un recorrido paso a paso, puedes ver nuestra guía sobre cómo agregar un botón de donación de Stripe en WordPress.

¿Quieres incrustar audio de otra plataforma en su lugar?

Esto funciona como agregar videos a WordPress. Simplemente pegas el enlace de YouTube, y WordPress pondrá el reproductor en tu página automáticamente.

Solo ten en cuenta que la mayoría de las plataformas solo incrustan una vista previa del archivo de audio completo. El bloque incluso puede animar a las personas a abandonar tu sitio web y visitar la plataforma de terceros para escuchar el audio completo.

En la siguiente imagen, el bloque de Audio dirige a los visitantes al sitio web de Spotify.

Si eres músico, esto podría aumentar tus regalías al animar a los visitantes a reproducir tu contenido en otras plataformas. Sin embargo, también puede alejar a las personas de tu sitio web y dirigirlas a otras plataformas.

Para incrustar audio de una plataforma de terceros, puedes comenzar haciendo clic en el botón 'Insertar desde URL'. Esto abrirá una pequeña barra de 'Pegar o escribir URL'.

Ahora puedes ingresar la URL del clip de audio que deseas incrustar en tu blog de WordPress.

Típicamente, solo necesitas visitar la canción o el audio que deseas incrustar y luego abrir su configuración de 'Compartir'.

Después de eso, puedes copiar la URL proporcionada.

Por 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 deseas agregar a tu sitio web de WordPress. Luego, simplemente haz clic en los tres puntos que Spotify muestra junto a la lista de reproducción o canción.

Una vez que hayas hecho eso, haz clic en Compartir » Copiar canción.

Para agregar el audio al widget del reproductor de música, procede a pegar el enlace en el bloque de Audio.

En nuestro ejemplo de Spotify, WordPress convertirá el bloque de Audio en un bloque de Spotify.

Este cambio ocurre automáticamente, por lo que no es algo de lo que debas preocuparte.

Después de agregar un archivo de audio, puedes hacer clic en el bloque de Audio para ver qué configuraciones puedes ajustar para ese bloque.

La configuración que ve puede variar dependiendo de si subió un archivo de audio o incrustó una vista previa de un sitio de terceros.

Por ejemplo, a menudo puede configurar el audio para que se reproduzca automáticamente haciendo clic en el interruptor ‘Reproducción automática’.

La mayoría de estas configuraciones se explican por sí mismas, por lo que es una buena idea explorarlas para ver qué funciona mejor para su sitio.

Puede actualizar o publicar la página cuando esté satisfecho con la configuración del bloque.

Ahora, si visita la página en su sitio, verá el reproductor de música de audio en vivo. También puede escuchar el audio usando los botones de control de reproducción del bloque.

Método 2. Cómo agregar un widget de reproductor de música de audio usando un plugin (más personalizable)

El bloque de audio de WordPress es una herramienta sencilla para agregar reproductores de audio. Es fácil de usar, pero no ofrece muchas opciones para cambiar su apariencia o funcionamiento.

Además, no puede crear un reproductor y usarlo en diferentes partes de su sitio. Tendrá que agregar un nuevo reproductor cada vez que quiera usar uno.

Si desea funciones más avanzadas y reproductores de audio reutilizables, le recomendamos el plugin HTML5 Audio Player.

Similar al bloque de audio de WordPress, este plugin puede reproducir varios formatos de archivo de audio, como un archivo .mp3, .wav u .ogg. Pero viene con más opciones de personalización.

Ahora, si bien el plugin solo puede reproducir un archivo de audio por reproductor, puede crear tantos reproductores de audio como desee. De esa manera, aún puede reproducir muchas pistas diferentes en su sitio de WordPress. Incluso puede agregar varios reproductores de audio a la misma página.

Para comenzar, deberá instalar y activar el plugin. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, estará listo para crear su primer reproductor de audio yendo a HTML5 Audio Player » HTML5 Audio Player.

Aquí, haga clic en el botón 'Add Audio Player' (Agregar reproductor de audio).

El siguiente paso es escribir un nombre para el reproductor de audio en el campo que dice 'Add title' (Agregar título).

Esto es solo para su referencia, por lo que puede usar el título que desee.

Una vez que haya hecho eso, querrá desplazarse hasta la sección 'Player Configuration' (Configuración del reproductor).

En esta área, puede agregar un archivo de audio al reproductor haciendo clic en el botón 'Add Audio' (Agregar audio).

Ahora puede seleccionar cualquier archivo de audio de la biblioteca de medios o cargar un archivo desde su computadora.

Después de elegir un archivo, estará listo para personalizar el reproductor de audio. Por defecto, el visitante solo necesita hacer clic en el botón ‘Reproducir’ y el audio comenzará a sonar con el volumen activado.

Así es como la mayoría de los visitantes esperan que funcione un reproductor de audio, por lo que normalmente querrá usar estas configuraciones predeterminadas. Sin embargo, también hay opciones para silenciar el audio por defecto, reproducir automáticamente, repetir y más. Así que, siéntase libre de explorar estas configuraciones.

Una vez que esté satisfecho con la configuración del reproductor, simplemente desplácese hasta la parte superior de la pantalla y haga clic en el botón ‘Guardar’.

Luego, puede agregar el reproductor de audio a su sitio usando un shortcode o el bloque Reproductor de Audio HTML5.

El bloque es el método más fácil. Sin embargo, si desea colocar el reproductor usando un shortcode, encontrará el código en la parte superior de la pantalla.

Para más detalles sobre cómo colocar el shortcode, puedes ver nuestra guía sobre cómo agregar un shortcode en WordPress.

Para agregar el reproductor de música de audio usando un bloque, deberá abrir cualquier página o publicación y hacer clic en el botón ‘+’.

En la ventana emergente que aparece, simplemente escriba ‘Reproductor de Audio HTML5’ para encontrar el bloque correcto. Una vez que haga clic en el bloque ‘Reproductor de Audio HTML5 – Insertar’, se agregará el bloque a su página.

A continuación, puede abrir el menú desplegable ‘Seleccionar un reproductor’ para ver la lista de todos los reproductores de audio que ha creado.

Ahora puede hacer clic en un reproductor de audio para agregarlo a la página o publicación.

Es posible que luego note que 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 cómo se verá el reproductor para los visitantes de su sitio web. En este modo, incluso puede escuchar el audio y probar usted mismo los diferentes botones de reproducción.

Cuando esté satisfecho con la apariencia y el funcionamiento del reproductor de audio, puede actualizar o publicar la página.

Ahora, si visita esta página en su sitio web de WordPress, verá el reproductor de audio en vivo.

¿Quieres agregar otras pistas de audio a tu sitio? Entonces, puedes seguir el proceso descrito anteriormente para crear más reproductores de audio y agregarlos a tu sitio.

Consejo adicional: ¡Haz tu sitio más divertido usando galerías de imágenes y videos!

¿Quieres hacer tu sitio más divertido y atractivo? Considera agregar galerías de imágenes y videos para que vayan de la mano con tu widget de reproductor de música de audio.

Al crear una galería, puedes exhibir tus fotos en un diseño de cuadrícula ordenado, ahorrando espacio y haciendo que tu sitio se vea mucho más profesional. Las miniaturas permiten a los visitantes previsualizar imágenes, y pueden hacer clic para verlas en tamaño completo.

Por ejemplo, si eres fotógrafo, una galería bien organizada puede exhibir tu trabajo de una manera elegante y visualmente impactante.

Ahora, agregar imágenes a tus publicaciones de WordPress es bastante sencillo con el bloque de Imagen. Pero las cosas pueden volverse un poco complicadas cuando agregas varias imágenes. Se apilarán una tras otra, lo que requerirá que los usuarios se desplacen mucho.

Definitivamente no es la configuración más atractiva visualmente. 😬

En su lugar, intenta usar el bloque Galería en el editor de Gutenberg. Es una forma fácil de mostrar varias imágenes de manera más limpia. Y si quieres aún más funciones, hay muchos complementos de galería que pueden llevar la visualización de tus imágenes al siguiente nivel, como Envira Gallery.

Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo crear una galería de imágenes en WordPress.

Además, aunque las imágenes son geniales, los videos pueden ser aún mejores. Un carrusel de videos puede mostrar desde demostraciones de productos y reseñas hasta testimonios de clientes, todo en un espacio dinámico.

Por ejemplo, un sitio de bienes raíces podría presentar recorridos virtuales de propiedades. Mientras tanto, un sitio de viajes podría destacar destinos y experiencias para atraer a los visitantes.

Con un carrusel de videos, puedes usar contenido atractivo para mostrar tus mejores características, ya sean testimonios, estudios de caso o aspectos destacados de productos. ¿La mejor parte? Soliloquy puede ayudarte a crear uno con facilidad.

Para obtener más información, consulta nuestra guía sobre cómo crear un carrusel de videos en WordPress.

En resumen, ya sea una galería de álbumes, una exhibición de productos o tutoriales en video, las galerías interactivas pueden mejorar el atractivo general de tu sitio y mejorar la experiencia del usuario.

Preguntas frecuentes: ¿Cómo agregar un widget de reproductor de audio en WordPress?

Hemos recibido muchas preguntas sobre cómo agregar audio en WordPress. Aquí están las respuestas a algunas de las más comunes.

¿Cuál es el mejor formato de archivo de audio para WordPress?

Para obtener el mejor equilibrio entre calidad de sonido y tamaño de archivo, recomendamos usar el formato MP3. Es ampliamente compatible en todos los navegadores y dispositivos modernos. De esta manera, tus visitantes podrán disfrutar de una experiencia auditiva fluida sin importar cómo accedan a tu sitio.

¿Puedo crear una lista de reproducción con varias canciones?

Sí, puedes. Si bien el bloque de audio predeterminado de WordPress está diseñado para pistas individuales, muchos plugins te permiten crear listas de reproducción completas. Algunos plugins incluso se conectan a servicios como Spotify o SoundCloud para mostrar álbumes completos en tu sitio.

¿Cómo puedo agregar un reproductor de audio a la barra lateral de mi WordPress?

Puedes agregar un reproductor de audio a tu barra lateral o pie de página usando widgets de WordPress.

Simplemente navega a Apariencia » Widgets en tu panel. Desde allí, puedes agregar el bloque de audio o un bloque de tu plugin elegido a cualquier área de tu tema lista para widgets.

Más guías sobre el uso de audio en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar un widget de reproductor de audio en WordPress. Si te resultó útil, es posible que también desees leer nuestras otras guías sobre:

• Cómo agregar archivos de audio MP3 en WordPress
• Cómo vender música en línea en WordPress
• Cómo iniciar un podcast y hacerlo exitoso
• Los mejores plugins de reproductor de audio para WordPress
• Los mejores plugins de WordPress para podcasters

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.