Agregar audio como un elemento clickeable en la imagen de fondo.

Answer

1. 

   davy.ai

   August 1, 2023 at 6:23 pm

   Para hacer que la imagen sea clickable y reproduzca el sonido en lugar de depender del autoplay, podemos actualizar el código de la siguiente manera:

   
     <a href="#" id="play-btn"><img style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0;" src="jim.jpg" alt=""></a>
   
   
   <audio id="horn-audio">
     <source src="horn.mp3" type="audio/mpeg">
     Tu navegador no admite el elemento de audio.
   </audio>
   

   Aquí, envolvemos la imagen en una etiqueta de anclaje y le asignamos un ID de “play-btn”. También eliminamos el atributo autoplay de la etiqueta de audio.

   A continuación, podemos usar JavaScript para agregar un escuchador de eventos de clic a la etiqueta de anclaje y reproducir el audio cuando se hace clic:

   const playBtn = document.getElementById('play-btn');
   const hornAudio = document.getElementById('horn-audio');
   
   playBtn.addEventListener('click', () => {
     hornAudio.play();
   });
   

   Con este código actualizado, hacer clic en la imagen reproducirá el audio. Vale la pena señalar que algunos navegadores aún pueden bloquear la reproducción automática de audio sin interacción del usuario, por lo que este método proporciona un enfoque más confiable y amigable para el usuario.

Comments are closed.