为PeerJS应用添加按键通话式静音按钮的技术实现求助

我来帮你搞定这个按键通话（Push to Talk）的静音功能，你的核心需求是让每个通话的peer能独立控制自己的麦克风静音状态，咱们一步步来修改代码：

第一步：在页面中添加静音按钮（修改index.ejs） #

首先把你的静音按钮正确添加到HTML里，替换掉你之前尝试的错误input标签，比如放在显示区域下方：

<body>
  <div class="wrapper">
    <div id="display"></div>
    <!-- 新增静音按钮，给它一个明确的ID和初始文本 -->
    <button id="muteBtn" style="margin-top:10px;padding:8px 16px;">🔊 取消静音</button>
  </div>
  <footer>
    <div class="wrapper">
      <a href="/new"> ~~~~~Start another call~~~~~~~</a>
    </div>
  </footer>
  <!-- 保留原有的script标签 -->
  <script type="text/javascript">
    window.API_KEY = "<%= apiKey %>";
    window.call = <%- JSON.stringify(call, null, 2) %>;
  </script>
</body>

第二步：实现静音逻辑（修改App.js） #

你的核心问题是之前的代码存在语法错误和变量引用错误，咱们直接在已有的代码基础上添加正确的静音控制逻辑：

1. 首先添加一个初始化静音按钮事件的函数：

function setupMuteButton() {
  const muteBtn = document.getElementById('muteBtn');
  // 如果按钮不存在就直接返回，避免报错
  if (!muteBtn) return;

  muteBtn.addEventListener('click', function() {
    // 从本地流中获取音频轨道（因为我们只请求了音频，所以数组里只有一个元素）
    const audioTrack = myStream.getAudioTracks()[0];
    if (!audioTrack) {
      display('无法访问麦克风轨道');
      return;
    }

    // 切换音频轨道的启用状态：true是取消静音，false是静音
    audioTrack.enabled = !audioTrack.enabled;

    // 更新按钮的文本和图标，让用户直观看到状态
    this.textContent = audioTrack.enabled ? '🔊 取消静音' : '🔇 静音';
  });
}

2. 然后在获取本地麦克风成功的回调里调用这个函数，确保流已经存在后再绑定事件：
   找到getLocalAudioStream里的success函数，修改成这样：

function success(audioStream) {
  display('Microphone is open.');
  myStream = audioStream;
  // 初始化静音按钮
  setupMuteButton();
  if (cb) cb(null, myStream);
}

为什么你之前的代码没成功？ #

• 语法错误：mediaStream.use getAudioTracks()()[0].enabled 这行完全写错了，正确的写法是myStream.getAudioTracks()[0].enabled
• 逻辑混乱：你既在HTML里写了一个input按钮，又在JS里动态创建button，导致事件绑定到了不存在的元素上
• 变量未正确引用：你用了mediaStream但实际存储本地流的变量是myStream

进阶：实现真正的按键通话（按住说话，松开静音） #

如果想要更贴合"Push to Talk"的体验，可以添加空格键按住说话的功能，在App.js末尾加上这段代码：

// 按住空格键取消静音，松开静音
document.addEventListener('keydown', function(e) {
  // 避免按住空格时重复触发
  if (e.code === 'Space' && !e.repeat) {
    const audioTrack = myStream?.getAudioTracks()[0];
    if (audioTrack) {
      audioTrack.enabled = true;
      const muteBtn = document.getElementById('muteBtn');
      if (muteBtn) muteBtn.textContent = '🔊 正在说话（松开空格静音）';
    }
  }
});

document.addEventListener('keyup', function(e) {
  if (e.code === 'Space') {
    const audioTrack = myStream?.getAudioTracks()[0];
    if (audioTrack) {
      audioTrack.enabled = false;
      const muteBtn = document.getElementById('muteBtn');
      if (muteBtn) muteBtn.textContent = '🔇 静音（按住空格说话）';
    }
  }
});

这样每个peer都能独立控制自己的麦克风状态，完全符合你的需求～

内容的提问来源于stack exchange，提问作者August Dev