点击按钮时发出哔哔声

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 id='btn'>Click to play!</div>

简单的方法(没有HTML)

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

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

但是,您会注意到,如果您尝试轻松点击其中一个,<div id='btn'>Click to play!</div>则播放器将等待声音结束以便能够触发另一个声音(所有其他解决方案也是如此).为了摆脱这个,这是我发现的唯一解决方案:

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

工作演示

Answer 3

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

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 4

这很好用

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 5

使用原始JavaScript,您只需调用:

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