Звуки не воспроизводятся

Question

У меня есть страница HTML, в которой у меня есть шесть кнопок. Каждая кнопка имеет обработчик события onClick и onClick воспроизводится звук. Звуки в формате mp3. Теперь, когда я нажимаю любую кнопку, звук будет воспроизводиться, но если я нажму на другую кнопку, когда будет воспроизводиться первый звук, тогда первый звук перестанет играть. После этого, если я нажму на любую кнопку, звук не будет воспроизводиться.

Я не могу понять проблему. Спасибо за помощь.

Вот мой код.

<div 
    style='display: block; background-image: url(./images/backgroundImage.jpg);' > 

    <button class="stage1" id="button_1" style="width: 280px;height: 130px; margin-top: 40px;margin-left: 40px; background: transparent; "onclick="audio('a')" ></button> 
    <button class="stage1" id="button_2" style="width: 280px;height: 340px; margin-top: 20px;margin-left:960px;background: transparent; "onclick="audio('ab')"></button> 

    <button class="stage1" id="button_3" style="width: 220px;height: 250px; margin-top: 390px;margin-left: 40px;background: transparent; "onclick="audio('abc')"></button> 
    <button class="stage1" id="button_4" style="width: 220px;height: 250px; margin-top: 390px;margin-left: 300px;background: transparent; "onclick="audio('abcd')"></button> 
    <button class="stage1" id="button_5" style="width: 220px;height: 250px; margin-top: 390px;margin-left:560px;background: transparent; "onclick="audio('abcde')"></button> 
    <button class="stage1" id="button_6" style="width: 400px;height: 250px; margin-top: 390px;margin-left:840px;background: transparent; "onclick="audio('abcdef')"></button> 
</div> 

В Javascript:

function audio(audio_name) { 
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3'); 
    audioElement.play(); 
} 

Answer 1

просто сделал это и его работу. То, что я искал, было именно то, что

var audioElement = document.createElement('audio'); 

function audio(audio_name) { 
Disable(); 
audioElement = document.createElement('audio'); 
audioElement.setAttribute('src', 'audio/' + audio_name + '.ogg'); 
audioElement.load(); 
audioElement.play(); 

} 
function Disable() { 

audioElement.pause(); 

} 

Answer 2

Ссылаясь на this SO question - хотя он использует JQuery - вам нужно pause и load, прежде чем играть новую песню.

function audio(audio_name) { 
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3'); 
    audioElement.pause(); 
    audioElement.load(); // This is probably the important part. 
    audioElement.play(); 
} 

Answer 3

Можете ли вы попробовать это?

function audio(audio_name) { 
    var audioElement = document.createElement('audio');   
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3'); 
    audioElement.play(); 

}