网页多音频与图片关联控制优化咨询：实现暂停及控件显示

嘿，作为Web开发新手能写出这样的代码已经超棒啦！咱们来一步步实现你想要的两个功能，直接上修改后的代码和详细解释：

第一步：实现同一图片点击暂停功能 #

原来的代码里点击图片只会触发播放，我们需要一个自定义函数来判断音频当前状态——如果正在播放就暂停，否则先停止其他音频再播放当前的。这样还能把“停止其他音频”的逻辑整合到一起，不用依赖play事件监听啦。

第二步：显示音频控件 #

有两种简单的方式：要么直接让浏览器默认控件显示，要么点击图片时切换控件的显示状态，我都给你写出来～

完整修改后的代码 #

<body>
  <!-- 给audio标签加上controls属性，默认显示控件；如果想默认隐藏，就去掉controls加CSS -->
  <audio id='spokes' controls>
    <source src="tunes/Spokes.mp3" type="audio/mpeg" />
    <source src="tunes/Spokes.ogg" type="audio/ogg" />
  </audio>
  <audio id='raptor' controls>
    <source src="tunes/raptor.mp3" type="audio/mpeg" />
    <source src="tunes/raptor.ogg" type="audio/ogg" /> <!-- 这里你原来写的type是audio/mpeg，应该改成audio/ogg哦 -->
  </audio>

  <section>
    <!-- 调用自定义的playPauseAudio函数，传入对应音频的ID -->
    <img class="trigger" src="img/spokes.png" onclick="playPauseAudio('spokes')" />
    <p>Spokes</p>
  </section>
  <section>
    <img class="trigger" src="img/raptor.png" onclick="playPauseAudio('raptor')" />
    <p>Raptor</p>
  </section>

  <style>
    /* 如果想让控件默认隐藏，点击图片再显示，就加上这段CSS */
    /*
    audio {
      display: none;
      margin-top: 10px;
    }
    audio.show {
      display: block;
    }
    */
  </style>

  <script type="text/javascript">
    function playPauseAudio(audioId) {
      const currentAudio = document.getElementById(audioId);
      
      // 判断当前音频是否处于暂停状态
      if (currentAudio.paused) {
        // 暂停所有其他音频并重置播放位置
        const allAudios = document.getElementsByTagName('audio');
        for (let audio of allAudios) {
          if (audio !== currentAudio) {
            audio.pause();
            audio.currentTime = 0;
          }
        }
        // 播放当前音频
        currentAudio.play();
        // 如果用了上面的隐藏控件CSS，就添加show类显示控件
        // currentAudio.classList.add('show');
      } else {
        // 暂停当前音频
        currentAudio.pause();
        // 如果用了隐藏控件CSS，也可以选择移除show类隐藏控件
        // currentAudio.classList.remove('show');
      }
    }
  </script>
</body>

关键改动说明 #

1. 自定义playPauseAudio函数：

   • 通过音频ID获取元素，判断paused属性来决定是播放还是暂停
   • 播放前自动暂停所有其他音频并重置到开头，替代了原来的play事件监听逻辑，更直观可控

2. 音频控件处理：

   • 直接给<audio>标签加controls属性，浏览器会自动渲染播放/暂停、进度条等默认控件
   • 如果想要默认隐藏控件，点击图片再显示，就打开代码里注释的CSS和JS部分，用classList.add/remove切换显示状态

3. 小修复：你原来的raptor音频的ogg源type写错啦，改成了audio/ogg，避免浏览器识别错误

这样修改后，点击图片就能实现：

• 第一次点击：停止其他音频，播放当前音频（显示控件如果设置了的话）
• 再次点击：暂停当前音频

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