单击按钮时播放蜂鸣声

Question

好的，我在这里阅读了几个答案，但它们对我一点帮助都没有（事实上，其中 none 个被接受为答案）

问题是如何在 "button click"

上 "Play a beep sound"

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

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

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>

这是一个Plunker

Answer 2

这个很好用

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

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

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

Answer 3

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

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

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

WORKING DEMO

Answer 4

把我逼疯了，但是 JQuery 我找到了一个解决方案……这不是最好的方法，但对我来说很管用……

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

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

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

Answer 5

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

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

Answer 6

从技术上讲，以下内容不会回答有关 "playing" 哔声的问题，但如果询问如何 "generate" 发出哔声，请考虑我在 [=12= 上找到的以下代码]:

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 中使用过，但没有在其他浏览器中尝试过。

Answer 7

扩展 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
    }
}

单击按钮时播放蜂鸣声

Play a beep sound on button click

html

javascript

embed

asp.net

jquery