2

我有一个 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();
}
4

3 回答 3

2

参考这个 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();
}
于 2013-06-03T05:17:25.420 回答
1

你能试试这个吗？

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

}
于 2013-06-03T05:27:56.543 回答
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();

}
于 2013-06-03T09:19:05.520 回答