valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
222 Commits 1 Branch 0 Tags
5d9e02fe9582665cc1e571c7da64ccf251f9345e
Commit Graph

2 Commits

Author SHA1 Message Date
Sebastian Krüger
37f910acb7 feat: complete Phase 11.4 - comprehensive audio file import 
Implemented advanced audio import capabilities:

**Import Features:**
- Support for WAV, MP3, OGG, FLAC, M4A, AIFF formats
- Sample rate conversion using OfflineAudioContext
- Stereo to mono conversion (equal channel mixing)
- Normalize on import option (99% peak with 1% headroom)
- Comprehensive codec detection from MIME types and extensions

**API Enhancements:**
- ImportOptions interface (convertToMono, targetSampleRate, normalizeOnImport)
- importAudioFile() function returning buffer + metadata
- AudioFileInfo with AudioMetadata (codec, duration, channels, sample rate, file size)
- Enhanced decodeAudioFile() with optional import transformations

**UI Components:**
- ImportDialog component with import settings controls
- Sample rate selector (44.1kHz - 192kHz)
- Checkbox options for mono conversion and normalization
- File info display (original sample rate and channels)
- Updated FileUpload to show AIFF support

**Technical Implementation:**
- Offline resampling for quality preservation
- Equal-power channel mixing for stereo-to-mono
- Peak detection across all channels
- Metadata extraction with codec identification

Phase 11 (Export & Import) now complete!

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-19 08:25:36 +01:00
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