rehearshalhub/SONG_LOADING_DEBUG.md

Song Loading Issue Debug Analysis

Problem Identified

• Songs are not loading after implementing the audio service
• Likely caused by changes in waveform initialization

Potential Issues

1. Audio Service Initialization

• May not be properly handling the container element
• Could have issues with WaveSurfer creation

2. State Management

• Global state might not be updating correctly
• Song/band ID synchronization issues

3. Component Lifecycle

• Cleanup might be interfering with initialization
• Multiple instances could be conflicting

Debugging Steps

1. Check Console Logs

# Look for these key logs:
# "useWaveform: initializing audio service"
# "AudioService.initialize called"
# "Waveform ready - attempting state restoration"
# Any error messages

2. Verify Audio Service

• Check if audioService.initialize() is being called
• Verify WaveSurfer instance is created successfully
• Confirm audio file URL is correct

3. Test State Updates

• Check if global store is being updated with song/band IDs
• Verify state restoration logic is working

Common Fixes

Fix 1: Container Element Issues

// Ensure container is properly referenced
if (!containerRef.current) {
  console.error('Container ref is null');
  return;
}

Fix 2: URL Validation

// Verify URL is valid before loading
if (!options.url || options.url === 'null') {
  console.error('Invalid audio URL:', options.url);
  return;
}

Fix 3: WaveSurfer Configuration

// Ensure proper WaveSurfer configuration
const ws = WaveSurfer.create({
  container: containerRef.current,
  waveColor: "rgba(255,255,255,0.09)",
  progressColor: "#c8861a",
  cursorColor: "#e8a22a",
  barWidth: 2,
  barRadius: 2,
  height: 104,
  normalize: true,
  // Add missing configurations if needed
  audioContext: audioService.getAudioContext(), // Reuse context
  autoPlay: false, // Ensure we control playback
});

Fix 4: Error Handling

// Add comprehensive error handling
try {
  await ws.load(options.url);
  console.log('Audio loaded successfully');
} catch (error) {
  console.error('Failed to load audio:', error);
  // Fallback or retry logic
}

Implementation Checklist

1. Verify container ref is valid
2. Check audio URL is correct
3. Confirm WaveSurfer instance creation
4. Validate audio file loading
5. Test state restoration
6. Check error handling
7. Verify audio context management

Potential Rollback Plan

If issues persist, consider:

1. Reverting to previous waveform hook
2. Gradual migration to audio service
3. Hybrid approach (service + component instances)

Next Steps

1. Add detailed error logging
2. Test with different audio files
3. Verify network requests
4. Check browser console for errors
5. Test on different browsers