按钮点击/键盘触发互斥背景高亮及音频播放实现与多按钮优化

核心优化点 #

• 所有按钮、音频、快捷键的对应关系通过DOM自定义属性维护，后续扩展到20+按钮仅需新增HTML元素，无需修改JS逻辑
• 点击/键盘触发共用同一套逻辑，避免按钮高亮状态和音频播放状态不同步
• 移除冗余的重复函数、重复事件监听，代码量大幅压缩，易维护

完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 新增按钮仅需修改data-audio（对应audio标签ID）、data-keycode（对应触发快捷键keyCode）、按钮文本即可 -->
<button class="play-btn" data-audio="1" data-keycode="90">1 PLAY / STOP</button>
<button class="play-btn" data-audio="2" data-keycode="88">2 PLAY / STOP</button>

<audio id="1" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>
<audio id="2" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

CSS #

.play-btn {
  padding: 20px 30px;
}
.colors {
  background-color: green;
}

JS #

let nowPlaying = null;
let activeBtn = null;

$(document).ready(function(){
  // 统一绑定所有按钮点击事件
  $('.play-btn').on('click', function() {
    const currentBtn = $(this);
    const targetAudio = document.getElementById(currentBtn.data('audio'));

    // 点击当前激活的按钮：暂停播放、取消高亮
    if (currentBtn.is(activeBtn)) {
      currentBtn.removeClass('colors');
      nowPlaying.pause();
      nowPlaying.currentTime = 0;
      nowPlaying = null;
      activeBtn = null;
      return;
    }

    // 点击其他按钮：先停掉之前的播放、取消之前的高亮
    if (activeBtn) {
      activeBtn.removeClass('colors');
      nowPlaying.pause();
      nowPlaying.currentTime = 0;
    }

    // 激活当前按钮、播放对应音频
    currentBtn.addClass('colors');
    targetAudio.loop = true;
    targetAudio.play();
    nowPlaying = targetAudio;
    activeBtn = currentBtn;
  });

  // 统一处理键盘事件
  $(document).on('keydown', function(e) {
    // 匹配对应快捷键的按钮，触发点击事件
    const targetBtn = $(`.play-btn[data-keycode="${e.keyCode}"]`);
    if (targetBtn.length) {
      targetBtn.trigger('click');
    }
  });
});

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