CODEWITHSUNDEEP
javascriptjquery
Anna_B
Anna_B

Reputation: 890

jQuery: Pause sound with button click instead of restart

I use jQuery for playing sound. If I click my .sound_control button a few times, the sound always restarts from the beginning. I would need a pause function instead of that.

This is my code:

$(document).ready(function() {

  var background_sound = document.createElement("audio");
  background_sound.src = "https://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3";
  background_sound.volume = 0.1;
  background_sound.autoPlay = true;
  background_sound.loop = true;
  background_sound.controls = true;
  background_sound.play();


  var click_sound = document.createElement("audio");
  click_sound.src = "http://soundbible.com/mp3/Stapler-SoundBible.com-374581609.mp3";
  click_sound.volume = 0.1;
  click_sound.autoPlay = false;
  click_sound.preLoad = true;
  click_sound.controls = true;


  $(".click_sound").click(function() {
    click_sound.currentTime = 0;
    click_sound.play();
  });

  $(".sound_control").click(function() {
    $(".on_off").toggle();
    if (background_sound.currentTime) {
      background_sound.currentTime = 0;
      background_sound.pause();
    } else {
      background_sound.play();
    }
  });

});
.on_off:nth-child(2) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="sound_control">Sound <span class="on_off">on</span><span class="on_off">off</span></button>

<button class="click_sound">Button One</button>
<button class="click_sound">Button Two</button>
<button class="click_sound">Button Three</button>
<button class="click_sound">Button Four</button>

How is it possible to do that? Would be very happy if someone could help me!

Upvotes: 1

Views: 68

Answers (2)

Stormix
Stormix

Reputation: 113

Your if statement has for some reason the side effect of stopping playback, I'm not a 100% sure why, but here's what you should use instead:

$(".sound_control").click(function() {
    $(".on_off").toggle();
    if (!background_sound.paused) {
      background_sound.pause();
    } else {
      background_sound.play();
    }
  });

Edit: mute click sound when sound is off.

Since we're using the background sound as an indicator on whether the sound is on or off. We can just add an extra check to the click_sound handler.

 $(".click_sound").click(function() {
    if(!background_sound.paused){
      click_sound.currentTime = 0;
      click_sound.play();
    }
  });

Here's a live snippet:

$(document).ready(function() {

  var background_sound = document.createElement("audio");
  background_sound.src = "https://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3";
  background_sound.volume = 0.1;
  background_sound.autoPlay = true;
  background_sound.loop = false;
  background_sound.controls = true;
  background_sound.play();


  var click_sound = document.createElement("audio");
  click_sound.src = "http://soundbible.com/mp3/Stapler-SoundBible.com-374581609.mp3";
  click_sound.volume = 0.1;
  click_sound.autoPlay = true;
  click_sound.preLoad = true;
  click_sound.controls = true;

  $(".click_sound").click(function() {
    if(!background_sound.paused){
      click_sound.currentTime = 0;
      click_sound.play();
    }
  });

  $(".sound_control").click(function() {
    $(".on_off").toggle();
    if (!background_sound.paused) {
      background_sound.pause();
    } else {
      background_sound.play();
    }
  });
});
.on_off:nth-child(2) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="sound_control">Sound <span class="on_off">on</span><span class="on_off">off</span></button>

<button class="click_sound">Button One</button>
<button class="click_sound">Button Two</button>
<button class="click_sound">Button Three</button>
<button class="click_sound">Button Four</button>

Upvotes: 1

Grega Rednak
Grega Rednak

Reputation: 36

You are setting the current time to 0.

sound.currentTime = 0;

And in this snippet you did not define sound.

Upvotes: 0

Related Questions