Files
audio-ui/lib/waveform/peaks.ts
Sebastian Krüger ebfb4d3fff feat: implement Phase 2 - Web Audio API engine and waveform visualization
Phase 2 Complete Features:
- Web Audio API context management with browser compatibility
- Audio file upload with drag-and-drop support
- Audio decoding for multiple formats (WAV, MP3, OGG, FLAC, AAC, M4A)
- AudioPlayer class with full playback control
- Waveform visualization using Canvas API
- Real-time waveform rendering with progress indicator
- Playback controls (play, pause, stop, seek)
- Volume control with mute/unmute
- Timeline scrubbing
- Audio file information display

Components:
- AudioEditor: Main editor container
- FileUpload: Drag-and-drop file upload component
- AudioInfo: Display audio file metadata
- Waveform: Canvas-based waveform visualization
- PlaybackControls: Transport controls with volume slider

Audio Engine:
- lib/audio/context.ts: AudioContext management
- lib/audio/decoder.ts: Audio file decoding utilities
- lib/audio/player.ts: AudioPlayer class for playback
- lib/waveform/peaks.ts: Waveform peak generation

Hooks:
- useAudioPlayer: Complete audio player state management

Types:
- types/audio.ts: TypeScript definitions for audio types

Features Working:
✓ Load audio files via drag-and-drop or file picker
✓ Display waveform with real-time progress
✓ Play/pause/stop controls
✓ Seek by clicking on waveform or using timeline slider
✓ Volume control with visual feedback
✓ Audio file metadata display (duration, sample rate, channels)
✓ Toast notifications for user feedback
✓ SSR-safe audio context initialization
✓ Dark/light theme support

Tech Stack:
- Web Audio API for playback
- Canvas API for waveform rendering
- React 19 hooks for state management
- TypeScript for type safety

Build verified and working ✓

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:32:00 +01:00

106 lines
2.4 KiB
TypeScript

/**
* Waveform peak generation utilities
*/
/**
* Generate waveform peaks from an AudioBuffer
*/
export function generatePeaks(
audioBuffer: AudioBuffer,
width: number,
channelIndex: number = 0
): Float32Array {
const channelData = audioBuffer.getChannelData(channelIndex);
const peaks = new Float32Array(width);
const samplesPerPeak = Math.floor(channelData.length / width);
for (let i = 0; i < width; i++) {
const start = i * samplesPerPeak;
const end = Math.min(start + samplesPerPeak, channelData.length);
let max = 0;
for (let j = start; j < end; j++) {
const abs = Math.abs(channelData[j]);
if (abs > max) {
max = abs;
}
}
peaks[i] = max;
}
return peaks;
}
/**
* Generate peaks for all channels
*/
export function generateMultiChannelPeaks(
audioBuffer: AudioBuffer,
width: number
): Float32Array[] {
const peaks: Float32Array[] = [];
for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
peaks.push(generatePeaks(audioBuffer, width, i));
}
return peaks;
}
/**
* Generate min/max peaks for more detailed waveform visualization
*/
export function generateMinMaxPeaks(
audioBuffer: AudioBuffer,
width: number,
channelIndex: number = 0
): { min: Float32Array; max: Float32Array } {
const channelData = audioBuffer.getChannelData(channelIndex);
const min = new Float32Array(width);
const max = new Float32Array(width);
const samplesPerPeak = Math.floor(channelData.length / width);
for (let i = 0; i < width; i++) {
const start = i * samplesPerPeak;
const end = Math.min(start + samplesPerPeak, channelData.length);
let minVal = 1;
let maxVal = -1;
for (let j = start; j < end; j++) {
const val = channelData[j];
if (val < minVal) minVal = val;
if (val > maxVal) maxVal = val;
}
min[i] = minVal;
max[i] = maxVal;
}
return { min, max };
}
/**
* Normalize peaks to a given range
*/
export function normalizePeaks(peaks: Float32Array, targetMax: number = 1): Float32Array {
const normalized = new Float32Array(peaks.length);
let max = 0;
// Find max value
for (let i = 0; i < peaks.length; i++) {
if (peaks[i] > max) {
max = peaks[i];
}
}
// Normalize
const scale = max > 0 ? targetMax / max : 1;
for (let i = 0; i < peaks.length; i++) {
normalized[i] = peaks[i] * scale;
}
return normalized;
}