Odtwarzanie dwóch obiektów audio w tym samym momencie

Question

Witam,

Chciałbym uzyskać efekt odtwarzania krótkiego efektu dźwiękowego przy najechaniu kursorem na element listy w menu. Z jakiegoś powodu dwa dźwięki nie mogą być odtwarzane jednocześnie (drugie odtworzenie włącza się dopiero, gdy pierwsze się zakończy), więc przy szybkim przejechaniu kursorem przez dwa przyciski odtwarza się jeden dźwięk zamiast dwóch, co psuje efekt. Bardzo proszę o pomoc.

fragment kodu HTML:

 <nav>
        <ul>
        
        <li><a href="#" onmouseover="opcja()">Strona główna</a></li>
        <li><a href="#" onmouseover="opcja()">O duecie</a></li>
        <li><a href="#" onmouseover="opcja()">Dyskografia</a></li>
        <li><a href="#" onmouseover="opcja()">Koncerty</a></li>
        <li><a href="#" onmouseover="opcja()">Współpraca</a></li>

        </ul>
    </nav>

 

fragment kodu JS:

let dzwiek = new Audio("yes.wav");

function opcja()
{
dzwiek.play();
}

Z góry dziękuję.

Answer 1

Spróbuj poniższego kodu js i zobacz czy o taki efekt Ci chodziło. Aby kod js działał poprawnie nadaj identyfikator dla tagu listy w pliku html strony (<ul id='menu'>), a sam kod js umieść w zewnętrznym pliku. Oczywiście efekt będzie lepszy jeśli później wystylizujesz całe menu, a efekt dźwiękowy połączysz z elementem listy (<li> ) dlatego, że teraz efekt dźwiękowy jest przypisany dla elementu (<a>), ale później zmiana tego nie powinna sprawić Ci problemu.

function opcja(){
	let menu = document.getElementById('menu');
	let a = menu.getElementsByTagName('a');
	for(let i = 0; i < a.length; i++){
		a[i].onmouseover = function(){
			return function(){
				let dzwiek = new Audio("yes.wav");
				dzwiek.play();
			}(i);
		}
	}
}

window.onload = opcja;