CODEWITHSUNDEEP
javascriptjqueryfunction
ui-unicorn.co.uk
ui-unicorn.co.uk

Reputation: 151

Disable and re-enable a function, Mute and Unmute

Hi I am trying to disable a function with a click of a button and then enable it again once another button is clicked I have tried unbind but I am getting no where any suggestions to how I can go about this?

Code:

<a href="#" class="MuteOn">Mute</a>
<a href="#" class="MuteOff">Unmute</a>

$('.MuteOn').on('click tap touch', function() {
//Disable soundListen function
 });

$('.MuteOff').on('click tap touch', function() {
//Enable soundListen function
 });

//

setInterval(function soundListen() {
    if ($("body").hasClass("fp-viewing-1")) {
        audio1.play();

    } else {
        audio1.pause();
        audio1.currentTime = 0;
    }

    if ($("body").hasClass("fp-viewing-2")) {
        audio2.play();
    } else {
        audio2.pause();
        audio2.currentTime = 0;
    }

    if ($("body").hasClass("fp-viewing-3")) {
        audio3.play();
    } else {
        audio3.pause();
        audio3.currentTime = 0;
    }
}, 100);

Thank you in advance for any suggestions.

Upvotes: 0

Views: 1407

Answers (1)

maximelian1986
maximelian1986

Reputation: 2452

Ok, so I understood it like this: -On first page user can click mute/unmute button and that should be saved during navigation through all other pages/slides.

Then here is a code:

<!doctype>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button id="mute">Mute</button>
        <button id="unmute">Unmute</button>
        <button id="reloadPage">Reload Page</button>
        <script type="text/javascript">

            //get variable from local variables or set to false(you can change it to TRUE if you like to mute on page load) by default
            var isMuted = localStorage.getItem("IsMuted")||false;

            //mute button onclick method
            $(document).on('click','#mute',function(e){
                isMuted = true;
                //save to local variables
                localStorage.setItem("IsMuted", isMuted);
            }); 

            //unmute button onclick method
            $(document).on('click','#unmute',function(e){
                isMuted = false;
                //save to local variables
                localStorage.setItem("IsMuted", isMuted);
            }); 

            //reload page. also you can use F5 or Ctrl+F5
            $(document).on('click','#reloadPage',function(e){
                location.reload();
            });

            $(document).ready(function(){
                alert("IsMuted = "+isMuted);

                //you can encapsulate this into separate function and bind to show-next-slide button                
                if(isMuted)
                {
                    return;
                }
                else
                {
                    //get clip id by class name or another suitable method
                    PlayMyCoolMusic(clipId);
                }
            });



            function PlayMyCoolMusic(clipId)
            {
                //your audio player logic here

            }
        </script>
    </body>
</html>

With this you can save you mute/unmute status even if page has been reloaded.

Upvotes: 1

Related Questions