单击按钮时播放哔声

Posted 2023-02-22

【中文标题】单击按钮时播放哔声

【英文标题】：Play a beep sound on button click

【发布时间】：2015-06-16 12:51:06

【问题描述】：

好的，我在这里阅读了几个答案，但它们根本没有帮助我（事实上，没有一个被接受为答案）

问题是如何在“按钮点击”时“播放哔声”

我正在尝试制作一个可以在触摸屏设备上运行的网站，所以我希望每个按钮点击事件都会播放哔声，这对于使用该网站的用户来说应该会更好。哔声文件在这里：http://www.soundjay.com/button/beep-07.wav。我只需要在谷歌浏览器上进行这项工作（支持 html5）

我知道这需要在客户端工作，所以我尝试了这个：

javascript：

<script>
    function PlaySound(soundObj) 
        var sound = document.getElementById(soundObj);
        sound.Play();
    
</script>

HTML

<embed src="/beep.wav" autostart="false" type="audio/mpeg" loop="false"   id="beep" enablejavascript="true" />
<asp:LinkButton ID="lbtnExit" runat="server" OnClick="lbtnExit_Click" OnClientClick="PlaySound('beep')" CssClass="btn btn-lg btn-danger" Text="Exit <i class='fa fa-sign-out' style='font-size: 40px'></i>"></asp:LinkButton>

但它不起作用，当我点击按钮时没有任何反应。

【问题讨论】：

尝试使用<audio>标签：storiesinflight.com/html5/audio.html

试试这个我认为它对你有用：***.com/questions/879152/…

【参考方案1】：

扩展 Alan M. 的答案，如果由于还没有用户事件而无法运行，这将防止控制台错误

var actx = false;
function beep(vol, freq, duration)
    try
        if(!actx) actx = new AudioContext();
        v=actx.createOscillator();
        u=actx.createGain();
        v.connect(u);
        v.frequency.value=freq;
        u.connect(actx.destination);
        u.gain.value=vol*0.01;
        v.start(actx.currentTime);
        v.stop(actx.currentTime+duration*0.001);
    catch
        // ignore
    

【参考方案2】：

承认您的 html 中已经有类似 <div id='btn'>Click to play!</div> 的内容，您可以这样做：

$('#btn').click( () => new Audio('mp3/audio.mp3').play() );

这是最好的 IMO，因为它允许点击按钮（这在当时的其他答案中是不可能的）并且是单行的。

WORKING DEMO

【参考方案3】：

从技术上讲，以下内容并未回答有关“播放”哔声的问题，但如果询问如何“生成”哔声，请考虑我在 this website 上找到的以下代码：

a=new AudioContext()
function beep(vol, freq, duration)
  v=a.createOscillator()
  u=a.createGain()
  v.connect(u)
  v.frequency.value=freq
  v.type="square"
  u.connect(a.destination)
  u.gain.value=vol*0.01
  v.start(a.currentTime)
  v.stop(a.currentTime+duration*0.001)

调用的示例值：beep(20, 100, 30)。上述网站包含更多细节和声音样本。

声音可以响应按钮单击或以编程方式随意生成。我在 Chrome 中使用过，但在其他浏览器中没有尝试过。

【参考方案4】：

你可以使用这样的音频标签：

    <audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio>
    <a onclick="playSound();"> Play</a>
    <script>
    function playSound() 
          var sound = document.getElementById("audio");
          sound.play();
      
    </script>

这是Plunker

【讨论】：

谢谢。对于 Internet Explorer 10，使用 .mp3 而不是 .wav

根据documentation autostart 不是audio 属性。相反，它应该是自动播放。

autoplay="false" 不受 Firefox 86 的尊重。应该删除它的属性以不自动播放。属性循环也是如此。

【参考方案5】：

使用原始 JavaScript，您可以简单地调用：

new Audio('sound.wav').play()

【参考方案6】：

一直让我发疯，但使用 JQuery，我找到了解决方案......并不是最好的方法，但它对我来说很有效......

function ding() 
      $("body").append('<embed src="/ding.mp3" autostart=false autoplay=false type="audio/mpeg" loop="false"   id="beep" enablejavascript="true" />');
      setTimeout(function() $("#beep").remove(); ,2000);

不确定真正需要多少 embed 标记，但一旦它开始工作，我就停止编写（嵌入从另一个解决方案复制）。

希望这对其他人有所帮助（或在我下次忘记时帮助我）

【讨论】：

呃，这很笨拙。为什么不使用function ding() new Audio('/ding.mp3').play(); ？

【参考方案7】：

这很好用

function playSound () 
    document.getElementById('play').play();

<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>

<button onclick="playSound()">Play</button>