必须由用户手势同步触发 Audio 播放，不能在 fetch 回调等异步上下文中直接调用；推荐提前实例化并首次点击时“空播”解锁 iOS 限制，使用 44.1kHz 单声道 MP3 文件。
怎么用 Audio 对象播放购物车添加成功的提示音
直接 new 一个 Audio 实例，调用 play() 即可，但必须满足用户手势触发（如点击“加入购物车”按钮）这一前提，否则多数浏览器会静音或抛出 NotAllowedError。
常见错误是把音频播放写在异步回调（比如 API 返回后）里，却没确保这个操作仍处于用户交互的“信任上下文”中——例如用户点了按钮，但你等了 2 秒再播，Chrome 就大概率拒绝。
- 音频文件建议用
.mp3或.ogg，避免.wav（体积大、加载慢） - 路径推荐放在
/assets/sounds/add-to-cart.mp3这类静态资源目录下，避免动态拼接 URL 出错 - 首次播放失败时，
audio.play()返回 Promise，记得catch并降级处理（比如只弹个 toast）
为什么不能用 new Audio().play() 在 fetch 成功回调里直接调用
因为现代浏览器要求自动播放必须由用户手势（click、touchstart 等）同步触发。一旦进入微任务（then）、宏任务（setTimeout）或网络响应回调，就脱离了该上下文。
解决办法是：在用户点击那一刻就创建并准备音频，但先不 play()；等接口返回成功后再 play() ——此时仍被浏览器视为“可播放”。
- 提前实例化：
const successSound = new Audio('/assets/sounds/add.mp3'); - 在按钮
click回调开头就调一次successSound.load()（可选，加快后续播放） - 在
fetch().then(() => successSound.play().catch(() => {}))中触发播放
如何兼容 iOS Safari 的音频自动播放限制
iOS Safari 要求音频首次播放必须由用户手势直接触发，且不支持 preload="auto" 预加载音频数据（除非用户已与页面交互过）。单纯 load() 不够，得靠一次“空播”来解锁。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在页面初始化后、但用户还没点任何东西前，不要预加载或播放
- 首次交互（如点击加购按钮）时，立即执行一次无声音频的
play()（可用 1ms 静音音频），之后同域所有Audio实例才被允许播放 - 更稳妥的做法：在用户第一次点击按钮时，用
new Audio().play()尝试触发权限，忽略失败；后续再播提示音就大概率成功
要不要用第三方库比如 howler.js
没必要。纯 Audio API 已足够轻量且可控。引入 howler.js 主要解决 Web Audio API 的复杂编排（如混音、滤波），而购物车提示音只是单次短音频播放。
唯一值得考虑的场景是：你需要精确控制音量、暂停/恢复、或同时播多个音效。但对「添加成功」这种单事件提示，原生 Audio 更透明、调试更直接。
- 如果真要用，确保只 import
Howler核心模块，别带WebAudio后备逻辑增加体积 - 注意
howler默认启用html5: true才能绕过 iOS 的部分限制，但底层仍是封装Audio
真正容易被忽略的是音频文件本身的编码参数：采样率建议 44.1kHz，比特率 64–128kbps，单声道（mono）即可 —— 体积小、加载快、兼容性好。放错格式或太大，会导致 play() 延迟甚至静音。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
