如何实现多组独立播放/暂停按钮对应不同音频？

问题根源 #

你代码里的核心问题有两个：

• 重复使用同一ID：HTML中ID必须是唯一标识，document.getElementById()只会返回页面中第一个匹配该ID的元素，所以所有按钮实际都在控制第一组音频。
• 重复定义函数：你写了两套playAudio和pauseAudio函数，后面的函数会覆盖前面的，但即使不覆盖，函数逻辑还是只绑定第一个音频元素。

修正后的代码（基础版） #

<style>
.button { 
  padding: 20px;
  display: inline-block;
  width:100px;
  background-image:url('https://media.discordapp.net/attachments/468801481429090344/1072573795275128935/1133px-Th06backcover.jpg?width=755&height=600'); 
  border: 1px solid #8b00c9;
  color: #da3a0e;
  border-radius: 10px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'arcadeclassic'
}
</style>

<!-- 第一组音频与按钮 -->
<audio id="audio1">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/ogg">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio('audio1')" class="button"><bold>PLAY!</bold></button>
<button onclick="pauseAudio('audio1')" class="button"><bold>NOPE!</bold></button> 

<!-- 第二组音频与按钮 -->
<audio id="audio2">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/ogg">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio('audio2')" class="button"><bold>PLAY!</bold></button>
<button onclick="pauseAudio('audio2')" class="button"><bold>NOPE!</bold></button> 

<script>
function playAudio(audioId) { 
  document.getElementById(audioId).play(); 
} 

function pauseAudio(audioId) { 
  document.getElementById(audioId).pause(); 
} 
</script>

关键改动说明 #

1. 给每个<audio>元素设置唯一ID（如audio1、audio2），彻底解决ID冲突问题。
2. 将播放/暂停函数修改为接收音频ID参数，通过参数定位到对应音频元素执行操作。
3. 每组按钮的onclick事件调用函数时，传入对应音频的ID，确保按钮与音频一一绑定。
4. 移除重复的<script>标签，只保留一套函数定义即可。

更优雅的扩展方案（无需ID） #

如果以后要新增更多音频组，推荐用DOM结构关联的方式，不用手动写ID和传参：

<style>
.button { 
  padding: 20px;
  display: inline-block;
  width:100px;
  background-image:url('https://media.discordapp.net/attachments/468801481429090344/1072573795275128935/1133px-Th06backcover.jpg?width=755&height=600'); 
  border: 1px solid #8b00c9;
  color: #da3a0e;
  border-radius: 10px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'arcadeclassic'
}
</style>

<!-- 第一组 -->
<div class="audio-group">
  <audio>
    <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/mpeg">
  </audio>
  <button class="play-btn button"><bold>PLAY!</bold></button>
  <button class="pause-btn button"><bold>NOPE!</bold></button>
</div>

<!-- 第二组 -->
<div class="audio-group">
  <audio>
    <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/mpeg">
  </audio>
  <button class="play-btn button"><bold>PLAY!</bold></button>
  <button class="pause-btn button"><bold>NOPE!</bold></button>
</div>

<script>
// 绑定所有播放按钮
document.querySelectorAll('.play-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.parentElement.querySelector('audio').play();
  });
});

// 绑定所有暂停按钮
document.querySelectorAll('.pause-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.parentElement.querySelector('audio').pause();
  });
});
</script>

这种方式通过父容器.audio-group关联按钮和音频，新增组时直接复制<div class="audio-group">结构即可，不用修改JS代码，扩展性更强。

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