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

Question

我有一个网页，上面有一个连续的(差不多)直播，但我希望用户只能在特定的、准确的时间看到和听到它。我不希望他们不得不不断断开连接并重新连接，因为这需要花费不可预测的时间。

当用户加载页面时，直播将自动启动(静音和隐藏 - 见下文)并且用户将不得不取消静音视频(即使他们还看不到它)，但我不想要它们在分配的时间之前实际收听直播。我不希望他们必须在分配的时间手动取消视频静音 - 我的目标是让每个人都保持连接和稳定，以便(例如)在 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 会重新启用该元素的声音。

对于更精细的音频控制，您还可以设置元素的音量(在0..1 范围内)，例如:

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