Question

我有一个HTML页面，其中有六个按钮。每个按钮都有一个onClick事件处理程序，onClick将播放声音。声音是mp3格式。现在当我点击任何按钮时，会播放声音，但如果我在播放第一个声音时点击另一个按钮，则第一个声音停止播放。此后，如果我点击任何按钮，将无法播放声音。 / p>

我无法理解这个问题。谢谢你的帮助。

这是我的代码。

<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

参考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 2

你能试试吗？

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

}

Answer 3

简单地做了这个和它的工作。我正在寻找的正是那个

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();

}

声音没有被播放

3 个答案: