mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-16 13:20:39 -07:00
517 lines
16 KiB
TypeScript
517 lines
16 KiB
TypeScript
import { Pause, Play, Repeat, Volume2, VolumeX } from 'lucide-react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import WaveSurfer from 'wavesurfer.js';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Slider } from '@/components/ui/slider';
|
|
import { formatAudioDuration } from '@/lib/utils/audio';
|
|
import { usePlayerStore } from '@/stores/playerStore';
|
|
|
|
export function AudioPlayer() {
|
|
const {
|
|
audioUrl,
|
|
audioId,
|
|
title,
|
|
isPlaying,
|
|
currentTime,
|
|
duration,
|
|
volume,
|
|
isLooping,
|
|
shouldRestart,
|
|
setIsPlaying,
|
|
setCurrentTime,
|
|
setDuration,
|
|
setVolume,
|
|
toggleLoop,
|
|
clearRestartFlag,
|
|
} = usePlayerStore();
|
|
|
|
const waveformRef = useRef<HTMLDivElement>(null);
|
|
const wavesurferRef = useRef<WaveSurfer | null>(null);
|
|
const loadingRef = useRef(false);
|
|
const previousAudioIdRef = useRef<string | null>(null);
|
|
const hasInitializedRef = useRef(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Initialize WaveSurfer (only when audioUrl exists and container is ready)
|
|
useEffect(() => {
|
|
// Don't initialize if no audioUrl or already initialized
|
|
if (!audioUrl) {
|
|
return;
|
|
}
|
|
|
|
if (wavesurferRef.current) {
|
|
console.log('WaveSurfer already initialized, skipping');
|
|
return;
|
|
}
|
|
|
|
console.log('Creating NEW WaveSurfer instance');
|
|
|
|
// Wait for container to be properly rendered
|
|
const initWaveSurfer = () => {
|
|
const container = waveformRef.current;
|
|
if (!container) {
|
|
// Container not ready yet, retry
|
|
setTimeout(initWaveSurfer, 50);
|
|
return;
|
|
}
|
|
|
|
// Check if container has dimensions and is visible
|
|
const rect = container.getBoundingClientRect();
|
|
const style = window.getComputedStyle(container);
|
|
const isVisible =
|
|
rect.width > 0 &&
|
|
rect.height > 0 &&
|
|
style.display !== 'none' &&
|
|
style.visibility !== 'hidden';
|
|
|
|
if (!isVisible) {
|
|
// Retry after a short delay
|
|
setTimeout(initWaveSurfer, 50);
|
|
return;
|
|
}
|
|
|
|
console.log('Initializing WaveSurfer...', {
|
|
container,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
});
|
|
|
|
try {
|
|
// Get computed CSS variable values
|
|
const root = document.documentElement;
|
|
const getCSSVar = (varName: string) => {
|
|
const value = getComputedStyle(root).getPropertyValue(varName).trim();
|
|
return value ? `hsl(${value})` : '';
|
|
};
|
|
|
|
const waveColor = getCSSVar('--muted');
|
|
const progressColor = getCSSVar('--accent');
|
|
const cursorColor = getCSSVar('--accent');
|
|
|
|
const wavesurfer = WaveSurfer.create({
|
|
container: container,
|
|
waveColor: waveColor,
|
|
progressColor: progressColor,
|
|
cursorColor: cursorColor,
|
|
barWidth: 2,
|
|
barRadius: 2,
|
|
height: 80,
|
|
normalize: true,
|
|
backend: 'WebAudio',
|
|
interact: true, // Enable interaction (click to seek)
|
|
mediaControls: false, // Don't show native controls
|
|
});
|
|
|
|
wavesurferRef.current = wavesurfer;
|
|
console.log('WaveSurfer created successfully');
|
|
} catch (error) {
|
|
console.error('Failed to create WaveSurfer:', error);
|
|
setError(
|
|
`Failed to initialize waveform: ${error instanceof Error ? error.message : String(error)}`,
|
|
);
|
|
return;
|
|
}
|
|
|
|
const wavesurfer = wavesurferRef.current;
|
|
if (!wavesurfer) return;
|
|
|
|
// Update store when time changes
|
|
wavesurfer.on('timeupdate', (time) => {
|
|
setCurrentTime(time);
|
|
});
|
|
|
|
// Update store when duration is loaded
|
|
wavesurfer.on('ready', () => {
|
|
const dur = wavesurfer.getDuration();
|
|
setDuration(dur);
|
|
loadingRef.current = false;
|
|
setIsLoading(false);
|
|
setError(null);
|
|
console.log('Audio ready, duration:', dur);
|
|
console.log('Waveform should be visible now');
|
|
|
|
// Ensure volume is set
|
|
const currentVolume = usePlayerStore.getState().volume;
|
|
wavesurfer.setVolume(currentVolume);
|
|
|
|
// Get the underlying audio element and ensure it's not muted
|
|
const mediaElement = wavesurfer.getMediaElement();
|
|
if (mediaElement) {
|
|
mediaElement.volume = currentVolume;
|
|
mediaElement.muted = false;
|
|
console.log('Audio element volume:', mediaElement.volume, 'muted:', mediaElement.muted);
|
|
}
|
|
|
|
// Auto-play when ready
|
|
// Use a small delay to ensure audio element is fully ready
|
|
setTimeout(() => {
|
|
wavesurfer.play().catch((error) => {
|
|
console.error('Failed to autoplay:', error);
|
|
// Don't show error for autoplay failures (browser restrictions)
|
|
});
|
|
}, 100);
|
|
});
|
|
|
|
// Handle play/pause
|
|
wavesurfer.on('play', () => {
|
|
setIsPlaying(true);
|
|
// Ensure audio element is not muted when playing
|
|
const mediaElement = wavesurfer.getMediaElement();
|
|
if (mediaElement) {
|
|
mediaElement.muted = false;
|
|
const currentVolume = usePlayerStore.getState().volume;
|
|
mediaElement.volume = currentVolume;
|
|
console.log('Playing - volume:', mediaElement.volume, 'muted:', mediaElement.muted);
|
|
}
|
|
});
|
|
wavesurfer.on('pause', () => setIsPlaying(false));
|
|
wavesurfer.on('finish', () => {
|
|
// Check loop state from store
|
|
const loop = usePlayerStore.getState().isLooping;
|
|
if (loop) {
|
|
wavesurfer.seekTo(0);
|
|
wavesurfer.play();
|
|
} else {
|
|
setIsPlaying(false);
|
|
}
|
|
});
|
|
|
|
// Handle errors
|
|
wavesurfer.on('error', (error) => {
|
|
console.error('WaveSurfer error:', error);
|
|
setIsLoading(false);
|
|
setError(`Audio error: ${error instanceof Error ? error.message : String(error)}`);
|
|
});
|
|
|
|
// Handle loading
|
|
wavesurfer.on('loading', (percent) => {
|
|
setIsLoading(true);
|
|
if (percent === 100) {
|
|
setIsLoading(false);
|
|
}
|
|
});
|
|
|
|
// Load audio immediately if audioUrl is already set
|
|
if (audioUrl) {
|
|
console.log('WaveSurfer ready, loading audio:', audioUrl);
|
|
loadingRef.current = true;
|
|
setIsLoading(true);
|
|
// Stop any current playback before loading new audio
|
|
if (wavesurfer.isPlaying()) {
|
|
wavesurfer.pause();
|
|
}
|
|
wavesurfer
|
|
.load(audioUrl)
|
|
.then(() => {
|
|
console.log('Audio loaded into WaveSurfer');
|
|
loadingRef.current = false;
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to load audio into WaveSurfer:', error);
|
|
loadingRef.current = false;
|
|
setIsLoading(false);
|
|
setError(
|
|
`Failed to load audio: ${error instanceof Error ? error.message : String(error)}`,
|
|
);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Use double requestAnimationFrame to ensure DOM is fully rendered
|
|
let rafId1: number;
|
|
let rafId2: number;
|
|
let timeoutId: number | null = null;
|
|
|
|
rafId1 = requestAnimationFrame(() => {
|
|
rafId2 = requestAnimationFrame(() => {
|
|
// Add a small delay to ensure container is fully laid out
|
|
timeoutId = setTimeout(() => {
|
|
initWaveSurfer();
|
|
}, 10);
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
console.log('Cleaning up WaveSurfer initialization effect');
|
|
if (rafId1) cancelAnimationFrame(rafId1);
|
|
if (rafId2) cancelAnimationFrame(rafId2);
|
|
if (timeoutId) clearTimeout(timeoutId);
|
|
if (wavesurferRef.current) {
|
|
console.log('Destroying WaveSurfer instance');
|
|
try {
|
|
const mediaElement = wavesurferRef.current.getMediaElement();
|
|
if (mediaElement) {
|
|
mediaElement.pause();
|
|
mediaElement.src = '';
|
|
}
|
|
wavesurferRef.current.destroy();
|
|
} catch (error) {
|
|
console.error('Error destroying WaveSurfer:', error);
|
|
}
|
|
wavesurferRef.current = null;
|
|
}
|
|
};
|
|
}, [audioUrl, setIsPlaying, setCurrentTime, setDuration]);
|
|
|
|
// Load audio when URL changes (only if WaveSurfer is already initialized)
|
|
useEffect(() => {
|
|
const wavesurfer = wavesurferRef.current;
|
|
|
|
if (!audioUrl || !wavesurfer) {
|
|
// Reset state when no audio or WaveSurfer not ready
|
|
if (!audioUrl && wavesurfer) {
|
|
wavesurfer.pause();
|
|
wavesurfer.seekTo(0);
|
|
loadingRef.current = false;
|
|
setIsLoading(false);
|
|
setDuration(0);
|
|
setCurrentTime(0);
|
|
setError(null);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// CRITICAL: Force stop any current playback and cancel any pending loads
|
|
// This must happen BEFORE any early returns
|
|
console.log('Audio URL changed to:', audioUrl);
|
|
|
|
// COMPLETELY stop and destroy the current audio
|
|
try {
|
|
// First pause if playing
|
|
if (wavesurfer.isPlaying()) {
|
|
console.log('Pausing current playback');
|
|
wavesurfer.pause();
|
|
}
|
|
|
|
// Stop the media element explicitly
|
|
const mediaElement = wavesurfer.getMediaElement();
|
|
if (mediaElement) {
|
|
console.log('Stopping media element');
|
|
mediaElement.pause();
|
|
mediaElement.currentTime = 0;
|
|
mediaElement.src = '';
|
|
}
|
|
|
|
// Use empty() to completely destroy the waveform and media element
|
|
console.log('Calling wavesurfer.empty() to destroy audio');
|
|
wavesurfer.empty();
|
|
} catch (error) {
|
|
console.error('Error stopping previous audio:', error);
|
|
// Continue anyway to load new audio
|
|
}
|
|
|
|
// Reset loading state to allow new load (cancel any pending loads)
|
|
loadingRef.current = false;
|
|
|
|
// Now start the new load
|
|
loadingRef.current = true;
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setCurrentTime(0);
|
|
setDuration(0);
|
|
|
|
// Load new audio
|
|
console.log('Starting new audio load for:', audioUrl);
|
|
wavesurfer
|
|
.load(audioUrl)
|
|
.then(() => {
|
|
console.log('Audio load promise resolved');
|
|
// Don't set loading to false here - wait for 'ready' event
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to load audio:', error);
|
|
console.error('Audio URL:', audioUrl);
|
|
loadingRef.current = false;
|
|
setIsLoading(false);
|
|
setError(`Failed to load audio: ${error instanceof Error ? error.message : String(error)}`);
|
|
});
|
|
}, [audioUrl, setCurrentTime, setDuration]);
|
|
|
|
// Sync play/pause state (only when user clicks play/pause button, not auto-sync)
|
|
// This effect is kept for external state changes but should be minimal
|
|
useEffect(() => {
|
|
if (!wavesurferRef.current || duration === 0) return;
|
|
|
|
if (isPlaying && wavesurferRef.current.isPlaying() === false) {
|
|
// Only auto-play if audio is ready
|
|
wavesurferRef.current.play().catch((error) => {
|
|
console.error('Failed to play:', error);
|
|
setIsPlaying(false);
|
|
setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
|
|
});
|
|
} else if (!isPlaying && wavesurferRef.current.isPlaying()) {
|
|
wavesurferRef.current.pause();
|
|
}
|
|
}, [isPlaying, setIsPlaying, duration]);
|
|
|
|
// Sync volume
|
|
useEffect(() => {
|
|
if (wavesurferRef.current) {
|
|
wavesurferRef.current.setVolume(volume);
|
|
// Also ensure the underlying audio element volume is set
|
|
const mediaElement = wavesurferRef.current.getMediaElement();
|
|
if (mediaElement) {
|
|
mediaElement.volume = volume;
|
|
mediaElement.muted = volume === 0;
|
|
console.log('Volume synced:', volume, 'muted:', mediaElement.muted);
|
|
}
|
|
}
|
|
}, [volume]);
|
|
|
|
// Mark as initialized when audio is ready, reset when audioId changes
|
|
useEffect(() => {
|
|
if (duration > 0 && audioId) {
|
|
hasInitializedRef.current = true;
|
|
}
|
|
// Reset initialization flag when audioId changes to a new audio
|
|
if (audioId !== previousAudioIdRef.current && previousAudioIdRef.current !== null) {
|
|
hasInitializedRef.current = false;
|
|
}
|
|
if (audioId !== null) {
|
|
previousAudioIdRef.current = audioId;
|
|
}
|
|
}, [duration, audioId]);
|
|
|
|
// Handle restart flag - when history item is clicked again, restart from beginning
|
|
useEffect(() => {
|
|
const wavesurfer = wavesurferRef.current;
|
|
if (!wavesurfer || !shouldRestart || duration === 0) {
|
|
return;
|
|
}
|
|
|
|
// Reset to beginning and play
|
|
console.log('Restarting current audio from beginning');
|
|
wavesurfer.seekTo(0);
|
|
wavesurfer.play().catch((error) => {
|
|
console.error('Failed to play after restart:', error);
|
|
setIsPlaying(false);
|
|
setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
|
|
});
|
|
|
|
// Clear the restart flag
|
|
clearRestartFlag();
|
|
}, [shouldRestart, duration, setIsPlaying, clearRestartFlag]);
|
|
|
|
// Handle loop - WaveSurfer handles this via the 'finish' event
|
|
|
|
const handlePlayPause = () => {
|
|
if (!wavesurferRef.current) {
|
|
console.error('WaveSurfer not initialized');
|
|
return;
|
|
}
|
|
|
|
// Check if audio is loaded
|
|
if (duration === 0 && !isLoading) {
|
|
console.error('Audio not loaded yet');
|
|
setError('Audio not loaded. Please wait...');
|
|
return;
|
|
}
|
|
|
|
if (wavesurferRef.current.isPlaying()) {
|
|
wavesurferRef.current.pause();
|
|
} else {
|
|
wavesurferRef.current.play().catch((error) => {
|
|
console.error('Failed to play:', error);
|
|
setIsPlaying(false);
|
|
setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleSeek = (value: number[]) => {
|
|
if (!wavesurferRef.current || duration === 0) return;
|
|
const progress = value[0] / 100;
|
|
wavesurferRef.current.seekTo(progress);
|
|
};
|
|
|
|
const handleVolumeChange = (value: number[]) => {
|
|
setVolume(value[0] / 100);
|
|
};
|
|
|
|
// Don't render if no audio
|
|
if (!audioUrl) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 z-50">
|
|
<div className="container mx-auto px-4 py-3 max-w-7xl">
|
|
<div className="flex items-center gap-4">
|
|
{/* Play/Pause Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handlePlayPause}
|
|
disabled={isLoading || duration === 0}
|
|
className="shrink-0"
|
|
title={duration === 0 && !isLoading ? 'Audio not loaded' : ''}
|
|
>
|
|
{isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
|
|
</Button>
|
|
|
|
{/* Waveform */}
|
|
<div className="flex-1 min-w-0 flex flex-col gap-1">
|
|
<div ref={waveformRef} className="w-full min-h-[80px]" />
|
|
{duration > 0 && (
|
|
<Slider
|
|
value={duration > 0 ? [(currentTime / duration) * 100] : [0]}
|
|
onValueChange={handleSeek}
|
|
max={100}
|
|
step={0.1}
|
|
className="w-full"
|
|
/>
|
|
)}
|
|
{isLoading && (
|
|
<div className="text-xs text-muted-foreground text-center py-2">Loading audio...</div>
|
|
)}
|
|
{error && <div className="text-xs text-destructive text-center py-2">{error}</div>}
|
|
</div>
|
|
|
|
{/* Time Display */}
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground shrink-0 min-w-[100px]">
|
|
<span className="font-mono">{formatAudioDuration(currentTime)}</span>
|
|
<span>/</span>
|
|
<span className="font-mono">{formatAudioDuration(duration)}</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
{title && (
|
|
<div className="text-sm font-medium truncate max-w-[200px] shrink-0">{title}</div>
|
|
)}
|
|
|
|
{/* Loop Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={toggleLoop}
|
|
className={isLooping ? 'text-primary' : ''}
|
|
title="Toggle loop"
|
|
>
|
|
<Repeat className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{/* Volume Control */}
|
|
<div className="flex items-center gap-2 shrink-0 w-[120px]">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setVolume(volume > 0 ? 0 : 1)}
|
|
className="h-8 w-8"
|
|
>
|
|
{volume > 0 ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
|
|
</Button>
|
|
<Slider
|
|
value={[volume * 100]}
|
|
onValueChange={handleVolumeChange}
|
|
max={100}
|
|
step={1}
|
|
className="flex-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|