20

In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.

It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.

Is there any faster way of playing a .wav sound on 'onclick' method?

halfer
  • 19,824
  • 17
  • 99
  • 186
firefalcon
  • 500
  • 2
  • 8
  • 21

6 Answers6

26

If you only need to support recent browsers, then HTML 5 offers you the Audio object

to load/buffer your sound:

var snd = new Audio("file.wav");

to play the sound:

snd.play();

to re-cue it to the beginning (so that you can play it again):

snd.currentTime=0;
paul
  • 21,653
  • 1
  • 53
  • 54
  • Paul, I tried it and it works great in Mozilla and Opera. But unfortunately it's not working in IE 8 :(. Is there any replacement for "Audio" object so can be supported by older IE browsers? – firefalcon Oct 18 '12 at 12:12
  • HI Paul, I have tested "Audio" object in IE 9, it is not showing any Error, but not working and doing nothing? Do I have to enable any features for that? – firefalcon Oct 19 '12 at 11:27
  • How are the sounds encoded? IE9 only likes MP3. This chart (http://www.w3schools.com/html/html5_audio.asp) shows which browsers support which formats. If you want to cover all browsers, you will need to encode the sounds in two formats: mp3 & wav – paul Oct 23 '12 at 09:35
  • Just a note for the context: you can load the sound file ('file.wav') here using the `` tag. – sanjarcode Jul 01 '22 at 06:25
15

This answer https://stackoverflow.com/a/7620930/1459653 by @klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:

HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface:

<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> <button onclick="document.getElementById('sound1').play();">Play it</button>

Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).

<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
Community
  • 1
  • 1
Mark Gavagan
  • 878
  • 12
  • 45
1

You can use embed element for play sounds, but you've to check the formats supported by the different browsers.

Embed element on MDN

<a onclick="playSound('1.mp3')">
   <img src="1.gif">
</a>
<div id="sound"></div>

<script>
   var playSound = function (soundFile) {
      $("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
   }
</script>
jkutianski
  • 580
  • 6
  • 16
1

This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.

</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>

more on codes look at http://html5doctor.com/html5-audio-the-state-of-play/

josliber
  • 43,891
  • 12
  • 98
  • 133
Glenda Webb
  • 11
  • 1
  • You can use both lines to make the sound to work for Internet Explorer but I keep getting a pop up saying;(Internet Explorer restricted this webpage from running scripts or ActiveX controls) that makes me click on "Allow blocked content" so it will work I'm using Windows10 var audio = new Audio("/Sample.wav "); var audio = new Audio("/Sample.mp3 "); – Glenda Webb Dec 03 '15 at 18:36
1

Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:

<button onclick="snd.play()"> Click Me </button>

<script>
    var snd = new Audio("/Content/mysound.wav"); 
</script>
Exel Gamboa
  • 936
  • 1
  • 14
  • 25
0

This is what I would do to play sound effects:

    <html>
            <body>
        <audio id="sfx"><source src="mysound.mp3"></audio>
            <button onclick="playsound()" id="button">Play a sound!</button>
            <script> function playsound() {
    
    var sfx = document.getElementById("sfx");
    sfx.autoplay = 'true';
sfx.load();}

Or you can run this snippet:

function playsound() {
  var mysound = document.getElementById("mysound");
  mysound.autoplay = 'true';
  mysound.load();
}
button {
  color: blue;
  border-radius: 24px;
  border: 5px solid red;
}

body {
  background-color: #bfbfbf;
}
<html>

<body>
  <audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works.  --></audio>
  <button id='btn' onclick='playsound()'>Play a sound!</button>
</body>

</html>
DMCoder
  • 1
  • 1