Este es mi primer intento de audio en HTML. Entonces, tengo una cuadrícula de imágenes que tienen una superposición de texto y quiero que el audio reproduzca un sonido diferente al pasar el mouse sobre cada imagen. Tengo el audio para reproducir pero parece reproducir el MISMO archivo de audio en todas las imágenes. ¿Alguien puede ayudarme a entender por qué?

¡Gracias!

 <section class="full_width four_col_grid"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div2"> <div class="container"> <img class="image" src=" https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" > <div class="overlay">När det farliga avfallet och allt som kan materialåtervinnas sorterats ut finns det ofta en rest kvar - soppåsen. Men den kan också återvinnas!</div> <audio id="audio"> <source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg" type="audio/ogg"> </audio> </div> <script> var audio = $("#audio")[0]; $("#div2").mouseenter(function() { audio.play(); audio.loop = true; }); $("#div2").mouseleave(function() { audio.pause(); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div2"> <div class="container"> <img class="image" src=" https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" > <div class="overlay">När det farliga avfallet och allt som kan materialåtervinnas sorterats ut finns det ofta en rest kvar - soppåsen. Men den kan också återvinnas!</div> <audio id="audio"> <source src="http://www.ringelkater.de/Sounds/2geraeusche_gegenst/papier_knuellen.wav" type="audio/x-wav"> </audio> </div> <script> var audio = $("#audio")[0]; $("#div2").mouseenter(function() { audio.play(); audio.loop = true; }); $("#div2").mouseleave(function() { audio.pause(); }); </script> </section> </main>