如何根据当前可视的div播放不同音频？

核心思路是基于元素的视口可见性触发音频切换，而非固定像素高度区间，这样就能完美适配响应式布局。以下是两种可靠的实现方式：

1. 使用Intersection Observer API（推荐） #

这是现代浏览器原生支持的API，专门用于监听元素是否进入/离开视口，性能远优于scroll事件监听，不用手动计算位置。

实现步骤： #

• 给每个需要关联音频的div添加标识（比如data-audio-src属性存储音频地址）
• 创建Intersection Observer实例，设置触发阈值（比如元素50%进入视口时触发）
• 监听目标div，在回调中处理音频切换：当元素进入视口时，暂停当前播放的音频，加载并播放对应音频；当元素离开视口时，可选择暂停或切换到其他可见元素的音频

代码示例： #

// 全局存储当前播放的音频实例
let currentAudio = null;

// 创建Observer实例
const observerOptions = {
  root: null, // 使用视口作为根容器
  rootMargin: '0px',
  threshold: 0.5 // 元素50%可见时触发
};

const audioObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 获取当前元素对应的音频地址
      const audioSrc = entry.target.dataset.audioSrc;
      // 切换音频
      if (currentAudio) {
        currentAudio.pause();
      }
      currentAudio = new Audio(audioSrc);
      currentAudio.play().catch(err => {
        // 处理自动播放被浏览器阻止的情况，提示用户交互
        console.log('请先点击页面任意位置以允许音频播放');
      });
    } else {
      // 元素离开视口时，判断是否有其他可见元素的音频需要播放
      const visibleEntries = entries.filter(e => e.isIntersecting);
      if (visibleEntries.length === 0 && currentAudio) {
        currentAudio.pause();
      }
    }
  });
}, observerOptions);

// 监听所有带data-audio-src属性的div
document.querySelectorAll('div[data-audio-src]').forEach(el => {
  audioObserver.observe(el);
});

2. 基于scroll事件+getBoundingClientRect()（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的旧浏览器，可以用这个方案，但要注意添加节流函数避免频繁触发。

实现步骤： #

• 监听window的scroll事件，用节流函数控制触发频率
• 对每个目标div，调用getBoundingClientRect()获取其相对于视口的位置，判断是否在视口内
• 根据可见状态切换音频

代码示例： #

let currentAudio = null;
const throttleDelay = 100; // 节流间隔，单位ms
let lastScrollTime = 0;

function checkVisibleElements() {
  const viewportHeight = window.innerHeight;
  document.querySelectorAll('div[data-audio-src]').forEach(el => {
    const rect = el.getBoundingClientRect();
    // 判断元素是否在视口内（这里取元素至少1px可见）
    const isVisible = rect.top < viewportHeight && rect.bottom > 0;
    if (isVisible) {
      const audioSrc = el.dataset.audioSrc;
      if (!currentAudio || currentAudio.src !== audioSrc) {
        if (currentAudio) currentAudio.pause();
        currentAudio = new Audio(audioSrc);
        currentAudio.play().catch(err => {
          console.log('请先点击页面任意位置以允许音频播放');
        });
      }
    }
  });
}

// 节流函数
function throttle(func, delay) {
  return function() {
    const now = Date.now();
    if (now - lastScrollTime >= delay) {
      func();
      lastScrollTime = now;
    }
  };
}

// 绑定节流后的scroll事件
window.addEventListener('scroll', throttle(checkVisibleElements, throttleDelay));
// 页面加载时先检查一次
checkVisibleElements();

额外优化建议 #

• 音频预加载：提前创建Audio实例并设置preload="auto"，避免切换时的加载延迟
• 多元素可见处理：如果视口同时显示多个div，可以设置优先级（比如给div加data-audio-priority属性），优先播放优先级高的音频；或者选择可见面积最大的元素对应的音频
• 自动播放限制：现代浏览器禁止未经过用户交互的自动播放，所以需要在页面添加提示，引导用户点击页面后再初始化音频播放逻辑

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