2025-11-17 15:23:00 +01:00
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
import * as React from 'react';
|
2025-11-17 20:03:40 +01:00
|
|
|
import { Music } from 'lucide-react';
|
2025-11-17 15:23:00 +01:00
|
|
|
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
|
|
|
|
import { ToastProvider } from '@/components/ui/Toast';
|
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
|
|
|
import { AudioEditor } from '@/components/editor/AudioEditor';
|
2025-11-17 15:23:00 +01:00
|
|
|
|
|
|
|
|
export default function Home() {
|
|
|
|
|
return (
|
|
|
|
|
<ToastProvider>
|
2025-11-17 20:03:40 +01:00
|
|
|
<div className="flex flex-col h-screen bg-background overflow-hidden">
|
|
|
|
|
{/* Audio Editor (includes header) */}
|
|
|
|
|
<AudioEditor />
|
2025-11-17 15:23:00 +01:00
|
|
|
</div>
|
|
|
|
|
</ToastProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|