如何精简重复的jQuery音频播放/暂停按钮代码避免复制粘贴？

核心思路是通过数据属性关联按钮和对应音频，用事件委托实现通用控制逻辑，新增同类按钮无需修改JS代码。

1. HTML 调整 #

给每个播放按钮新增data-audio-id属性，值为对应音频标签的ID，新增多组时只要保证ID对应即可：

<!-- 第一组音频+按钮 -->
<audio id="audio_01" src="..." type="audio/mp3"></audio>
<div class="play" data-audio-id="audio_01"></div>

<!-- 第二组音频+按钮，新增时直接复制修改ID和资源路径即可 -->
<audio id="audio_02" src="..." type="audio/mp3"></audio>
<div class="play" data-audio-id="audio_02"></div>

2. CSS 优化 #

原有CSS可以直接复用，仅建议补充光标样式提示可点击：

.play {
  position: relative;
  display: inline-table;
  width: 0px;
  height: 15px;
  margin-left: 10px;
  margin-bottom: -3px;
  transition: 100ms;
  border-color: transparent transparent transparent rgba(233, 170, 211, 0.5);
  border-style: solid;
  border-width: 8px 0 8px 12px;
  cursor: pointer; /* 新增：提示元素可点击 */
}

.paused {
  border-style: double;
  border-width: 0px 0 0px 12px;
}

.play:hover {
  border-color: transparent transparent transparent rgba(233, 170, 211, 0.7);
}
.play:active {
  border-color: transparent transparent transparent rgba(233, 170, 211, 0.9);
}

3. JS 重构 #

删除原来的硬编码变量和重复绑定逻辑，改用通用事件委托，直接读取音频自带的paused属性判断播放状态，无需额外定义全局变量：

$(document).ready(function() {
  // 事件委托绑定所有.play按钮的点击事件，后续动态新增的按钮也能生效
  $(document).on('click', '.play', function() {
    // 获取当前按钮关联的音频元素
    const audioId = $(this).data('audio-id');
    const audio = document.getElementById(audioId);
    
    // 控制播放暂停
    if (audio.paused) {
      audio.play();
      $(this).addClass('paused');
    } else {
      audio.pause();
      $(this).removeClass('paused');
    }
    return false;
  })
})

方案优势 #

• 新增音频+按钮组合时，仅需修改HTML的对应ID和资源路径，完全不需要改JS代码
• 没有冗余全局变量，避免变量污染
• 事件仅绑定一次，性能优于逐个按钮绑定，支持动态插入的按钮元素
• 直接使用音频元素原生属性判断播放状态，比自定义变量更准确，不会出现状态不同步的问题

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