如何为网页中自动播放的音频添加静音/取消静音按钮？

你现有的<audio>标签代码无需修改，按以下步骤新增代码即可实现功能：

1. 添加按钮HTML #

在你需要展示静音按钮的页面位置插入如下代码，也可以通过CSS固定到页面角落方便用户点击：

<button id="muteBtn">静音</button>

2. 添加交互逻辑 #

在页面的<script>标签中插入以下JS代码：

// 获取对应DOM元素
const audioEl = document.getElementById('sound');
const muteBtn = document.getElementById('muteBtn');

// 绑定点击切换事件
muteBtn.addEventListener('click', function() {
  // 切换音频静音状态
  audioEl.muted = !audioEl.muted;
  // 同步更新按钮文字
  muteBtn.innerText = audioEl.muted ? '取消静音' : '静音';
});

可选：按钮样式优化 #

如果需要把按钮固定在页面右上角不随滚动位移，可以添加如下CSS：

#muteBtn {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 999;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

注意事项 #

目前主流浏览器都限制了非静音状态的音频自动播放，如果你发现页面打开后音频没有自动播放，可以先给你的<audio>标签添加muted属性默认静音加载，用户点击一次按钮后就可以正常播放音频。

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