Sonidos en tu página web

Problema:

Como poner música en tu página

Poner un sonido de fondo en una página web es bien fácil en HTML, pero a veces quereos que se produzca un sonido determinado ante la acción del visitante.

Por ejemplo que suene un sonido al pulsar sobre un enlace o al pasar sobre una imagen.

Solución

Usar el elemento audio de HTML activado por eventos

Html 5 permite poner sonido o música en las pa´ginas web con el elemento audio. Cualquiere evento puede activar este elemento para que suene una pieza de sonido en formato mp3 u ogg o wav

Ejemplo

En este ejemplo usamos un elemento audio creado por javascript y que se activará (play) al pulsar un enlace.

En la página colocamos un botón o una imagen con id='play'

<div id="play">Pular para oir</div>

Y el script sería el siguiente:

var audio = new Audio('car_horn.wav');

play = document.getElementById('play');

play.addEventListener('click', ()=>{audio.play()});

Tansolo se crea el elmento audio, se asigna el evento click al bloque play y ya tenemos un botón con sonido