在网站上打开和关闭声音

Question

I am making a bit of an old-school website with sound effects. Now I got the sound effects to run but I am running into a bit of a problem. I'd like to know how I can turn them all on and off with a button. I want to have them ON by default when loading a page and then you can toggle it on or off.

I got as far as making them play when you enter the site and when you click on links and such. But now I want to mute them all. The Jquery .on and .off aren't working for me... I guess I am doing something terribly wrong here, I'm not that savvy with javascript:

var siteAudio = function () {
 if ( $(".turn-off").hasClass("turnedon") ) {   


var galleryleft = $("#galleryleft")[0];
$(".arrowleft").click(function() {
galleryleft.play();
});

}
else {
var galleryleft = $("#galleryleft")[0];
$(".arrowleft").click(function() {
galleryleft.pause();
});

}


$( ".turn-off" ).click(function() {
$('.turn-off').toggleClass('turnedon');
$('.turn-off').toggleClass('turnedoff');
$(siteAudio).off();
});

window.onload = function () {
$(siteAudio).on();
}

Now this is working, but the sound should be off completely, instead it plays at the 4th time you click something ( Or at the 4th mouse-over when that is being used.) I hope anyone can say what I'm doing wrong here

Answer 1

I tink this will work based on what you've said. It seems you were overthinking things, and that is very common in jQuery/javascript :)

$(document).ready( function() {
  var galleryleft = $("#galleryleft")[0];
  var gallerySoundOn = true;


  $( ".turn-off" ).click( function(e) {
    if( gallerySoundOn ) { gallerySoundOn = false; }
    else { gallerySoundOn = true; }
    e.preventDefault();
  });

  $(".arrowleft").click( function(e) {
    if( gallerySoundOn ) { galleryleft.play(); }
    else { galleryleft.play(); galleryLeft.currentTime = 0; }
    e.preventDefault();
  });

});

let me know how it goes.

Answer 2

Simey, you have just provided me with the information I needed :), thank you ever so much!

Only thing I had to change was the

galleryleft.play(); galleryLeft.currentTime = 0;

I changed it into:

galleryleft.pause;

but for the rest this makes SO MUCH more sense then my script. Indeed I was overcomplicating things. I owe you a beer...