使用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

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.

Answer 2

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

    });
});

Answer 3

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