Question

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

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

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

承认您已经拥有<div class='btn'>Click to play!</div>

之类的内容

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

点击按钮时发出哔哔声

6 个答案: