custom mute and unmute button for Azure Media Player

Question

I'm trying to customize my own mute and unmute button on the Azure Media Player. When I add 2 separate buttons for the mute and unmute buttons, they work just fine. But whenever they are combined. the mute is triggering but unmuting does not work. What Im trying to achieve here is clicking only one button for mute and unmute.

Here is the sample code for two buttons:

 <h1>Sample: Clear</h1>
    <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
    <button type="button" onclick="playVid()">Play</button>
    <button type="button" onclick="pauseVid()">Pause</button>
    <button type="button" value="mute" id="mute" onclick ="muteVid()">Mute</button>
    <button type="button" value="mute" id="mute" onclick="unMuteVid()">UnMute</button>


    <script>
        function pauseVid(){
            myPlayer.pause();
        }
        function playVid() {
            myPlayer.play();
        }
        function muteVid() {
            myPlayer.muted(true);
        }
        function unMuteVid() {
            myPlayer.muted(false);
        }

    </script>

And then here is the sample code for mute and unmuting combined:

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
    <button type="button" onclick="playVid()">Play</button>
    <button type="button" onclick="pauseVid()">Pause</button>
    <button type="button" value="mute" id="mute" onclick ="muteVid()">Mute</button>



    <script>
        function pauseVid(){
            myPlayer.pause();
        }
        function playVid() {
            myPlayer.play();
        }
        function muteVid() {
            if (myPlayer.muted(false)) {
                myPlayer.muted(true);
            } else {
                myPlayer.muted(false);
            }
        }

Im having the difficulty of determining the syntax for the operators.

Answer 1

You need to change the mute function as below:

 function muteVid() {
        if (!myPlayer.muted()) {
            myPlayer.muted(true);
        } else {
            myPlayer.muted(false);
        }
    }  

Note that you should use !myPlayer.muted() as the if condition instead of myPlayer.muted(false).. According to this article, the muted function has two overloads: muted(boolean) and muted(). muted(boolean) is used to set the mute state of the player and returns the player object, so your original script will first set the player to unmute and then set it back to mute, and will never go into the else clause, that's the reason that the mute is triggering but unmuting does not work.