Play a beep sound on button click

问题:

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.

回答1:

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

回答2:

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>

回答3:

Admitting you already have something like <div class='btn'>Click to play!</div>

SIMPLE APPROACH (with no HTML)

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

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

---

TO GO FURTHER Be able to quickly trigger sounds

However, you will notice that if you try to riffleClick on one .btn the player will wait the end of the sound to be able to trigger another sound (that's the case with all others solution too). To get rid of this, this is the only solution I've found:

// 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

回答4:

With raw JavaScript, you can simply call:

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

回答5:

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...

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)