turn sound on and off on a site

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

Looks like it's been answered: http://stackoverflow.com/a/14836099/1121532 — simey.me, Aug 22 '13 at 11:38
No, not exactly. This uses a Pause. I have to turn all the effects off using one button. I was hoping I could just somehow toggle the whole funtion called siteAudio. I frankly did not undertsand what was meant by the last reply. — Sjoerd, Aug 22 '13 at 14:00
I beg your pardon, originally I thought your question was "how do I stop the sounds from playing" ... I've only ever known `.on()` and `.off()` to be used for attaching event handlers, though... Answer coming up (i hope) : — simey.me, Aug 22 '13 at 19:49

simey.me · Answer 1 · 2013-08-22T22:02:45.483

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.

score 0 · Answer 2 · answered Aug 23 '13 at 10:01

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

turn sound on and off on a site

2 Answers2