Reproductor de audio para tu web: cómo insertarlo (con código y sin plugin)

Si buscas «reproductor para tu web» es porque quieres insertar uno que funcione, no una maqueta bonita para enseñar a un cliente. Aquí tienes las tres formas reales de hacerlo: código HTML5 nativo si no quieres depender de nada externo, plugins de WordPress si necesitas catálogo o podcast, y embeds de SoundCloud, Spotify o iVoox si tu audio ya vive en una de esas plataformas.

Vas a encontrar código para copiar y pegar en cada sección. Elige la opción según lo que ya tengas: un archivo mp3 suelto, una biblioteca de pistas o un podcast con episodios.

Reproductor HTML5 nativo: la opción más rápida

Si solo quieres reproducir un archivo mp3 sin instalar nada, la etiqueta <audio> de HTML5 la trae el navegador de serie. Cero peticiones externas, cero JavaScript de terceros cargando tu página.

<audio controls preload="none">
  <source src="tu-archivo.mp3" type="audio/mpeg">
  Tu navegador no soporta el elemento de audio.
</audio>

Cambia tu-archivo.mp3 por la ruta real del archivo, subido a tu biblioteca de medios si usas WordPress o a tu hosting directamente. El atributo preload="none" evita que el navegador descargue el audio hasta que alguien pulse play, algo que te va a venir bien si te preocupa la velocidad de carga.

Si escribes en el editor de bloques de WordPress, tienes el mismo resultado sin tocar código: bloque nativo Audio, subes el archivo y listo. La limitación es que el diseño del reproductor es el del navegador, sin marca ni personalización visual. Para eso están las dos opciones siguientes.

Plugins de WordPress para reproductor de audio

Si necesitas un catálogo con varias pistas, portadas, o un podcast con episodios, un plugin te ahorra construir todo eso a mano. Te dejo los que uso o he probado, según el caso de uso.

Sonaar: catálogo con diseño de marca

Mi opción favorita cuando quieres algo que parezca un reproductor de streaming de verdad: listas de reproducción ilimitadas, portadas por pista y un reproductor flotante que sigue sonando mientras el visitante navega por otras páginas. La versión gratuita cubre bastante; la Pro añade integración de venta directa (Amazon Music, Apple Music, Spotify, SoundCloud) si tu web es de un músico o sello.

Tip: si vendes tu música o la de un cliente, la versión Sonaar Pro integra los botones de compra directamente en el reproductor. Te ahorra montar esa parte a mano.

Seriously Simple Podcasting: si publicas episodios

Pensado específicamente para podcasts, no para música suelta. Genera el feed RSS compatible con Apple Podcasts y Spotify sin que tengas que tocarlo, y añade un reproductor por episodio en cada entrada. Gratuito; si quieres hosting de los archivos de audio fuera de tu servidor, ofrece integración con Castos (de pago).

AudioIgniter y CP Media Player: alternativas ligeras

AudioIgniter hace listas de reproducción con portada por pista y botones de llamada a la acción si vendes las canciones sueltas; la versión Pro añade opciones de venta desde unos 39 $/año. CP Media Player es la opción si necesitas también vídeo además de audio: soporta mp3, m4a, wav, mp4, ogg y webm desde el mismo reproductor, con una versión profesional de pago para funciones extra como subtítulos.

Si solo necesitas un reproductor discreto para un par de archivos sueltos sin listas ni catálogo, Compact WP Audio Player hace exactamente eso y nada más: ligero, sin curva de aprendizaje.

SoundCloud, Spotify e iVoox: sin instalar nada

Si tu audio ya está subido a una de estas plataformas, no necesitas plugin ni hosting propio del archivo. Copias un fragmento de código y lo pegas donde quieras que aparezca el reproductor.

SoundCloud

Desde la página de tu pista en SoundCloud, el botón «Compartir» genera el código embed listo para pegar. Si prefieres montarlo tú, la estructura base es un iframe apuntando al widget de reproducción:

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=URL_DE_TU_PISTA">
</iframe>

Puedes añadir parámetros al final de la URL para quitar el botón de descarga, cambiar el color de los controles o mostrar la portada. La documentación oficial de SoundCloud los lista todos.

