Immediate play sound on button click in HTML page

StackOverflow https://stackoverflow.com/questions/12953928

  •  08-07-2021
  •  | 
  •  

سؤال

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?

هل كانت مفيدة؟

المحلول

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;

نصائح أخرى

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>

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>

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/

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>

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>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top