用IntersectionObserver监听元素进入视口自动播放音频最可靠，需设audio为muted并配合用户交互解锁；手动scroll监听易受抖动、性能及静音策略影响。
滚动到某个位置时自动播放音频，用 IntersectionObserver 最可靠
直接监听 window.onscroll 或 getBoundingClientRect() 判断位置再播放，容易因滚动抖动、性能差或被浏览器静音策略拦截。现代方案是用 IntersectionObserver 监听元素是否进入视口——它不卡主线程，且触发时机可控，兼容 Chrome 64+/Firefox 55+/Safari 12.1+。
关键点：音频必须设置 muted 才能在无用户交互前提下自动播放（iOS 和新版 Chrome 强制要求），否则会静音或报错 DOMException: play() failed because the user didn't interact with the document first。
- 把
<audio></audio>标签放在你想触发的位置附近，加一个空的<div id="trigger-audio"></div>作为观察目标 - 初始化
IntersectionObserver时设threshold: 0.1（10% 进入即触发），避免滑太快错过 - 在
callback中调用audio.play()，并用.catch(e => console.warn("Audio play failed:", e))捕获静音拦截
<audio id="bg-audio" src="sound.mp3" muted preload="auto"></audio>
<div id="trigger-audio"></div>
<script>
const audio = document.getElementById('bg-audio');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
audio.play().catch(e => console.warn("Play blocked:", e));
observer.unobserve(entry.target); // 触发一次后停止监听
}
});
},
{ threshold: 0.1 }
);
observer.observe(document.getElementById('trigger-audio'));
</script>
不用 muted 就想播？必须先有用户手势（click/touch）解锁音频上下文
这是硬性限制，不是 bug。Chrome、Safari、Edge 均要求页面至少有一次用户主动交互（比如点击按钮、触摸屏幕）后，才能解除对 audio.play() 的静音封锁。单纯滚动不算“用户交互”。
- 如果产品允许，加一个显眼的“开启声音”按钮，点击后调用
audio.play()并存储状态，后续滚动触发时不再需要muted - 也可以在
document.addEventListener('click', unlock, { once: true })里执行一次audio.play().catch(() => {})，仅用于解锁上下文（无需真播放） - 注意：iOS Safari 对
autoplay更严格，即使已解锁，也建议首次播放仍用muted+ 用户操作后取消静音
scroll 事件手动判断位置？慎用，但某些老项目绕不开
如果必须用传统滚动监听（比如要精确到某像素值、或需兼容 IE），得处理三个问题：节流、视口计算、播放抑制。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流，别用setTimeout或throttle库，避免丢帧 - 判断条件写成
window.scrollY + window.innerHeight >= targetElement.offsetTop，比只看scrollY更稳（适配不同屏幕高度） - 播放前先检查
audio.readyState === 4（HAVE_ENOUGH_DATA），否则可能报InvalidStateError - 仍然要加
muted，否则大概率失败
移动端滑屏（尤其是 iOS）常见失败原因
iOS Safari 对音频控制极严：不仅要求 muted，还要求 preload="auto"（不能是 metadata），且音频文件不能太大（建议 ≤ 1MB，否则加载未完成就触发播放会失败）。
- 用
<audio preload="auto" muted playsinline webkit-playsinline></audio>，playsinline防止全屏播放打断体验 - 测试时禁用「低电量模式」——它会强制暂停所有音频
- 真机调试用 Safari 开发者工具看 Console，留意
NotAllowedError或AbortError，不是所有错误都会弹 alert
滚动触发音频的核心矛盾在于：浏览器要防骚扰，你要做体验。折中点永远在 muted + 用户交互解锁 + 合理的观察阈值之间。没交互就硬播，基本等于和浏览器规则对着干。
