Javascript 单击按钮时播放哔声
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29567580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play a beep sound on button click
提问by Ronaldinho Learn Coding
OK I've read several answers here but they didn't help me at all (in fact, none of them is being accepted as answer)
好的，我在这里阅读了几个答案，但它们根本没有帮助我（实际上，它们都没有被接受为答案）
Question is how to "Play a beep sound"on "button click"
问题是如何在“按钮点击”上“播放哔哔声”
I am trying to make a website that works on touchscreen device so I want every button click events will play a beep sound, that should be nicer for users who using the website. Beep sound file is here: http://www.soundjay.com/button/beep-07.wav. I only need this work on Google Chrome (supports HTML5)
我正在尝试制作一个可在触摸屏设备上运行的网站，因此我希望每个按钮点击事件都会播放哔声，这对于使用该网站的用户来说应该会更好。哔声文件在这里：http: //www.soundjay.com/button/beep-07.wav。我只需要在 Google Chrome 上进行这项工作（支持 HTML5）
I understand this need to work on client-side so I tried this:
我理解这需要在客户端工作，所以我尝试了这个：
Javascript:
Javascript：
<script>
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
sound.Play();
}
</script>
HTML
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>
But it doesn't work, nothing happens when I click the button.
但它不起作用，当我单击按钮时没有任何反应。
回答by netrevisanto
You could use an audio tag like this:
您可以使用这样的音频标签：
<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>
Here is a Plunker
这是一个Plunker
回答by 538ROMEO
Admitting you already have something like <div id='btn'>Click to play!</div>in your html, you could do it as simple as:
承认你<div id='btn'>Click to play!</div>的 html 中已经有类似的东西，你可以像这样简单地做到：
$('#btn').click( () => new Audio('mp3/audio.mp3').play() );
This is the best IMO because it allow riffle clicking on the button (which is not possible in other answers at the time) and is a one liner.
这是最好的 IMO，因为它允许轻按按钮（当时在其他答案中是不可能的）并且是单班轮。
回答by Downgoat
This works fine
这工作正常
function playSound () {
document.getElementById('play').play();
}<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>
<button onclick="playSound()">Play</button>回答by Joe Iddon
With raw JavaScript, you can simply call:
使用原始 JavaScript，您可以简单地调用：
new Audio('sound.wav').play()
回答by Alan M.
Technically, the following doesn't answer the question about "playing" a beep, but if asking how to "generate" a beep, then consider the following code that I found on 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)
}
Sample values for the call: beep(20, 100, 30). The aforementioned website includes more details and sound samples.
调用的示例值：beep(20, 100, 30)。上述网站包括更多细节和声音样本。
The sound can be in response to a button click or programmatically generated at will. I have used it in Chrome but have not tried it in other browsers.
声音可以是响应按钮单击或以编程方式随意生成。我在 Chrome 中使用过它，但没有在其他浏览器中尝试过。
回答by thphoenix
Been driving me crazy, but with JQuery I found a solution... not really the best way to do it, but it worked properly for me...
一直让我发疯，但是使用 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);
}
not sure how much of the embed tag is really required, but once it started working, I stopped writing (embed copied from another solution).
不确定真正需要多少嵌入标签，但是一旦它开始工作，我就停止编写（嵌入从另一个解决方案中复制）。
Hope this helps someone else (or helps me the next time I forget)
希望这对其他人有帮助（或在我下次忘记时帮助我）
