如何将音乐即兴网站中多段JavaScript播放逻辑改为全局函数？

嗨，我来帮你搞定这个代码冗余的问题！针对你有超100个节奏的场景，把重复的播放逻辑改成全局函数完全可行，而且能让代码清爽很多，甚至还能为后续的播放/暂停切换打下基础。下面是具体的改造步骤：

先把每个节奏按钮的onclick都改成调用同一个全局函数，比如playRhythm(this)。这里的this会把当前点击的按钮元素传给函数，这样我们就不用硬编码每个音频的ID了：

<div class="RM_rhythm">
 <audio preload='none'>
 <source src='../audio/2.1.mp3' type='audio/mpeg' /><source src='../audio/2.1.ogg' type='audio/ogg' /></audio>
 <button onclick="playRhythm(this)"><i class="fas fa-play"></i></button>
 <a href="#" class="button">2-1</a>
 <img src="../images/RM-2.1.png" width="172" height="60" alt="2-1">
</div>
<!-- 所有其他.RM_rhythm容器里的按钮都改成这个格式，不用再写不同的getElementById了 -->

这个函数的核心思路是：通过点击的按钮，找到它所在的.RM_rhythm容器，再从容器里找到对应的音频元素，最后调用播放方法。这样不管有多少个节奏，都只用这一个函数就能处理：

function playRhythm(buttonElement) {
  // 找到当前按钮所属的节奏容器
  const rhythmContainer = buttonElement.closest('.RM_rhythm');
  // 从容器里获取对应的audio元素
  const audioElement = rhythmContainer.querySelector('audio');

  // 【可选优化】暂停其他正在播放的音频，避免多个节奏同时发声
  document.querySelectorAll('.RM_rhythm audio').forEach(audio => {
    if (audio !== audioElement) {
      audio.pause();
      audio.currentTime = 0; // 重置音频到开头
    }
  });

  // 播放当前音频，加catch处理可能的播放错误（比如浏览器的交互限制）
  audioElement.play().catch(error => {
    console.error('音频播放失败:', error);
  });
}

这里加了一个可选的逻辑：自动暂停其他音频，这样用户点击新节奏时，不会出现多个音频重叠播放的情况，体验会更好。另外用catch捕获播放错误，避免因为浏览器要求用户交互才能播放音频而出现控制台报错。

如果之后想要实现点击按钮切换播放/暂停的功能，只需要对上面的函数稍作修改即可，不用重新写一套逻辑：

function toggleRhythm(buttonElement) {
  const rhythmContainer = buttonElement.closest('.RM_rhythm');
  const audioElement = rhythmContainer.querySelector('audio');
  const icon = buttonElement.querySelector('i');

  // 暂停其他音频并重置图标
  document.querySelectorAll('.RM_rhythm audio').forEach(audio => {
    if (audio !== audioElement) {
      audio.pause();
      audio.currentTime = 0;
      const otherIcon = audio.closest('.RM_rhythm').querySelector('i');
      otherIcon.classList.remove('fa-pause');
      otherIcon.classList.add('fa-play');
    }
  });

  // 判断当前音频状态，切换播放/暂停
  if (audioElement.paused) {
    audioElement.play().catch(error => console.error('播放失败:', error));
    icon.classList.remove('fa-play');
    icon.classList.add('fa-pause');
  } else {
    audioElement.pause();
    audioElement.currentTime = 0;
    icon.classList.remove('fa-pause');
    icon.classList.add('fa-play');
  }
}

然后把按钮的onclick改成toggleRhythm(this)，就能实现点击切换播放/暂停，同时图标也会跟着变化。

现在的全局函数已经完全不依赖audio的ID了，如果你的其他代码（比如填充图片的脚本）也能通过DOM遍历获取信息，甚至可以把audio标签的id属性去掉，进一步简化代码。

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