How to Fix "The AudioContext was not allowed to start. It must be resumed after a user gesture" in Chrome & Safari

// Resilient AudioContext Resumption Helper:
class SoundEngine {
  private ctx: AudioContext | null = null;

  private getContext(): AudioContext {
    if (!this.ctx) {
      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
      this.ctx = new AudioCtx();
    }
    return this.ctx;
  }

  public async playNotification(): Promise<void> {
    const ctx = this.getContext();

    // If context is suspended by browser autoplay policy, resume on gesture
    if (ctx.state === 'suspended') {
      console.log('[Audio] Context suspended. Awaiting user interaction to resume...');
      const resumeHandler = async () => {
        await ctx.resume();
        console.log('[Audio] AudioContext resumed successfully!');
        window.removeEventListener('click', resumeHandler);
        window.removeEventListener('touchstart', resumeHandler);
      };
      window.addEventListener('click', resumeHandler, { once: true });
      window.addEventListener('touchstart', resumeHandler, { once: true });
      return;
    }

    // Play tone using standard oscillator
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.connect(gain);
    gain.connect(ctx.destination);
    osc.frequency.value = 440; // A4 tone
    gain.gain.setValueAtTime(0.1, ctx.currentTime);
    osc.start();
    osc.stop(ctx.currentTime + 0.2);
  }
}