Sebastian Krüger
ebfb4d3fff
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>
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Music, Settings } from 'lucide-react';
|
|
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { ToastProvider } from '@/components/ui/Toast';
|
|
import { AudioEditor } from '@/components/editor/AudioEditor';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<ToastProvider>
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b border-border sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-50">
|
|
<div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
|
|
<div className="min-w-0 flex-1 flex items-center gap-3">
|
|
<Music className="h-6 w-6 text-primary flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<h1 className="text-xl sm:text-2xl font-bold text-foreground">Audio UI</h1>
|
|
<p className="text-xs sm:text-sm text-muted-foreground truncate">
|
|
Professional audio editing in your browser
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
title="Settings"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
</Button>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<AudioEditor />
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border mt-8 sm:mt-12">
|
|
<div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">
|
|
<p>
|
|
Powered by{' '}
|
|
<a
|
|
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
Web Audio API
|
|
</a>
|
|
{' '}and{' '}
|
|
<a
|
|
href="https://nextjs.org"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
Next.js 16
|
|
</a>
|
|
</p>
|
|
<p className="mt-2">
|
|
All audio processing happens locally in your browser. No files are uploaded.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</ToastProvider>
|
|
);
|
|
}
|