Cómo ponerle audio a un sitio web

Pasaste bastante tiempo creándole un sitio web a tu cliente de una pequeña empresa. Creaste un hermoso diseño con excelentes fotos, videos estratégicamente desplegados, y ahora sabes lo que lo dejará aún mejor: el uso inteligente del sonido.

El sonido puede ser una excelente estrategia para destacarse de la competencia, ayudar a los visitantes a recordar información (¿recuerdas esas canciones creadas por marcas que se quedan en tu cabeza?) y construir una conexión emocional con la marca.

Incluso, el audio puede ayudar con las clasificaciones de SEO cuando se usa de la manera correcta. En resumen, el audio, cuando se usa adecuadamente, puede ser un componente importante en la experiencia del sitio web.

Aquí te mostramos varias opciones para incluir audio en un sitio web.

1. alojamiento DE aUDIO

Una manera fácil de integrar audio en un sitio web es mediante el uso de un sitio de alojamiento de sonido, como SoundCloud o Mixcloud.

Todo lo que necesitas es subir el archivo y recibir un código HTML para integrarlo. Luego, copias y pegas el código de integración en el código de la página web o en el editor del sitio WYSIWYG.

Esto funciona para la mayoría de las plataformas CMS y creadores de sitios web.

2. AÑADIR UN WIDGET DE AUDIO EN DUDA

La plataforma de creación de sitios web altamente flexible de Duda cuenta con numerosas herramientas especiales que hacen que sea muy fácil agregar audio a un sitio web mientras se mantiene el control sobre cómo se ve y funciona.

En primer lugar, sigue los pasos anteriores para agregar el archivo de audio a un sitio de alojamiento de sonido. Luego, para agregarlo a tu página web, selecciona el widget de audio en el menú y agrega el link al archivo de audio.

Con Duda, puedes establecer el diseño, el ícono de reproducción y las opciones de tamaño mediante el Editor de diseño.

Para acceder al editor de diseño:

Haz clic con el botón derecho en el widget y luego, haz clic en Editar diseño.
Si estás utilizando Mixcloud, tienes opciones de diseño, visualización de miniaturas, esquema de color claro / oscuro y tamaño.
Si usas SoundCloud, tienes opciones de diseño, color de ícono de reproducción y tamaño.

3. Usa HTML5

Puedes codificar audios en tu sitio web con el elemento <audio> HTML5. Cuando se codifica con el <audio>command y atributo de origen (src), el valor predeterminado es la configuración predeterminada de audio del explorador.

O también, puedes definir algunos elementos sobre cómo se reproducirá el audio, como configurarlo para que se reproduzca automáticamente o para que se reproduzca silenciado y que el usuario elija si desea activar el sonido.

Este es un ejemplo de W3Schools:

O silenciado:

El texto entre las tags de audio solo se mostrarán si el navegador no admite el elemento de audio HTML5.

4. añadir JavaScript

Si vas a codificar un archivo en un sitio web en lugar de usar el widget de Duda, te recomendamos usar JavaScript además de HTML5.

JavaScript proporciona más control para garantizar que el audio se integrará en el sitio y funcionará según lo previsto.

Por ejemplo, te permitirá reproducir, pausar, silenciar y configurar otros botones de control.

Otros ejemplos: Puedes configurar el valor predeterminado para que el sonido se apague y permitir que el sonido se encienda con un controlador fácil de encontrar (esto es muy recomendable porque el sonido puede distraer).

Incluso, tu script se puede programar para reproducir ciertos sonidos en respuesta a las acciones del usuario, como durante un cuestionario.

Este es un ejemplo de JavaScript Tutor para agregar un botón de reproducción, un controlador de pausa y un script al código HTML:

 <audio controls id="music">
<source src="mj.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 
<p>Click the buttons to play or pause the music.</p>
 
<button onclick="play()" type="button">Play </button>
<button onclick="pause()" type="button">Pause</button>
 
<script>
var myMusic= document.getElementById("music");
function play() {
myMusic.play();
}
 
function pause() {
myMusic.pause();
}
</script>

INTEGRACIÓN DE AUDIO EN UN SITIO WEB

Cuando estés listo para llevar un sitio web al siguiente nivel, agrégale algunos elementos de sonido. Duda simplifica la integración de audio.

Y si necesitas aún más control, puedes usar JavaScript.

Realice una prueba gratuita de 14 días con Duda

Website builders need more than just AI

By Ilana Brudo • November 13, 2025

Don't let AI-generated websites cause day-two headaches. Learn why agencies need governance and control, and how Duda's AI stack offers speed without the risks.

Book or bounce: The conversion power of booking-enabled websites

By Shawn Davis • November 11, 2025

For small and medium-sized businesses (SMBs), conversion isn’t just about generating leads. It’s about helping potential customers act in the exact moment they’re ready. Traditional “contact us” forms and phone calls create unnecessary friction: the customer must wait, the business must respond, and momentum often disappears. A booking tool changes that dynamic. It lets customers confirm a time, get a confirmation, and move forward immediately. That single step, pivoting from inquiry to commitment, has a measurable effect. Research across multiple industries shows that websites offering real-time scheduling convert more visitors into paying customers. As AI search and zero-click search eat away at the amount of organic traffic being sent to SMB websites, developing high-quality conversion experiences has never been more important. From salons to consultants to local trades, every lost call or delayed email represents missed revenue. A booking tool captures intent before it fades.

Building smarter, not harder: How one agency scales client websites with Duda

By Shawn Davis • November 6, 2025

Learn how Jared Broussard's agency scaled client websites by switching from WordPress to Duda, saving time and costs while boosting efficiency and growth.