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)
I understand this need to work on client-side so I tried this:
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>
But it doesn't work, nothing happens when I click the button.
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
Admitting you already have something like <div id='btn'>Click to play!</div> in your html, you could do it as simple as:
$('#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.
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>