是否可以使用 javascript 将整个网页静音？

Question

我有一个网页，上面有一个连续的（ish）直播，但我希望用户只能在特定的准确时间看到和听到它。我不希望他们必须不断断开和重新连接，因为这需要不可预测的时间。

当用户加载页面时，直播将自动启动（静音和隐藏 - 见下文），用户必须取消视频静音（即使他们还看不到它），但我不希望他们直到分配的时间才能真正听到直播。我不希望他们必须在分配的时间手动取消视频静音 - 我的目标是让每个人都保持连接并保持稳定，以便（例如）在 10:04:30 准确地每个人都可以看到和听到直播 30 秒，然后它会消失（并静音），直到下一次（比如说）10:07:15 等等。该过程的发生方式应允许用户在初始页面加载和直播取消静音后坐在扶手椅上，而不必使用鼠标或键盘。

处理视频方面很容易 - 我可以显示/隐藏覆盖视频的黑色背景的 div，但我不确定如何处理音频方面。是否可以将整个网页静音/取消静音？还有其他方法可以实现这一目标吗？

另一种可能的观点是通过让发布者连接并开始发布，但在合适的时间发送空白视频/音频，然后切换正在发送的内容，以某种方式在源头完成此操作。同样，这需要在发布者无需继续重新连接或手动执行任何操作的情况下完成。

发布者和查看者都在使用 WebRTC 进行连接。

Answer 1

假设如下：

<video id="vid" ...></video>
<div id="controls" ...>
  <button id="mute-btn">Mute</button>
</div>

那么你需要这样的东西：

const vid = document.querySelector('#vid')
const muteBtn = document.querySelector('#mute-btn')

vid.muted = true

window.userHasUnmuted = false
window.liveStreamStarted = false

muteBtn.addEventListener('click', () => {
  window.userHasUnmuted = true

  if (window.liveStreamStarted) {
    vid.muted = false
  }
}

// then, in callback for whenever live-stream starts...

if (window.userHasUnmuted) {
  vid.muted = false
}

---

原答案如下

静音单个 audio 或 video 元素：

audioOrVideoElement.muted = true

静音所有页面上的audio或video元素：

document.querySelectorAll('audio, video').forEach(el => el.muted = true)

相反，将muted 设置为false 会重新启用该元素的声音。

对于微调的音频控件，您还可以设置元素的volume（在0..1范围内），例如：

document.querySelectorAll('audio, video').forEach(el => el.volume = 0.3)