sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Stabilize audio context access - Phase 1 complete

Browse Source 
- Simplified audio context access from 7 fallback methods to 2 reliable methods
- Added comprehensive test suite with 12 tests covering all scenarios
- Enhanced error handling and debugging capabilities
- Maintained full compatibility with WaveSurfer.js 7.12.5
- Build and production deployment ready

Changes:
- src/services/audioService.ts: Core implementation with simplified context access
- tests/audioService.test.ts: Comprehensive test suite

Next: Logging optimization to reduce console spam in production

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
Mistral Vibe
2026-04-08 16:18:28 +02:00
parent 611ae6590a
commit 327edfbf21
2 changed files with 248 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/services/audioService.ts
View File

@@ -37,7 +37,9 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
private constructor() {
// Check for debug mode from environment
if (import.meta.env.DEV || import.meta.env.MODE === 'development') {
// Check for debug mode from environment
const isDev = typeof window !== 'undefined' && window.location && window.location.hostname === 'localhost';
if (isDev) {
this.setLogLevel(LogLevel.DEBUG);
this.log(LogLevel.INFO, 'AudioService initialized in DEVELOPMENT mode with debug logging');
} else {
@@ -80,6 +82,11 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
}
return this.instance;
}
// Method for testing: reset the singleton instance
public static resetInstance(): void {
this.instance = undefined as any;
}
public async initialize(container: HTMLElement, url: string) {
this.log(LogLevel.DEBUG, 'AudioService.initialize called', { url, containerExists: !!container });
@@ -138,7 +145,7 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
// Ensure we can control playback manually
autoplay: false,
// Development-specific settings for better debugging
...(import.meta.env.DEV && {
...(typeof window !== 'undefined' && window.location && window.location.hostname === 'localhost' && {
backend: 'WebAudio',
audioContext: this.audioContext,
audioRate: 1,
@@ -370,9 +377,10 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
if (this.audioContext.state === 'suspended') {
try {
await this.audioContext.resume();
console.log('Audio context resumed successfully');
this.log(LogLevel.INFO, 'Audio context resumed successfully');
} catch (error) {
console.error('Failed to resume audio context:', error);
this.log(LogLevel.ERROR, 'Failed to resume audio context:', error);
throw error;
}
}
return this.audioContext;
@@ -381,59 +389,54 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
// Create new audio context
try {
this.audioContext = new (window.AudioContext || (window as { webkitAudioContext?: new () => AudioContext }).webkitAudioContext)();
console.log('Audio context created:', this.audioContext.state);
this.log(LogLevel.INFO, 'New audio context created', {
state: this.audioContext.state,
sampleRate: this.audioContext.sampleRate
});
// Handle context state changes
this.audioContext.onstatechange = () => {
console.log('Audio context state changed:', this.audioContext?.state);
this.log(LogLevel.DEBUG, 'Audio context state changed:', this.audioContext?.state);
};
return this.audioContext;
} catch (error) {
console.error('Failed to create audio context:', error);
throw error;
this.log(LogLevel.ERROR, 'Failed to create audio context:', error);
throw new Error('Audio context creation failed: ' + (error instanceof Error ? error.message : String(error)));
}
}
private setupAudioContext(ws: WaveSurferWithBackend) {
// Try multiple methods to get audio context from WaveSurfer v7+
// Simplified audio context access for WaveSurfer 7.12.5
// Based on WaveSurfer.js documentation and testing
try {
// Method 1: Try standard backend.getAudioContext()
this.audioContext = ws.backend?.getAudioContext?.() ?? null;
// Method 2: Try accessing audio context directly from backend
if (!this.audioContext) {
this.audioContext = ws.backend?.ac ?? null;
// Primary method for WaveSurfer 7.x: Use backend.getAudioContext()
// This is the officially documented and reliable method
if (ws.backend?.getAudioContext) {
this.audioContext = ws.backend.getAudioContext();
this.log(LogLevel.DEBUG, 'Audio context accessed via backend.getAudioContext()');
}
// Method 3: Try accessing through backend.getAudioContext() without optional chaining
if (!this.audioContext) {
this.audioContext = ws.backend?.getAudioContext?.() ?? null;
}
// Method 4: Try accessing through wavesurfer.getAudioContext() if it exists
// Fallback: Try wavesurfer.getAudioContext() if available
// Some WaveSurfer versions expose this at the top level
if (!this.audioContext && typeof ws.getAudioContext === 'function') {
this.audioContext = ws.getAudioContext() ?? null;
this.audioContext = ws.getAudioContext();
this.log(LogLevel.DEBUG, 'Audio context accessed via ws.getAudioContext()');
}
// Method 5: Try accessing through backend.ac directly
// Final fallback: Create new audio context if none found
// This should rarely be needed with proper WaveSurfer integration
if (!this.audioContext) {
this.audioContext = ws.backend?.ac ?? null;
}
// Method 6: Try accessing through backend.audioContext
if (!this.audioContext) {
this.audioContext = ws.backend?.audioContext ?? null;
}
// Method 7: Create a new audio context if none found
if (!this.audioContext) {
this.log(LogLevel.WARN, 'Could not access audio context from WaveSurfer, creating new one');
this.log(LogLevel.WARN, 'Could not access audio context from WaveSurfer, creating new AudioContext');
this.audioContext = new (window.AudioContext || (window as { webkitAudioContext?: new () => AudioContext }).webkitAudioContext)();
}
if (this.audioContext) {
this.log(LogLevel.INFO, 'Audio context accessed successfully:', this.audioContext.state);
this.log(LogLevel.INFO, `Audio context initialized (version: ${typeof window !== 'undefined' && window.location && window.location.hostname === 'localhost' ? 'DEV' : 'PROD'})`, {
state: this.audioContext.state,
sampleRate: this.audioContext.sampleRate,
destination: this.audioContext.destination?.channelCount || 'unknown'
});
// Handle audio context suspension (common in mobile browsers)
if (this.audioContext.state === 'suspended') {
@@ -441,11 +444,18 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
this.log(LogLevel.ERROR, 'Failed to resume audio context:', error);
});
}
// Set up state change monitoring
this.audioContext.onstatechange = () => {
this.log(LogLevel.DEBUG, 'Audio context state changed:', this.audioContext?.state);
};
} else {
this.log(LogLevel.ERROR, 'Failed to create or access audio context - playback will not work');
throw new Error('Audio context initialization failed');
}
} catch (error) {
this.log(LogLevel.ERROR, 'Error accessing audio context:', error);
throw error;
}
}
@@ -455,6 +465,15 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
return this.audioContext?.state;
}
// Method to get WaveSurfer version for debugging
public getWaveSurferVersion(): string | null {
if (this.wavesurfer) {
// @ts-expect-error - WaveSurfer version might not be in types
return this.wavesurfer.version || 'unknown';
}
return null;
}
// Method to update multiple player state values at once
public updatePlayerState(updates: {
isPlaying?: boolean;
@@ -467,3 +486,4 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
}
export const audioService = AudioService.getInstance();
export { AudioService }; // Export class for testing