CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
senty
senty

Reputation: 12847

'Pop noise' sounds when audio paused with Javascript

I have an audio tag in my html, and which I have .wav inside it. With Javascript, I select audio tag and play the wav., which I trigger using a keyboard key. What I am trying to achieve is, for example, on press of each 'A' key, replay the .wav/play the sound from the beginning)

The playing of the audio works okay, and so does the pause too. However, I get a pop noise, while directly pausing the playing .wav.

var audio = document.getElementById(sound);

if (!isPlaying(audio)) {
   audio.play();     // works
} else {
   audio.pause();    // pops on this line; I checked with commenting below lines.
   audio.currentTime = 0;
   audio.play();
}

I found this answer, and as far as I understand, it's happening because I instantly set the volume to 0; but I couldn't figure it out for my case. I believe using a fader with setInterval is not a good approach

I also found audio.muted = true, and tried using it before pausing the volume (and used audio.muted = false just before playing the audio), but this also gives pop noise

Update:

I think I need to use fade out to work around this issue. Is there a way to fade out audio instantly?

Upvotes: 1

Views: 1224

Answers (1)

guest271314
guest271314

Reputation: 1

Update:

I think I need to use fade out to work around this issue. Is there a way to fade out audio instantly?

You can use .animate() to animate volume property from current value to 0 

var audio = $("audio");
$("button").click(function() {
  if (audio[0].volume > 0) {
    audio.animate({volume:0});
    // call `.pause()` here
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls  src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Micronesia_National_Anthem.ogg"></audio>
<button>fade out audio</button>

Upvotes: 3

Related Questions