如何创建带4个Google Drive音频播放按钮的HTML页面 支持单音频独占播放

完整修改后代码 #

<div class="test">
  <ul>
    <li>
      <p>Click here</p>
      <img src="media/play.png" class="audio-icon" data-index="0">
    </li>
    <li>
      <p>Click here</p>
      <img src="media/play.png" class="audio-icon" data-index="1">
    </li>
    <li>
      <p>Click here</p>
      <img src="media/play.png" class="audio-icon" data-index="2">
    </li>
    <li>
      <p>Click here</p>
      <img src="media/play.png" class="audio-icon" data-index="3">
    </li>
  </ul>
</div>
<!-- 四个音频对应四个按钮，替换后面三个的src为你自己的Google Drive音频直链 -->
<audio class="audio-player">
  <source src="https://drive.google.com/u/0/uc?id=1HqQ6zRurKoFRHBak1gmwsPG9Z6P8qF2G&export=download" type="audio/mp3">
</audio>
<audio class="audio-player">
  <source src="你的第二个音频Google Drive直链" type="audio/mp3">
</audio>
<audio class="audio-player">
  <source src="你的第三个音频Google Drive直链" type="audio/mp3">
</audio>
<audio class="audio-player">
  <source src="你的第四个音频Google Drive直链" type="audio/mp3">
</audio>

<script>
  // 获取所有音频和图标
  const audios = document.querySelectorAll('.audio-player');
  const icons = document.querySelectorAll('.audio-icon');

  // 暂停所有音频、重置所有图标为播放状态的公共方法
  function pauseAllAudios() {
    audios.forEach(audio => {
      audio.pause();
    });
    icons.forEach(icon => {
      icon.src = "media/play.png";
    });
  }

  // 给每个图标绑定点击事件
  icons.forEach((icon, index) => {
    icon.onclick = function() {
      const currentAudio = audios[index];
      // 如果当前点击的音频是暂停状态
      if (currentAudio.paused) {
        // 先暂停所有其他音频
        pauseAllAudios();
        // 播放当前音频，修改当前图标为暂停
        currentAudio.play();
        icon.src = "media/pause.png";
      } else {
        // 如果当前音频正在播放，直接暂停
        currentAudio.pause();
        icon.src = "media/play.png";
      }
    }
  });
</script>

实现说明 #

• 用类名统一获取所有音频和图标元素，不用单独给每个元素定义ID，减少冗余代码
• 每次点击播放新音频前先调用pauseAllAudios方法暂停所有正在播放的音频，保证同一时间只有一个音频播放
• 点击正在播放的音频对应的按钮，可以直接暂停该音频
• 你只需要把剩下三个<audio>标签里的src属性替换为你自己另外三个存储在Google Drive的音频直链即可正常使用

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