Browser Compatibility

​

Minimum Browser Requirements

​

Required Browser APIs

1. Web Audio API - For audio processing
2. AudioWorklet - For real-time audio processing in a separate thread
3. WebSocket - For real-time communication with AssemblyAI
4. getUserMedia API - For microphone access
5. ES6+ JavaScript - Modern JavaScript features

​

Supported Browsers

​

Fully Supported

​

Limited Support

​

Not Supported

• Internet Explorer (all versions)
• Legacy Edge (pre-Chromium, versions below 79)
• Chrome/Firefox versions older than specified above
• Most in-app browsers (Facebook, Instagram, etc.)

​

Checking Browser Compatibility

function checkBrowserCompatibility() {
  const issues = [];

  // Check AudioContext
  if (!window.AudioContext && !window.webkitAudioContext) {
    issues.push('Web Audio API not supported');
  }

  // Check AudioWorklet
  if (!AudioWorkletNode) {
    issues.push('AudioWorklet not supported');
  }

  // Check WebSocket
  if (!window.WebSocket) {
    issues.push('WebSocket not supported');
  }

  // Check getUserMedia
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    issues.push('getUserMedia API not supported');
  }

  // Check if AudioContext supports AudioWorklet
  if (window.AudioContext) {
    const tempContext = new AudioContext();
    if (!tempContext.audioWorklet) {
      issues.push('AudioWorklet not available in AudioContext');
    }
    tempContext.close();
  }

  return {
    compatible: issues.length === 0,
    issues: issues
  };
}

// Use it before initializing
const compatibility = checkBrowserCompatibility();
if (!compatibility.compatible) {
  alert(`Your browser is not compatible:\n${compatibility.issues.join('\n')}`);
  console.error('Browser compatibility issues:', compatibility.issues);
}

​

Browser-Specific Considerations

​

Chrome (Recommended)

• Full AudioWorklet support since version 66
• Excellent WebSocket performance
• Best debugging tools for audio issues
• Most stable implementation

​

Firefox

• AudioWorklet supported since version 76
• May have slightly different audio processing characteristics
• Ensure you’re using Firefox 80+ for best results
• Developer tools are excellent for debugging

​

Safari (macOS & iOS)

1. AudioWorklet instability: May crash or fail to load intermittently
2. Sample rate issues: Safari may not respect the requested 16000 Hz sample rate
3. Permission prompts: More restrictive microphone permissions
4. Background tab behavior: Audio processing may pause when tab is not active

// Handle Safari's sample rate quirks
audioContext = new AudioContext({
  sampleRate: 16000,
  latencyHint: 'balanced'
});

// Check actual sample rate
console.log('Requested: 16000 Hz, Actual:', audioContext.sampleRate);

if (audioContext.sampleRate !== 16000) {
  console.warn('Sample rate mismatch! Resampling may be required.');
  // You may need to implement resampling logic
}

​

Edge (Chromium)

• Same engine as Chrome
• Excellent performance and compatibility
• Fully recommended

​

Mobile Browsers

• Chrome for Android (96+): Good support
• Firefox for Android (96+): Good support
• Samsung Internet (12+): Generally works

• Safari (14.5+): Limited support, use with caution
• Chrome/Firefox for iOS: Use Safari’s engine, same limitations
• Recommendation: Test thoroughly on target devices

• Battery usage is higher during real-time transcription
• Background processing may be limited or unavailable
• Network switching (WiFi to cellular) may interrupt WebSocket
• Some devices may have memory constraints

​

Testing Your Browser

• Can I Use - AudioWorklet
• Can I Use - WebSocket
• Can I Use - getUserMedia

​

Debugging Browser Issues

​

Enable Verbose Logging

// Add detailed logging for browser API calls
console.log('Browser:', navigator.userAgent);
console.log('AudioContext available:', !!window.AudioContext);
console.log('AudioWorkletNode available:', !!AudioWorkletNode);
console.log('WebSocket available:', !!window.WebSocket);
console.log('getUserMedia available:', !!navigator.mediaDevices?.getUserMedia);

​

Chrome DevTools

1. Open DevTools (F12)
2. Go to “Application” tab → “Service Workers”
3. Check “WebSocket” frames in Network tab
4. Use “Media” panel to inspect audio devices

​

Firefox DevTools

1. Open DevTools (F12)
2. Console shows WebSocket frames
3. Network tab → WS filter for WebSocket traffic
4. about:config → search “media” for audio settings

​

Feature Detection Best Practices

// Good: Feature detection
if ('AudioWorklet' in AudioContext.prototype) {
  // Use AudioWorklet
} else {
  // Fallback or error message
}

// Bad: Browser detection
if (navigator.userAgent.includes('Chrome')) {
  // Don't do this
}

​

Polyfills and Fallbacks

1. ScriptProcessorNode (deprecated): Old API, higher latency, not recommended
2. Display a compatibility message: Suggest upgrading to a modern browser
3. Server-side processing: Alternative architecture without browser audio processing

​

Recommended Setup

• Desktop: Chrome 90+, Firefox 90+, or Edge 90+
• Mobile: Chrome for Android 100+
• Avoid: Safari on both desktop and iOS if possible
• Development: Use Chrome for debugging and testing
• Production: Test on all target browsers before deployment

​

Getting Help

1. Check the Common Issues guide
2. Verify your browser version meets minimum requirements
3. Test in a different browser to isolate the issue
4. Contact [email protected] with:
   • Browser name and version
   • Operating system
   • Console error messages
   • Steps to reproduce