具有保存值的DVD喊话器声音开/关开关

Question

i want to make shoutbox sound when shout is arrived. I've got a script and i styled button but i cant make script working. script for sound is:

dvz_shoutbox.callbacks['update'].push(function(){
if ($('#shoutbox .entry.new').length) {
    var audio = new Audio(rootpath + '/images/dvz_shoutbox.mp3');
    audio.volume = 0.2;
    audio.play();
}});

And it works,but i want to add on/of switch that will turn on and off this script, also i want to style it when it's on and off. I got css look like this:

button.unmuted,button.muted {
vertical-align: middle;
padding: 0px 15px;
background: #060922;
line-height: 30px;
margin-top: -42px;
margin-left: 148px;
position: absolute;}

button.unmuted:hover {color:#c0c3bf} button.muted:hover {color:#c0c3bf;} button.muted:before{font-family: FontAwesome;content: "\\f026";} button.unmuted:before{font-family: FontAwesome;content: "\\f028";}

Can anyone help me ??

Answer 1

Assuming that there is only one button in your HTML, you need to attach a click event handler to that button . The handler will toggle the classes muted and unmuted whenever the button is clicked.

Then, in your callback that creates the audio, you can check to see if your button contains the class muted . If it does, then do not play the sound.

Altogether, your code would look like so:

dvz_shoutbox.callbacks['update'].push(function(){

    var $button = $("button");

    if ($button.length && $button.hasClass("unmuted")) { // checck if unmuted
        var audio = new Audio(rootpath + '/images/dvz_shoutbox.mp3');
        audio.volume = 0.2;
        audio.play();
    }
});

$("button").click(function() { // adds click handler

    var $this = $(this);

    $this.toggleClass("muted");
    $this.toggleClass("unmuted");
});

Note: in order for the code above to work, make sure your button starts out with class unmuted in your HTML.