CODEWITHSUNDEEP
javascripthtmlaudio
Peter
Peter

Reputation: 67

Stop html sound with javascript

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')">

Upvotes: 2

Views: 406

Answers (5)

Henry Zhu
Henry Zhu

Reputation: 2618

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

Upvotes: 0

JimmyMcHoover
JimmyMcHoover

Reputation: 854

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;

}

Upvotes: 1

Rodion
Rodion

Reputation: 521

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();
    }
  });
}

Upvotes: 0

Lumi Lu
Lumi Lu

Reputation: 3305

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;

Upvotes: 0

Ozan
Ozan

Reputation: 3739

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

Upvotes: 0

Related Questions