Audio构造函数及play()必须在用户手势事件中同步调用，iOS Safari更严格；MP3应压缩至80–120KB并预加载；禁用audio标签controls；注意iOS静音开关与volume设置。
Audio 构造函数必须在用户手势中调用
浏览器（尤其是 Chrome 和 iOS Safari）从 2018 年起就严格限制无用户交互的音频播放。直接在 DOMContentLoaded 或 load 事件里调 new Audio().play()，99% 会失败，并抛出 DOMException: play() failed because the user didn't interact with the document first。
这不是 bug，是策略——防止网页自动弹广告音效。
- 必须把
new Audio()和.play()都放在用户触发的事件回调里，比如click、touchstart、keydown - iOS Safari 更狠：连
setTimeout(() => audio.play(), 0)或Promise.resolve().then(() => audio.play())都会被拒，必须是同步调用 - 不要复用同一个
Audio实例做多次play()而不重置currentTime；否则连续点击可能卡在末尾，无声
推荐写法：
const notifySound = new Audio('notify.mp3');
document.getElementById('submitBtn').addEventListener('click', () => {
notifySound.currentTime = 0;
notifySound.play().catch(e => console.warn('通知音未播:', e));
});MP3 文件大小和加载时机影响首响延迟
new Audio(src) 是懒加载：第一次 .play() 才真正发起网络请求并解码。如果 MP3 是 500KB，首次点击后可能卡顿 300–800ms 才出声，用户会觉得“点完了没反应”。
- 把提示音压缩到
80–120KB以内（采样率 22050Hz、单声道、比特率 64kbps 足够） - 如果页面关键路径依赖提示音（如表单提交成功后立刻播放），建议提前预加载：
- 用
fetch('notify.mp3').then(r => r.arrayBuffer())+audioContext.decodeAudioData()（适合需要精确控制的场景） - 或更轻量：在 DOM 加载后立即
new Audio('notify.mp3')并调.load()（不.play()），让浏览器后台拉取并缓存
- 用
- 注意：不要在
preload="auto"的<audio></audio>标签上干这事——它会阻塞页面解析，且移动端常被忽略
<audio></audio> 标签配 controls 不适合通知音
<audio src="notify.mp3" controls></audio> 看似简单，但实际是反模式：
- 它暴露了播放控件，用户能手动暂停/拖动，违背“通知即瞬时反馈”的语义
- 每次播放需先找 DOM 元素再调 .play()，比直接 new Audio() 多一跳，还容易因 ID 写错或元素未挂载而失败
- 若多个通知音共存（成功/错误/警告），得维护一堆带 ID 的标签，HTML 膨胀、JS 绑定繁琐
- 真正需要“可操作音频”（如背景音乐、语音播报）才用
<audio></audio>标签 - 通知音、按钮音效、表单校验提示音，一律走
Audio构造函数 + 事件绑定
iOS Safari 的静音开关和 WebKit 特性
即使代码完全合规，iOS 用户仍可能听不到声音，原因往往不在前端： - 设备物理静音开关打开（侧边拨杆朝下），WebKit 默认禁用所有 Web 音频输出（Audio 实例 .play() 成功但无声）
- Safari 设置里关闭了“网站可播放声音”，或启用了“低电量模式”（部分机型会降级音频解码）
- 没有显式设置 notifySound.volume = 1，某些旧版 iOS 在非用户手势上下文里会把 volume 锁为 0
- 可加一层兜底检测：
notifySound.oncanplay = () => { if (notifySound.duration === 0) console.warn('音频未加载完成'); } - 不要依赖
ended事件判断是否真播出了——iOS 上它可能在无声状态下也触发
真正难搞的不是怎么写，而是怎么让那 0.3 秒的“叮”声，在 Chrome、Safari、微信内置浏览器、钉钉、飞书 WebView 里都准时、不卡、不静音。多数问题出在第一次加载时机和设备系统层静音策略，而不是 .play() 这一行代码本身。
