Red de conocimiento informático - Espacio del host - ¿Quiero hacer clic en diferentes audios en html (sin saltar a la página)?

¿Quiero hacer clic en diferentes audios en html (sin saltar a la página)?

Para implementar esta función, necesita usar HTML5.

Primero, debe establecer una ID única para cada imagen en el HTML y establecer una ID única para cada archivo de audio.

Luego puedes usar JavaScript para monitorear el evento de clic de la imagen y reproducir el archivo de audio correspondiente cuando ocurre el evento de clic.

Aquí hay un ejemplo básico:

HTML:

Lenguaje de marcado de hipertexto

ltimg id = " img 1 " src = " img 1 jpg " alt = " Imagen 1 "/ gt;

ltimg id = " img 2 " src = " img 2 jpg " alt = " Imagen 2 "/ gt;

ltaudio id = " audio 1 " src = " audio 1 . MP3 " precarga = " auto " gt; lt/audio gt

ltaudio id = " audio 2 " src = " audio 2 . MP3 " preload = " auto " gt; lt/audio gt;

JavaScript:

lenguaje de descripción java

document. addEventListener('click ', function() {

document . getelementbyid(' audio 1 '). play();

});

document. getElementById('img2 '). addEventListener('click ', function() {

document.getelementbyid('audio 2').play();

});

En este En el ejemplo, cuando hace clic en la imagen con el ID "img1", se reproducirá el archivo de audio con el ID "audio1"; cuando hace clic en la imagen con el ID "img2", se reproducirá el archivo de audio con el ID "; Se reproducirá audio2". Tenga en cuenta que el atributo preload="auto " puede hacer que el archivo de audio comience a cargarse cuando se carga la página para aumentar la velocidad de reproducción.

Tenga en cuenta que este es solo un ejemplo básico y es posible que deba modificarlo para adaptarlo a sus necesidades específicas. Por ejemplo, es posible que necesites manejar la situación en la que el archivo de audio no existe o no se puede reproducir, o agregar algunas funciones para controlar la reproducción de audio (como pausar, detener, ajustar el volumen, etc.).