如何用JS的forEach/for循环批量播放音频，遵循DRY原则

问题根源 #

你之前的代码里多个<audio>用了相同的id="audio"，而DOM中ID是唯一标识，document.getElementById('audio')只会返回第一个匹配的元素，所以点击任何按钮都会播放第一个音频。

优化方案 #

方案1：唯一ID + 事件委托（推荐，支持动态元素） #

先修改HTML，给每个音频按钮和对应的<audio>元素做唯一关联：

<!-- 音频触发按钮：用data属性绑定对应音频的ID -->
<button class="audio-trigger" data-target-audio="audio-play">播放Play音频</button>
<button class="audio-trigger" data-target-audio="audio-give">播放Give音频</button>
<button class="audio-trigger" data-target-audio="audio-deny">播放Deny音频</button>
<button class="audio-trigger" data-target-audio="audio-custom-1">自定义音频1</button>
<button class="audio-trigger" data-target-audio="audio-custom-2">自定义音频2</button>

<!-- 音频元素：每个用唯一ID -->
<audio id="audio-play" src="path/to/play.mp3"></audio>
<audio id="audio-give" src="path/to/give.mp3"></audio>
<audio id="audio-deny" src="path/to/deny.mp3"></audio>
<audio id="audio-custom-1" src="path/to/custom1.mp3"></audio>
<audio id="audio-custom-2" src="path/to/custom2.mp3"></audio>

然后用事件委托批量处理所有按钮的点击事件，只写一次逻辑：

// 给文档绑定点击事件，处理所有音频触发按钮
document.addEventListener('click', function(e) {
  // 判断点击的元素是音频按钮
  if (!e.target.classList.contains('audio-trigger')) return;

  const audioId = e.target.dataset.targetAudio;
  const audioEl = document.getElementById(audioId);
  
  if (!audioEl) return;

  // 重置音频到开头（支持重复点击立即播放）
  audioEl.currentTime = 0;
  // 播放音频，捕获可能的错误（比如浏览器自动播放限制）
  audioEl.play().catch(err => console.error('音频播放失败:', err));
});

方案2：动态创建音频（更简洁，无需提前写<audio>元素） #

如果不想在HTML里写一堆<audio>，可以直接把音频地址存在按钮的data属性中，点击时动态创建音频对象播放：

<button class="audio-trigger" data-audio-src="path/to/play.mp3">播放Play音频</button>
<button class="audio-trigger" data-audio-src="path/to/give.mp3">播放Give音频</button>
<button class="audio-trigger" data-audio-src="path/to/deny.mp3">播放Deny音频</button>
<button class="audio-trigger" data-audio-src="path/to/custom1.mp3">自定义音频1</button>

JS逻辑：

document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('audio-trigger')) return;

  const audioSrc = e.target.dataset.audioSrc;
  // 动态创建音频实例并播放
  const audio = new Audio(audioSrc);
  audio.play().catch(err => console.error('音频播放失败:', err));
});

为什么这符合DRY原则 #

不管你有20个还是更多音频，只需要写一次播放逻辑，新增音频时只需要在HTML里加一个按钮（带对应的data属性），不用再写重复的play()、deny()之类的函数。

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