WIP: Fixed audio context issues - ReferenceError in useWaveform, enhanced cleanup, improved playback switching

This commit is contained in:
Mistral Vibe
2026-04-08 17:00:28 +02:00
parent 5f95d88741
commit 9c032d0774
3 changed files with 79 additions and 14 deletions

View File

@@ -327,16 +327,22 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
this.log(LogLevel.DEBUG, 'AudioService.play called', { songId, bandId });
try {
// Always stop current playback first to ensure only one audio plays at a time
if (this.isPlaying()) {
this.log(LogLevel.INFO, 'Stopping current playback before starting new one');
this.pause();
// Small delay to ensure cleanup
await new Promise(resolve => setTimeout(resolve, 50));
}
// Check if we need to switch songs
const isDifferentSong = songId && bandId &&
(this.currentPlayingSongId !== songId || this.currentPlayingBandId !== bandId);
// If switching to a different song, stop current playback first
if (isDifferentSong && this.isPlaying()) {
this.log(LogLevel.INFO, 'Switching songs - stopping current playback first');
this.pause();
// Small delay to ensure cleanup
await new Promise(resolve => setTimeout(resolve, 50));
// If switching to a different song, perform cleanup
if (isDifferentSong) {
this.log(LogLevel.INFO, 'Switching to different song - performing cleanup');
this.cleanup();
}
// Ensure we have a valid audio context
@@ -444,6 +450,10 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
if (this.wavesurfer) {
try {
// Always stop playback first
if (this.wavesurfer.isPlaying()) {
this.wavesurfer.pause();
}
// Disconnect audio nodes but keep audio context alive
this.wavesurfer.unAll();
this.wavesurfer.destroy();
@@ -458,9 +468,10 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
this.currentPlayingSongId = null;
this.currentPlayingBandId = null;
// Reset player store
// Reset player store completely
const playerStore = usePlayerStore.getState();
playerStore.setCurrentPlayingSong(null, null);
playerStore.batchUpdate({ isPlaying: false, currentTime: 0 });
// Note: We intentionally don't nullify audioContext to keep it alive
}
@@ -504,18 +515,35 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
private setupAudioContext(ws: WaveSurferWithBackend) {
// Simplified audio context setup - we now manage audio context centrally
try {
// If we already have an audio context, use it for WaveSurfer
// If we already have an audio context, ensure WaveSurfer uses it
if (this.audioContext) {
// Try to set the audio context for WaveSurfer if possible
if (ws.backend && typeof ws.backend.getAudioContext === 'function') {
// Some WaveSurfer versions allow setting the audio context
try {
// Try multiple ways to share the audio context with WaveSurfer
try {
// Method 1: Try to set via backend if available
if (ws.backend) {
// @ts-expect-error - WaveSurfer typing doesn't expose this
ws.backend.audioContext = this.audioContext;
this.log(LogLevel.DEBUG, 'Shared audio context with WaveSurfer backend');
} catch (error) {
this.log(LogLevel.DEBUG, 'Could not share audio context with WaveSurfer, but continuing');
}
// Method 2: Try to access and replace the audio context
if (ws.backend?.getAudioContext) {
const originalGetAudioContext = ws.backend.getAudioContext;
// @ts-expect-error - Replace the method
ws.backend.getAudioContext = () => this.audioContext;
this.log(LogLevel.DEBUG, 'Overrode backend.getAudioContext with shared context');
}
// Method 3: Try top-level getAudioContext
if (typeof ws.getAudioContext === 'function') {
const originalGetAudioContext = ws.getAudioContext;
// @ts-expect-error - Replace the method
ws.getAudioContext = () => this.audioContext;
this.log(LogLevel.DEBUG, 'Overrode ws.getAudioContext with shared context');
}
} catch (error) {
this.log(LogLevel.WARN, 'Could not share audio context with WaveSurfer, but continuing:', error);
}
return;
}