预存短促音效需用 audiocontext.decodeaudiodata() 将 fetch 的 arraybuffer 解码为 audiobuffer，再通过新建 audiobuffersourcenode 并调用 start() 实现毫秒级播放；audiocontext 必须在用户手势后 resume，且不可复用已启动的 source 节点。
用 AudioContext.createBuffer() 预存短促音效，核心是「提前解码、内存驻留、即时触发」——避免每次播放都加载解码，确保点击/操作时毫秒级响应。
预加载并解码音频文件到 AudioBuffer
不能直接用 fetch 拿到的二进制数据创建 buffer，必须经 context.decodeAudioData() 解码为可播放的 AudioBuffer。推荐封装成 Promise 工具函数：
async function loadSound(url) {
const response = await fetch(url);
const arrayBuffer = await response.arrayBuffer();
return await audioContext.decodeAudioData(arrayBuffer);
}
// 使用示例（在初始化阶段调用）
let clickBuffer;
loadSound('click.wav').then(buffer => {
clickBuffer = buffer;
});
注意：必须在用户手势（如 click、touchstart）后首次创建 AudioContext，否则多数浏览器会静音或拒绝启动。
用 buffer 创建并立即播放 AudioBufferSourceNode
每次播放都新建一个 AudioBufferSourceNode，调用 start() 即可——这是最轻量、无延迟的方式：
function playClick() {
if (!clickBuffer || !audioContext) return;
const source = audioContext.createBufferSource();
source.buffer = clickBuffer;
source.connect(audioContext.destination);
source.start(); // 立即播放（也可传入 audioContext.currentTime 实现精确调度）
}
关键点：
- 不复用
source节点 —— 它只能 start 一次，重用会报错 - 无需手动
disconnect或stop—— 播放完自动释放，GC 可回收 - 若需控制音量，可在
connect前插入GainNode
优化：批量预存多个音效 + 错误兜底
实际项目中常有「成功」「失败」「提示」等多音效，建议统一管理：
const soundBank = {};
const soundUrls = {
click: 'click.wav',
success: 'success.mp3',
error: 'error.wav'
};
async function preloadSounds() {
const promises = Object.entries(soundUrls).map(async ([name, url]) => {
try {
const buffer = await loadSound(url);
soundBank[name] = buffer;
} catch (e) {
console.warn(`Failed to load ${name} sound:`, e);
soundBank[name] = null; // 标记失败，后续播放跳过
}
});
await Promise.all(promises);
}
// 播放时检查是否存在
function play(name) {
const buffer = soundBank[name];
if (!buffer) return;
const source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start();
}
小技巧：WAV 格式通常无需解码（尤其 PCM），加载更快；MP3 虽体积小但需解码，首次播放可能有轻微延迟。
常见问题与避坑
-
“第一次点击没声音”：一定是
AudioContext没在用户交互后启动。在按钮onclick或touchstart回调里加audioContext.resume() -
“连续快速点击卡顿/失声”：浏览器对并发
AudioBufferSourceNode数量有限制（通常 100+），但短促音效极少超限；更可能是未正确创建新节点（复用了已 start 的 source） -
“音效变调/加速”：检查是否误设了
source.playbackRate；默认为 1，勿全局修改 -
移动端静音：iOS Safari 要求首次播放必须由用户手势触发，且不能在异步回调（如
setTimeout）中调用start()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
