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

3
  • Inside of your click function for #audio, since you're using jQuery, do $(this).toggleClass("fa-microphone").toggleClass("fa-microphone-slash"); Sep 16, 2015 at 16:53
  • perfect, now do you know how I can trigger the true false in publishAudio as-well? Sep 16, 2015 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. Sep 16, 2015 at 17:06

3 Answers 3

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); 
    });
 });
2
  • I think you have some mistakes in the code, that gives me an error with the semicolon after fa-microphone and then an unexpected identifier on publisher line? Sep 16, 2015 at 17:54
  • sorry, forgot to remove the line above
    – VeXii
    Sep 16, 2015 at 17:55
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");
        }

    });
});
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.

4
  • hey it seems to mute, but not unmute Sep 16, 2015 at 17:20
  • Updated, see if that fixes your issue of it only working one way Sep 16, 2015 at 17:22
  • progress. Now what happens if I do mute, it mutes, if I click unmute it is unmuted but the icon is still on unmute, and I'm unable to toggle them by clicking on it Sep 16, 2015 at 17:25
  • I split the toggleClass calls out, is that solving your issue? I'm at work or I would do a live test. Sep 16, 2015 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.