AudioContext 默认 suspended 是因浏览器自动播放策略要求用户手势触发才能激活；必须在 click/touchstart 等可信事件处理函数中立即调用 resume()，不可延迟或脱离事件上下文，否则失败。
在现代浏览器中，AudioContext 默认处于“挂起”（suspended）状态，这是为了防止网页在用户未交互前自动播放音频（如广告、背景音乐等），属于浏览器的自动播放策略（Autoplay Policy）。只有在用户明确触发（如点击、触摸）后，才能调用 resume() 激活音频上下文。
为什么 AudioContext 一开始是 suspended？
Chrome、Edge、Firefox 等主流浏览器要求：音频上下文必须在用户手势（user gesture）事件中显式恢复。否则，即使创建了 AudioContext，所有音频节点（如 OscillatorNode、GainNode）都无法发声，currentTime 不推进，state 保持为 "suspended"。
如何正确调用 resume()？
关键是在一次**可信的用户交互事件处理函数内**（如 click、touchstart、keydown 等），立即调用 audioContext.resume()。不能延迟（如放在 setTimeout 或异步回调里），也不能脱离事件上下文。
- ✅ 正确示例（点击按钮激活）：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
document.getElementById('playBtn').addEventListener('click', () => {
audioContext.resume().then(() => {
console.log('AudioContext 已激活，state:', audioContext.state);
// 此处可安全创建并连接音频节点
}).catch(err => {
console.error('激活失败：', err);
});
});
- ❌ 错误示例（延迟调用或无事件上下文）：
// ❌ 错误：在页面加载时直接调用（无用户手势）
audioContext.resume(); // 报错或静默失败
// ❌ 错误：放在 setTimeout 中，已脱离用户事件流
button.addEventListener('click', () => {
setTimeout(() => audioContext.resume(), 100); // 失败！
});
// ❌ 错误：在 fetch 回调中调用（非用户手势）
fetch('/sound.json').then(() => audioContext.resume()); // 失败！
兼容性与降级处理
部分旧版 Safari 或 iOS WebKit 需要额外处理：首次播放需绑定到 touchend 或 click，且建议在 resume() 后立即触发一个极短的无声音频（如 0.001 秒的静音 BufferSource），以“解锁”后续播放能力。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 可选：播放一段无声缓冲区，提升兼容性：
function unlockAudio() {
if (audioContext.state === 'suspended') {
const buffer = audioContext.createBuffer(1, 1, audioContext.sampleRate);
const source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start(0);
}
}
该操作可在 resume().then(unlockAudio) 中执行，对大多数 iOS 设备更稳妥。
检查与调试技巧
实时观察 AudioContext 状态有助于定位问题：
- 打印
audioContext.state（值为"running"、"suspended"或"closed"） - 监听状态变化：
audioContext.onstatechange = () => console.log(audioContext.state); - 在 Chrome DevTools 的 Application → Audio 标签页中查看上下文生命周期
若用户从未触发过任何交互，resume() 将被拒绝（Promise reject），此时应提示用户点击屏幕/按钮以启用声音。
