Stop html sound with javascript

Question

I am not really experienced with the use of javascript so this question could be a bit silly. I'm currently trying to develope a soundboard. Everything is working fine except one thing, i want to stop a sound when another button is clicked and i really don't know how i can do this.

That's an example for what i want to do: I click button 1, the sound is played and while the sound is still playing I click button 2 and the sound of button 1 stops while the sound of button 2 starts to play.(And so on with every button)

Html code:

function EvalSound(soundobj) {
  var thissound = document.getElementById(soundobj);
  thissound.play();
}

audio {
  visibility: hidden;
}

  <audio class="audio" id="a" src="" controls preload="auto" autobuffer></audio>
  <audio class="audio" id="b" src="b.wav" controls preload="auto" autobuffer></audio>
  <audio class="audio" id="c" src="c.mp3" controls preload="auto" autobuffer></audio>



  <input type="button" class="button" value="Button 1" onClick="EvalSound('a')">
  <input type="button" class="button" value="Button 2" onClick="EvalSound('b')">
  <input type="button" class="button" value="Button 3" onClick="EvalSound('c')">

score 1 · Accepted Answer · answered Jan 17 '15 at 21:23

If you call thissound.pause(), it will stop the sound from playing. What you want to do is to be able to call thissound.pause() after your function has reached its end, and local variables have been erased. This means that you'll need to store it in a global variable, which you could call currentsound, for example, so you can access it in another call of EvalSound. What this would get you is something like this:

var currentsound;
function EvalSound(soundobj) {
    currentsound.pause();
    var thissound = document.getElementById(soundobj);
    thissound.play();
    currentsound = thissound;
}

This gives us 2 problems, however. When you call EvalSound, the previous sound gets paused, and when it's called again for the same sound, it will start from where it was when you paused it. Therefore we need to set the time at which it needs to start playing. The other problem is that when you first call EvalSound, currentsound will be undefined, and calling currentsound.pause(); will result in an error. To solve this, we can add the following to it:

var currentsound;
function EvalSound(soundobj) {
    if(currentsound)
    {
        currentsound.pause();
    }
    var thissound = document.getElementById(soundobj);
    thissound.currentTime = 0;
    thissound.play();
    currentsound = thissound;

}

score 0 · Answer 2 · answered Jan 17 '15 at 21:15

0

There is pause method for audio elements. You can use it the same way you use play.

http://www.w3schools.com/tags/av_met_pause.asp

answered Jan 17 '15 at 21:15

Ozan

3,709
2
18
23

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

Something similar was mentioned in this question: HTML5 Audio stop function.
Javascript has a useful method when dealing with audio and that method is pause().

edited May 23 '17 at 12:22

Community

1
1

answered Jan 17 '15 at 21:15

Henry Zhu

2,488
9
43
87

score 0 · Answer 4 · answered Jan 17 '15 at 21:17

0

Try this, if clicking second button (id=b), stop first button invoking sound (id=a)

var sound_a = document.getElementById('a');
a.pause();
a.currentTime = 0;

answered Jan 17 '15 at 21:17

Lumi Lu

3,289
1
11
21

score 0 · Answer 5 · answered Jan 17 '15 at 21:19

If I correctly understand you, you just need something like this in js:

function EvalSound(soundobj) {
  document.getElementsByClassName('audio').map(function(thissound) {
    if(thissound.id == soundobj) {
      thissound.start();
    }
    else {
      thissound.pause();
    }
  });
}

Stop html sound with javascript

5 Answers5