import { Tone } from 'tone';

function App() {
  const handleUserInteraction = async () => {
    // Resume AudioContext after user gesture
    await Tone.start();
    // Now audio can play
  };
  
  return (
    <button onClick={handleUserInteraction}>
      Start Audio
    </button>
  );
}

TypeError: param must be an AudioParam

import { Context, setContext } from 'tone';

// The library uses this pattern internally
const context = new Context();
setContext(context);

// Use context methods instead of native AudioContext
const source = context.createMediaStreamSource(stream);
const analyser = context.createAnalyser();

TypeError: parameter 1 is not of type 'BaseAudioContext'

import { getGlobalContext } from '@waveform-playlist/playout';

const context = getGlobalContext();
await context.addAudioWorkletModule(workletUrl);
const workletNode = context.createAudioWorkletNode('processor-name');

# Install Firefox Developer Edition for latest features
brew install --cask firefox-developer-edition

# Or use Firefox in CI
npx playwright test --browser=firefox

// ❌ BAD: Redundant Tone.start() adds 2s latency on Safari
await Tone.start();  // Called in initialization
await Tone.start();  // Called again in play handler - 2s delay!

const audioInitializedRef = useRef(false);

const play = async () => {
  if (!audioInitializedRef.current) {
    await Tone.start();
    audioInitializedRef.current = true;
  }
  
  // Play audio immediately (no latency)
  playout.play();
};

if (typeof OffscreenCanvas !== 'undefined') {
  // Use web worker rendering
  canvas.transferControlToOffscreen();
} else {
  // Main thread fallback
  renderOnMainThread(canvas);
}

if (typeof AudioWorkletNode === 'undefined') {
  // AudioWorklets not supported
  return <div>Recording not supported in this browser</div>;
}

const { isSupported, error } = useRecording();

if (!isSupported) {
  return <div>Recording requires a modern browser</div>;
}

function SpectrogramChannel({ audioBuffer }: Props) {
  const hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined';
  
  if (hasOffscreenCanvas) {
    // Web worker rendering (faster, non-blocking)
    return <OffscreenSpectrogramCanvas audioBuffer={audioBuffer} />;
  } else {
    // Main thread rendering (slower, may block UI)
    return <MainThreadSpectrogramCanvas audioBuffer={audioBuffer} />;
  }
}

# Install browsers
npx playwright install

# Run tests on all browsers
npx playwright test

# Run on specific browser
npx playwright test --browser=firefox
npx playwright test --browser=webkit  # Safari engine

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 13'] },
    },
  ],
});

const startTime = now();
transport.start(undefined, startTime);
(transport as any)._clock._lastUpdate = startTime; // Fix ghost ticks

// ✅ GOOD: Feature detection
const hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined';
const hasAudioWorklet = typeof AudioWorkletNode !== 'undefined';

// ❌ BAD: User agent sniffing
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);