使用 javascript 切换静音和取消静音

Question

我正在尝试创建一个用于静音和取消静音的按钮。

最初我是这样设置按钮的：

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

我想要的是当你点击它时，class 变成：

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

现在我的 javascript 设置如下：

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

这实际上是静音，现在我需要让它在我点击按钮时也能取消静音

Answer 1

使用 jQuery，我会链接 toggleClass，连同使用 hasClass 的 if 语句作为逻辑：

$(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 语句的 DRY 解决方案，基于 class:

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

第二种解决方案将只使用 fa-microphone 标签的存在作为是否执行静音的布尔值。

Answer 2

我不太了解 jquery 但这里有一些简单的 javascript 代码来操作 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

您可以检查发布者是否在自己的流中发送 video/audio，如下所示：

publisher.stream.hasAudio
publisher.stream.hasVideo

然后你就可以使用了！（爆炸）反转它

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

所以要切换 class 你也可以做一些事情

$(document).ready(function() {
    var toggleAudioBtn = $('#audio')
    toggleAudioBtn.click(function() {
       toggleAudioBtn.toggleClass("fa-microphone-slash").toggleClass("fa-microphone");
       publisher.publishAudio(!publisher.stream.hasAudio); 
    });
 });

使用 javascript 切换静音和取消静音

toggle mute and unmute with javascript

javascript

jquery

opentok

tokbox