如何在HTML页面实现全局静音按钮控制所有audio元素静音/取消静音

要实现同时控制现有音频、后续新增音频的统一静音效果，需要覆盖已有音频批量切换和新增音频自动同步静音状态两个场景，具体实现如下：

1. HTML 按钮定义 #

首先在页面合适位置插入全局静音切换按钮：

<button id="globalMuteBtn">开启全局静音</button>

2. 完整JS实现代码 #

// 全局静音状态标记
let isGlobalMuted = false;
const muteBtn = document.getElementById('globalMuteBtn');

// 批量切换所有已有音频的静音状态
function toggleAllAudioMute() {
  const allAudios = document.querySelectorAll('audio');
  allAudios.forEach(audio => {
    audio.muted = isGlobalMuted;
  });
}

// 监听DOM新增节点，自动设置新插入音频的静音状态
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 处理直接新增的audio标签
      if (node.tagName === 'AUDIO') {
        node.muted = isGlobalMuted;
      }
      // 处理父节点新增时内部包含的audio标签
      if (node.querySelectorAll) {
        const innerAudios = node.querySelectorAll('audio');
        innerAudios.forEach(audio => {
          audio.muted = isGlobalMuted;
        });
      }
    });
  });
});

// 启动全局DOM监听，覆盖所有层级的节点新增操作
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// 绑定按钮点击切换逻辑
muteBtn.addEventListener('click', () => {
  isGlobalMuted = !isGlobalMuted;
  muteBtn.textContent = isGlobalMuted ? '关闭全局静音' : '开启全局静音';
  toggleAllAudioMute();
});

3. 适配说明 #

• 无需修改你当前使用的audio标签结构，代码会自动匹配页面内所有audio元素
• 全局静音状态开启后，无论通过什么方式新增的audio元素，都会自动被设置为静音，无需额外处理
• 点击按钮切换静音状态时，所有正在播放的音频会立刻同步静音/取消静音状态

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