滚动触发声效本质是用户交互授权后调用play()，需监听scroll/click/keydown任一事件标记已交互，再结合IntersectionObserver检测元素入视口，且必须加.catch()捕获错误并提供多格式音频源。
滚动时插入音频，本质不是“插入”，而是“在滚动触发时机调用 play()”。直接写 autoplay 无效，现代浏览器会拦截；靠 或
为什么滚动到位置后 audio.play() 报错 “DOMException: play() failed because the user didn't interact with the document first”
这不是代码 bug，是浏览器策略强制要求：首次播放音频必须由用户手势（click/touchstart/scroll）明确授权。而页面刚加载完时的 scroll 事件，在部分 Chrome/Firefox 版本中**不被视为有效交互**，尤其当用户尚未主动滚动过（比如靠滚轮惯性滑动不算）。
- ✅ 可靠做法：监听
scroll、click、keydown三类事件，任一发生即标记hasInteracted = true，后续再触发播放 - ⚠️ 常见陷阱：只监听
scroll，但用户首次行为是点击导航栏，此时scroll回调还没执行，play()仍被拒 - ? 补救方案：加
muted="true"后首次调用play()，成功后再设muted = false—— iOS Safari 尤其吃这一套
怎么判断用户已滚动到指定区域再播放
别用 getBoundingClientRect() + scroll 节流手动计算，性能差还易出错。用 IntersectionObserver 是标准解法，它原生支持异步、节流、精准判定元素是否进入视口。
- 设置
threshold: 0.1表示目标元素 10% 进入视口就触发，比0更灵敏 - 必须确保
hasInteracted === true才调play()，否则 observer 触发了也白搭 -
audio.play().catch(e => console.warn('播放被拒:', e.message))必须加.catch()，否则错误静默丢失，调试无从下手
标签结构看着简单，但路径、格式、属性组合错一个，音频就“消失”得无声无息。
-
src必须是相对路径（如"./audio/theme.mp3"）或绝对 URL；file://协议下必失败，本地双击 HTML 文件时需起简易服务器（python -m http.server） - 务必提供至少两个
-
controls属性不能省——哪怕你打算用 JS 控制，先加上它能快速验证文件路径和格式是否真通 - 加
preload="metadata"，避免首次play()因元数据未加载而失败
最麻烦的从来不是“怎么写”，而是“为什么写了却没声”。滚动触发声效的关键不在时机判断多精巧，而在是否真正绕过了浏览器那层看不见的播放权限墙——它要求你既响应用户行为，又尊重格式兼容，还得给加载留出余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
