基于Intersection Observer实现页面分区域播放不同音频的问题

问题概述 #

尝试通过Intersection Observer实现页面滚动时，自动播放/暂停对应视图区域内的音频，但当前代码无法正常触发音频的暂停与播放逻辑。

原代码的核心问题 #

1. 重复ID导致监听不完整：HTML中存在两个id="testme"的元素，document.querySelector('#testme')仅能选中第一个元素，第二个音频所在区域未被监听。
2. 音频与区域未关联：代码只获取了页面中第一个<audio>元素，无法对应到每个监听区域的音频。
3. 视口判断逻辑不可靠：依赖intersectionRatio != .5判断元素是否离开视口，不如entry.isIntersecting直观准确，且阈值设置与逻辑匹配性差。
4. 全局状态变量干扰：单个isPaused变量无法处理多个音频的独立状态，导致多音频场景下逻辑混乱。

修复后的完整代码 #

HTML部分 #

<!-- 兼容性提示 -->
<strong id="warning" hidden>你的浏览器不支持IntersectionObserver，无法体验该功能。</strong>
<noscript>⚠️ 你的浏览器已禁用JavaScript！</noscript>

<div style="height:600px">
  <h1>点击视频以触发网站自动播放音频权限，之后滚动页面，对应区域的音频会根据是否在视口中自动播放/暂停</h1>
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls="" height="200px"></video>
</div>
<br><br><br>
<hr>

<!-- 音频区域：统一使用类标识，避免重复ID -->
<div class="audio-section" style="height:600px; background-color:#CCC">
  <audio controls loop src="https://truefa-znfmrrlhm9.live-website.com/wp-content/uploads/2022/12/random_music.mp3" height="10"></audio>
</div>

<hr>
<div class="audio-section" style="height:600px;">
  <audio controls loop src="https://truefa-znfmrrlhm9.live-website.com/wp-content/uploads/2022/12/random_muisc2.mp3"></audio>
</div>

JavaScript部分 #

if (!!window.IntersectionObserver) {
  // 获取所有需要监听的音频区域
  const audioSections = document.querySelectorAll('.audio-section');

  audioSections.forEach(section => {
    // 关联当前区域内的音频元素
    const targetAudio = section.querySelector('audio');
    // 每个音频独立记录是否由Observer触发暂停
    let pausedByObserver = false;

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 元素进入视口：如果是Observer暂停的音频，恢复播放
          if (targetAudio.paused && pausedByObserver) {
            targetAudio.play().catch(err => {
              console.error('音频播放失败：', err);
            });
            pausedByObserver = false;
          }
        } else {
          // 元素离开视口：暂停音频并标记状态
          if (!targetAudio.paused) {
            targetAudio.pause();
            pausedByObserver = true;
          }
        }
      });
    }, {
      threshold: 0.1 // 当元素10%进入视口时触发回调
    });

    observer.observe(section);
  });
} else {
  document.querySelector('#warning').style.display = 'block';
}

修复说明 #

• 统一区域标识：用audio-section类替代重复ID，确保所有音频区域都能被选中监听。
• 一对一绑定：遍历每个区域时，获取区域内的音频元素，实现区域与音频的对应关联。
• 可靠的视口检测：使用entry.isIntersecting判断元素是否在视口中，逻辑更清晰准确。
• 独立状态管理：每个音频使用专属的pausedByObserver变量，避免多音频状态互相干扰。
• 错误处理：添加play()方法的错误捕获，处理浏览器自动播放限制的异常情况。
• 优化阈值：设置threshold: 0.1让音频在元素刚进入视口时就触发播放，提升交互流畅度。

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