JS - воспроизводить разные звуки после каждого щелчка

Question

У меня есть одна ссылка, и я хочу, чтобы эта комбинация воспроизводила разные звуки при каждом нажатии. Когда я нажимаю на ссылку она играет и звучит в то же время, но я хочу один звук, в то время

var bleep = new Audio('hello.mp3') ; 
bleep.src = "hello.mp3" ; 

var bleep2 = new Audio('goodbye.mp3') ; 
bleep2.src = "goodbye.mp3"; 



    <a href="#" onclick="bleep.play('hello.mp3'); bleep2.play('goodbye.mp3');">Home</a> 

Answer 1

Вы должны сделать функцию из нее, которая проверяет, какой звук был щелкнула в последний раз. Кроме того, вам не нужно устанавливать свойство .src или передать строку the play method.

JS:

var bleep = new Audio('hello.mp3'); 

var bleep2 = new Audio('goodbye.mp3'); 

var playFirst = true; 
function playSound() { 
    if (playFirst) { 
    bleep.play(); 
    } else { 
    bleep2.play(); 
    } 
    playFirst = !playFirst; 
} 

HTML:

<a href="#" onclick="playSound()">Home</a> 

Answer 2

Вместо прикрепления событий слушателя встроенный в onclick, прикрепить его с помощью JS addEventListener. Это позволяет выбрать, какой аудио-клип, чтобы играть:

var helloSound = new Audio('hello.mp3'); 
helloSound.src = "hello.mp3"; 

var goodbyeSound = new Audio('goodbye.mp3'); 
goodbyeSound.src = "goodbye.mp3"; 

var homeLink = document.getElementById('home-link'); 

homeLink.addEventListener('click', function() { 
    if (/* condition to play hello */) { 
     helloSound.play(); 
    } else { 
     goodbyeSound.play(); 
    } 
}); 

Markup:

<a href="#" id="home-link">Home</a>