feat(waveform): precompute and store peaks in DB for instant rendering
Store waveform peaks inline in audio_versions (JSONB columns) so WaveSurfer
can render the waveform immediately on page load without waiting for audio
decode. Adds a 100-point mini-waveform for version selector thumbnails.
Backend:
- Migration 0006: adds waveform_peaks and waveform_peaks_mini JSONB columns
- Worker generates both resolutions (500-pt full, 100-pt mini) during transcode
and stores them directly in DB — replaces file-based waveform_url approach
- AudioVersionRead schema exposes both fields inline (no extra HTTP round-trip)
- GET /versions/{id}/waveform reads from DB; adds ?resolution=mini support
Frontend:
- audioService.initialize() accepts peaks and calls ws.load(url, Float32Array)
so waveform renders instantly without audio decode
- useWaveform hook threads peaks option through to audioService
- PlayerPanel passes waveform_peaks from the active version to the hook
- New MiniWaveform SVG component (no WaveSurfer) renders mini peaks in the
version selector buttons
Fix: docker-compose.dev.yml now runs alembic upgrade head before starting
the API server, so a fresh volume gets the full schema automatically.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -41,7 +41,7 @@ class AudioService {
|
||||
return el;
|
||||
}
|
||||
|
||||
public async initialize(container: HTMLElement, url: string): Promise<void> {
|
||||
public async initialize(container: HTMLElement, url: string, peaks?: number[] | null): Promise<void> {
|
||||
if (!container) throw new Error('Container element is required');
|
||||
if (!url) throw new Error('Valid audio URL is required');
|
||||
|
||||
@@ -98,7 +98,14 @@ class AudioService {
|
||||
|
||||
ws.on('ready', () => { onReady().catch(reject); });
|
||||
ws.on('error', (err) => reject(err instanceof Error ? err : new Error(String(err))));
|
||||
ws.load(url);
|
||||
|
||||
// Pass pre-computed peaks to WaveSurfer so the waveform renders immediately
|
||||
// without waiting for the full audio to decode (WaveSurfer v7 feature).
|
||||
if (peaks && peaks.length > 0) {
|
||||
ws.load(url, [new Float32Array(peaks)]);
|
||||
} else {
|
||||
ws.load(url);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user