Intenté hacer tarjetas de personajes, que cuando se pasa el mouse sobre el personaje, reproduce su línea de voz (solo se muestran las partes relevantes), pero cuando paso el mouse sobre un personaje, reproducen todas las líneas de voz a la vez, probablemente sea un error en el javascript, pero yo simplemente no puedo averiguar cómo solucionarlo.
<ul> <header id="play_1"> <img src="/img/characters/character.png"> <audio> <source src="/voices/charactervoice.m4a"></source> </audio> </header> </ul> <ul> <header id="play_2> <img src="/img/characters/character2.png"> <audio> <source src="/voices/charactervoice2.m4a"></source> </audio> </header> </ul> //javascript: window.onload=function(){ for (let i = 1; i <= 2; i++){ var playHover = document.getElementById('play_' + i), audios = document.querySelectorAll('audio'); console.log(audios); playHover.addEventListener('mouseover', function() { [].forEach.call(audios, function(audio) { audio.volume = 0.05; audio.play(); }); }, false); } }Solo debe seleccionar el audio dentro de playHover y no todo el audio que hace que todo el audio se reproduzca a la vez al pasar el mouse sobre una tarjeta. Puedes probarlo así (basado en cómo escribiste tu código)
window.onload=function(){ for (let i = 1; i <= 2; i++){ let playHover = document.querySelector('#play_' + i), let audio = playHover.querySelector('audio'); playHover.addEventListener('mouseover', function() { audio.volume = 0.05; audio.play(); }, false); } }o puede codificarlo de esta manera para que cada vez que agregue un encabezado no tenga que editar su condición de bucle. (Idealmente, debe colocar una clase para cada encabezado y seleccionarla en su lugar, de modo que si alguna vez va a usar el elemento de encabezado para otro uso, no tendrá problemas con las selecciones):
window.onload=function(){ const headers = document.querySelectorAll('header'); headers.forEach((e) => { let audio = e.querySelector('audio'); e.addEventListener('mouseover', function() { audio.volume = 0.05; audio.play(); }, false); }); }