Web Audio API实现按键发声运行一段时间后短暂无响应问题求助

• 核心错误：每次触发keydown事件都会实例化一个新的Audio类，每次实例化都会创建一个全新的AudioContext对象。主流浏览器对单个页面允许同时存在的AudioContext实例数量有严格限制（通常为6个），连续快速按键短时间内创建的实例超过上限后，浏览器会触发资源回收逻辑，阻塞新的音频上下文创建，就会出现声音中断、按键无响应的情况，等旧的AudioContext被释放后才会恢复正常，和你描述的症状完全吻合。
• 次要问题：每次创建Audio实例时，构造函数里直接触发了增益节点的1.5秒指数衰减，后续调用createNotes播放音效时，可能增益已经衰减到0导致没有声音；同时每次调用createNotes都重复把gainNode连接到destination，会造成不必要的节点引用残留，加重资源占用。

核心逻辑是全局复用同一个Audio实例和AudioContext，不要每次按键都新建，同时优化音频节点的创建和销毁逻辑：

1. 调整事件监听代码，只初始化一次Audio实例：

import Audio from './scripts/audio'
// 全局仅初始化一次
const audioInstance = new Audio();
document.addEventListener('keydown', (e) => {
    let key = e.key;
    audioInstance.createNotes(key);
})

2. 调整Audio类的逻辑，把增益设置放到每次播放时执行，增加节点销毁逻辑：

class Audio {
    constructor() {
        // 全局仅创建一次AudioContext
        this.audioContext = new AudioContext();
        // 全局仅创建一次gainNode，仅需要连接一次输出设备
        this.gainNode = this.audioContext.createGain();
        this.gainNode.connect(this.audioContext.destination);
    }

    createNotes(key) {
        const notes = {
            's': 261.63,
            'd': 293.66,
            'f': 329.63,
            'g': 349.23,
            'h': 392.00,
            'j': 440.00,
            'k': 493.88,
            'l': 523.25,
            'e': 587.33,
            'r': 659.25,
            't': 698.46,
            'y': 783.99,
            'u': 880.00,
            'i': 987.77,
            'o': 1046.50,
            'p': 1174.66
        }
        
        if (!notes[key]) return;

        // 每次播放新建振荡器，用完即销毁
        const oscillator = this.audioContext.createOscillator();
        oscillator.frequency.setValueAtTime(notes[key], this.audioContext.currentTime);

        // 按频率设置初始增益
        const initGain = notes[key] > 699 ? 0.03 : 0.08;
        this.gainNode.gain.setValueAtTime(initGain, this.audioContext.currentTime);
        // 每次播放时触发增益衰减
        this.gainNode.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 1.5);

        oscillator.connect(this.gainNode);
        oscillator.start(0);
        const stopTime = this.audioContext.currentTime + 1.5;
        oscillator.stop(stopTime);

        // 播放结束后自动断开连接，释放资源
        oscillator.onended = () => {
            oscillator.disconnect();
        }
    }
}

export default Audio;

3. 可选优化：如果不需要长按重复触发音效，可以增加按键状态判断，避免重复触发：

const pressedKeys = new Set();
document.addEventListener('keydown', (e) => {
    if (pressedKeys.has(e.key)) return;
    pressedKeys.add(e.key);
    audioInstance.createNotes(e.key);
})
document.addEventListener('keyup', (e) => {
    pressedKeys.delete(e.key);
})

内容的提问来源于stack exchange，提问作者moodln