toggle mute and unmute with javascript

Question

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

Answer 1

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