Hi g3nbl0k, 1. verify sample rate alignment - ensure your Web Audio API AudioContext is created with the exact same sample rate as the incoming PCM data (typically 8000, 16000, or 48000 Hz). if the listenUrl returns PCM at 16000 Hz, your AudioContext should be initialized at 16000 Hz. 2. proper buffer queuing - implement a buffer queue to handle chunks arriving at irregular intervals. do not play each chunk immediately as it arrives. instead, queue them and play from the queue to avoid gaps and underruns. 3. correct PCM to Float32 conversion - Web Audio API expects Float32 samples in the range of -1.0 to 1.0. if your PCM is 16-bit signed integers, you need to divide each sample by 32768.0 to normalize it properly. 4. handle empty buffers gracefully - when no audio data is available, write silence bytes rather than skipping. the pattern used internally was: "buffer = b'\\x00' _frame\_count_ NUM_CHANNELS * BYTES_PER_SAMPLE" 5. use AudioWorklet instead of ScriptProcessorNode - ScriptProcessorNode is deprecated and can cause latency and quality issues. AudioWorklet runs on a separate thread and provides more consistent playback. 6. chunk size alignment - ensure audio chunks align with the expected frame size. for 16kHz mono 16-bit audio, each sample is 2 bytes. misaligned chunks can cause clicks or distortion.

VAPIAudioStreamer.js

https://cdn.discordapp.com/attachments/1460815379717947403/1463950371704672367/message.txt?ex=6973b187&is=69726007&hm=d737dbc7af45cafd5e03ebeded8e0318c0628be228b8ecf2021f57815ef18f3a&

usage-example.js

/**
 * VAPI Audio Streaming Usage Examples
 *
 * This file demonstrates how to use the VAPIAudioStreamer class
 * to integrate with VAPI's real-time audio streaming.
 */

import VAPIAudioStreamer from './VAPIAudioStreamer.js';

// ============================================
// Example 1: Basic Usage
// ============================================

async function basicExample() {
  // Get listenUrl from VAPI API when creating a call
  // Format: wss://api.vapi.ai/call/listen/{callId}
  const listenUrl = 'wss://api.vapi.ai/call/listen/your-call-id';

  // Create streamer instance
  const streamer = new VAPIAudioStreamer(listenUrl);

  try {
    // Initialize and start streaming
    await streamer.initialize();
    console.log('🎧 Audio streaming started');

    // The audio will now stream in real-time until you call cleanup()
  } catch (err) {
    console.error('Failed to start audio stream:', err);
  }

  // When the call ends, clean up resources
  // streamer.cleanup();
}

// ============================================
// Example 2: With Error Handling and Retry
// ============================================

async function exampleWithRetry(listenUrl, maxRetries = 3) {
  const streamer = new VAPIAudioStreamer(listenUrl);
  let attempts = 0;

  while (attempts < maxRetries) {
    try {
      await streamer.initialize();
      console.log('✅ Audio streaming started successfully');
      return streamer;
    } catch (err) {
      attempts++;
      console.error(`❌ Attempt ${attempts} failed:`, err.message);

      // Handle specific AudioWorklet race condition
      if (err.message.includes('not defined in AudioWorkletGlobalScope') && attempts < maxRetries) {
        const delay = 1000 * Math.pow(2, attempts - 1); // Exponential backoff
        console.log(`⏳ Retrying in ${delay}ms...`);
        await new Promise(resolve => setTimeout(resolve, delay));
      } else {
        throw err; // Give up after max retries
      }
    }
  }
}