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>

components/editor/FileUpload.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import * as React from 'react';
+import { Upload, Music } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { isSupportedAudioFormat } from '@/lib/audio/decoder';
+
+export interface FileUploadProps {
+  onFileSelect: (file: File) => void;
+  className?: string;
+}
+
+export function FileUpload({ onFileSelect, className }: FileUploadProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    const audioFile = files.find(isSupportedAudioFormat);
+
+    if (audioFile) {
+      onFileSelect(audioFile);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && isSupportedAudioFormat(file)) {
+      onFileSelect(file);
+    }
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col items-center justify-center w-full p-8 border-2 border-dashed rounded-lg transition-colors cursor-pointer',
+        isDragging
+          ? 'border-primary bg-primary/10'
+          : 'border-border hover:border-primary/50 hover:bg-accent/50',
+        className
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      onClick={handleClick}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="audio/*"
+        onChange={handleFileChange}
+        className="hidden"
+      />
+
+      <div className="flex flex-col items-center gap-4">
+        {isDragging ? (
+          <Upload className="h-12 w-12 text-primary animate-pulseSubtle" />
+        ) : (
+          <Music className="h-12 w-12 text-muted-foreground" />
+        )}
+
+        <div className="text-center">
+          <p className="text-lg font-medium text-foreground">
+            {isDragging ? 'Drop your audio file here' : 'Upload Audio File'}
+          </p>
+          <p className="text-sm text-muted-foreground mt-1">
+            Click to browse or drag and drop
+          </p>
+          <p className="text-xs text-muted-foreground mt-2">
+            Supported formats: WAV, MP3, OGG, FLAC, AAC, M4A
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}