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

A pink background with the words `` par lax '' and a purple bubble wrap package.

5 ways to add a parallax scrolling effect to your website

By Shawn Davis • February 20, 2025

Drop shadows? Layering? Lame! Parallax effects are the most impressive way to add depth to your clients’ websites, and it’s even easier to do than you might’ve thought. Take a deep dive with us into everything parallax, including 5 ways you can implement it yourself today.

A screenshot of a website with a domain authority score on top

Mastering Domain Authority: How to choose the right Domain Authority Checker and use it to boost your clients' SEO

By Renana Dar • February 20, 2025

In this article, we’ll explore how to select the most effective DA checker for your needs and use it as a tool to enhance client success.

A set of four cards with different percentages on them.

5 game-changing web design statistics for 2025: Actionable insights for agencies serving SMBs

By Renana Dar • February 13, 2025

Discover 5 key web design stats from our SMB survey to help your agency better understand SMBs’ needs and refine your services, marketing, and sales strategies.