点击按钮时发出哔哔声

Question

好的，我在这里读过几个答案但是根本没有帮助我（实际上，没有一个被接受作为答案）

问题是如何在“按钮点击”上“发出嘟嘟声”

我正在尝试建立一个适用于触摸屏设备的网站，所以我希望每个按钮点击事件都会发出哔哔声，对于使用该网站的用户来说应该更好。哔声文件在这里：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" 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

承认你已经拥有像<div class='btn'>Click to play!</div>这样的东西

简单的方法（没有HTML）

var audio = new Audio('audio.mp3'); // define your audio

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

---

更进一步能够快速触发声音

但是，您会注意到，如果您尝试在一个.btn上轻轻点击，则播放器将等待声音结束以便能够触发另一个声音（所有其他解决方案也是如此）。为了摆脱这个，这是我发现的唯一解决方案：

// array with souds to cycle trough
// the more in the array, the faster you can retrigger the click 
var audio = [new Audio('audio.mp3'), new Audio('audio.mp3')];
var soundNb = 0; // counter

$('.btn').click( () => audio[ soundNb++ % audio.length ].play());

WORKING DEMO

Answer 3

这很好用

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 4

使用原始JavaScript，您只需调用：

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

Answer 5

让我疯狂，但是使用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 6

从技术上讲，以下内容并未回答有关“播放”哔哔声的问题，但如果询问如何“生成”嘟嘟声，请考虑我在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中使用过它，但没有在其他浏览器中尝试过。