没有播放声音

Posted 2023-02-25

【中文标题】没有播放声音

【英文标题】：Sounds are not being Played

【发布时间】：2013-06-03 05:07:36

【问题描述】：

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

【问题讨论】：

你能用所有按钮发布你的整个代码吗？

查看我更新的问题

我现在对你的问题感到困惑。应该用同一个按钮播放和暂停音频吗？你能解释清楚吗？

@User42490 ：但是你在之前的评论中提到了pause，你刚刚删除了！

Actuall 在所有这些按钮上，我都有 onclick 功能，它会在点击时播放声音。现在，当我单击 button_1 时，它会播放一个名为“a”的声音，当我单击 button_2 时，它将播放一个名为“ab”的声音。所有声音都在我的音频文件夹中，名称为 a.mp3、ab.mp3、abc.mp3、abcd.mp3、abcde.mp3、abcdef.mp3。现在我有持续时间短的声音 a.mp3，但我有持续时间有点长的声音 a.mp3。现在，当我点击 button_2 上的声音 ab.mp3means 时，它会播放声音。

【参考方案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();

【讨论】：

我已经尝试过你的建议，但它对我的问题不起作用

【参考方案2】：

你能试试这个吗？

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

【讨论】：

如果我在音频功能中创建 audioElement，则以前的声音不会在新声音上暂停。那么如何摆脱这种情况。如果在此函数之外创建 audioElement，则会出现问题描述

【参考方案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();