Spotify

Desde la app o el web player de Spotify: menú de los tres puntos sobre la canción, playlist o episodio → CompartirInsertar. Spotify te da el iframe ya generado, con la portada y controles de reproducción incluidos. No hace falta cuenta de artista ni verificación, funciona con cualquier contenido público de la plataforma.

iVoox: la opción si haces podcast en español

Si tu podcast está en iVoox (la plataforma de referencia en español), tienes un widget de compartir por episodio y otro para el canal completo, pensado para insertarse en WordPress o cualquier web con un solo pegado de código. Te evita depender de un plugin de podcasting si ya subes ahí tus episodios.

Reproductor de audio en Blogger

Blogger no deja subir archivos de audio directamente desde el editor, así que la ruta más sencilla es la misma que en cualquier web: sube el audio a SoundCloud, Spotify o iVoox y pega el código embed en una entrada usando la vista HTML del editor (el icono con los símbolos <>). El código HTML5 nativo también funciona en Blogger si alojas el mp3 en otro sitio (Google Drive con enlace público, por ejemplo), pero los embeds de plataforma te dan menos dolores de cabeza con el hosting del archivo.

Mi recomendación según el caso

Si tienes uno o dos archivos sueltos, no compliques nada: HTML5 nativo o el bloque Audio de WordPress. Si gestionas un catálogo o vendes música, Sonaar es la que más veces he montado por su reproductor flotante y el diseño ya resuelto. Si publicas un podcast, Seriously Simple Podcasting te da el feed RSS sin pelearte con formatos, y si ya subes los episodios a iVoox, su widget te ahorra hasta el plugin.

Una advertencia honesta: cada embed externo (SoundCloud, Spotify, iVoox) añade peticiones de otro dominio a tu página, y eso pesa en la velocidad de carga si metes varios en la misma entrada. Si tu web ya va justa de rendimiento, un plugin de caché compensa la diferencia.

Tip: si notas que tu web se ralentiza al añadir varios reproductores embebidos, WP Rocket es el plugin de caché que uso para compensar ese peso extra sin tocar código.

Comparativa rápida

OpciónMejor paraRequiere pluginPrecio
HTML5 nativoUn archivo suelto, máxima velocidadNoGratis
SonaarCatálogo o venta de músicaFreemium
Seriously Simple PodcastingPodcast con episodiosGratis (hosting aparte de pago)
AudioIgniter / CP Media PlayerListas de reproducción sencillasFreemium
SoundCloud / Spotify embedAudio ya subido a esas plataformasNoGratis
iVoox widgetPodcast en español ya en iVooxNoGratis

Más recursos relacionados

Preguntas frecuentes

¿Cómo pongo un reproductor de audio en mi página web gratis?

La opción más rápida y sin coste es la etiqueta HTML5 <audio controls>, o el bloque Audio nativo si usas WordPress. Si el archivo ya está en SoundCloud o Spotify, el embed de esas plataformas también es gratuito.

¿Qué plugin de WordPress uso si tengo un podcast?

Seriously Simple Podcasting está pensado exactamente para eso: genera el feed RSS compatible con las plataformas de podcast y añade un reproductor por episodio automáticamente.

¿Puedo poner un reproductor de música en Blogger?

Sí. Blogger no admite subir el archivo de audio directamente, así que sube tu pista a SoundCloud, Spotify o iVoox y pega el código embed en la vista HTML del editor de entradas.

¿El reproductor de audio afecta a la velocidad de mi web?

El HTML5 nativo con preload="none" apenas pesa. Los embeds de SoundCloud, Spotify o iVoox cargan un iframe de otro dominio, así que si metes varios en la misma página vas a notar más peso. Un plugin de caché compensa parte de esa diferencia.

¿Necesito plugin para insertar un audio en WordPress?

No, si solo quieres reproducir un archivo suelto: el bloque nativo Audio del editor de WordPress lo resuelve sin instalar nada. El plugin merece la pena cuando necesitas catálogo, listas de reproducción o gestión de episodios de podcast.

Con cualquiera de estas opciones tienes el reproductor funcionando en minutos, no una maqueta que enseñar. Si te ha servido, compártelo con quien lo esté buscando.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio