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>
106 lines
2.4 KiB
TypeScript
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;
|
|
}
|