0

I'm trying to create a button for muting and un-mute.

Initially I have by button set up like this:

<i class="fa fa-microphone" id="audio"></i>

and what I want is that when you click it, the class becomes:

<i class="fa fa-microphone-slash" id="audio"></i>

now I have my javascript set up like this:

$(document).ready(function() {
  $('#audio').click(function() {
    publisher.publishAudio(false);
  });
});

which essentially mutes it, now I need to make it so that it can also unmute when I click on the button

Lucas Huang
  • 3,998
  • 3
  • 20
  • 29
Sebastian Jennings Almnes
  • 1,588
  • 2
  • 19
  • 33
  • Inside of your click function for #audio, since you're using jQuery, do $(this).toggleClass("fa-microphone").toggleClass("fa-microphone-slash"); – Tyler Durden Sep 16 '15 at 16:53
  • perfect, now do you know how I can trigger the true false in publishAudio as-well? – Sebastian Jennings Almnes Sep 16 '15 at 17:03
  • There are several ways. You could use event handlers that listen to the class, but I've found sometimes they aren't reliable. If you want logic inside your click function there is suggest using $("#audio").hasClass("fa-microphone-slash") as the Boolean for an if statement, so if it is the slash class, unmute, else mute. I'll put all of this in an answer. – Tyler Durden Sep 16 '15 at 17:06

3 Answers3

0

Using jQuery, I'd chain toggleClass, along with an if statement using hasClass for the logic:

$(document).ready(function() {
  $('#audio').click(function() {
    if ($(this).hasClass("fa-microphone-slash")) {
        publisher.publishAudio(true);
    } else {
        publisher.publishAudio(false);
    }
    $(this).toggleClass("fa-microphone-slash");
    $(this).toggleClass("fa-microphone");

    publisher.publishAudio($(this).hasClass(""));
  });
});

If you want a DRY solution with no if statement, based on the class:

$(document).ready(function() {
  $('#audio').click(function() {
    publisher.publishAudio($(this).hasClass("fa-microphone-slash"));    
    $(this).toggleClass("fa-microphone-slash");
    $(this).toggleClass("fa-microphone");
  });
});

The second solution will just use the presence of the fa-microphone tag as a boolean for whether to perform a mute.

Tyler Durden
  • 1,506
  • 13
  • 21
0

I don't know jquery that well but here's some simple javascript code to manipulate the class

$(document).ready(function() {
    $('#audio').click(function() {
        var audio = document.querySelector("#audio");

        // get current class state
        var currentState = audio.getAttribute("class");

        // change class
        if(currentState === "fa fa-microphone"){
           audio.setAttribute("class", "fa fa-microphone-slash");
        }else{
           audio.setAttribute("class", "fa fa-microphone");
        }

    });
});
Prince
  • 65
  • 9
0

you can check if the publisher is sending video/audio on the stream it self like this: 

publisher.stream.hasAudio
publisher.stream.hasVideo

then you can use the ! (bang) to invert it 

publisher.publishAudio(!publisher.stream.hasAudio);
publisher.publishVideo(!publisher.stream.hasVideo);

so to toggle the class aswell you do someting like

$(document).ready(function() {
    var toggleAudioBtn = $('#audio')
    toggleAudioBtn.click(function() {
       toggleAudioBtn.toggleClass("fa-microphone-slash").toggleClass("fa-microphone");
       publisher.publishAudio(!publisher.stream.hasAudio); 
    });
 });
VeXii
  • 3,079
  • 1
  • 19
  • 25