单击按钮时播放蜂鸣声

Question

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

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

我正在尝试制作一个可在触摸屏设备上运行的网站，因此我希望每个按钮单击事件都会发出哔哔声，这对于使用该网站的用户来说应该更好。哔声文件在这里：http: //www.soundjay.com/button/beep-07.wav 。我只需要在 Google Chrome 上工作（支持 HTML5）

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

Java脚本：

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

HTML

 <embed src="/beep.wav" autostart="false" type="audio/mpeg" loop="false" width="0" height="0" 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>

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

原文由 Ronaldinho Learn Coding 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

     <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>

这是一个 笨蛋

原文由 netrevisanto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

承认你已经在你的 html 中有类似 <div id='btn'>Click to play!</div> 的东西，你可以像这样简单地做到这一点：

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

这是 IMO 的最佳解决方案，因为它允许在按钮上快速单击多次而不会出现问题（这在当时的其他答案中是不可能的）并且是单行的。

 const audioUrl = 'https://freewavesamples.com/files/Ensoniq-ESQ-1-Piano-C3.wav'

$('.btn').click( () => new Audio(audioUrl).play() ); // that will do the trick !!

 body {padding: 16px;}

.btn {
  background: tomato;
  padding:15px;
  border-radius:5px;
  color:#fff;
  cursor: pointer;
  box-shadow: 0 -3px rgba(0,0,0,0.15) inset;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class='btn'>Click to play!</span>

代码笔上的例子

原文由 TOPKAT 发布，翻译遵循 CC BY-SA 4.0 许可协议