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/AudioInfo.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import * as React from 'react';
+import { FileAudio, X } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { formatFileSize, formatDuration } from '@/lib/audio/decoder';
+import { cn } from '@/lib/utils/cn';
+
+export interface AudioInfoProps {
+  fileName: string;
+  audioBuffer: AudioBuffer;
+  onClear?: () => void;
+  className?: string;
+}
+
+export function AudioInfo({ fileName, audioBuffer, onClear, className }: AudioInfoProps) {
+  const fileSize = audioBuffer.length * audioBuffer.numberOfChannels * 4; // Approximate size in bytes
+
+  return (
+    <Card className={cn('', className)}>
+      <CardContent className="p-4">
+        <div className="flex items-start gap-3">
+          <FileAudio className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
+
+          <div className="flex-1 min-w-0 space-y-2">
+            <div className="flex items-start justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <h3 className="font-medium text-foreground truncate" title={fileName}>
+                  {fileName}
+                </h3>
+              </div>
+              {onClear && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={onClear}
+                  className="h-8 w-8 flex-shrink-0"
+                  title="Clear audio"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-muted-foreground">
+              <div>
+                <span className="font-medium">Duration:</span>{' '}
+                {formatDuration(audioBuffer.duration)}
+              </div>
+              <div>
+                <span className="font-medium">Sample Rate:</span>{' '}
+                {audioBuffer.sampleRate.toLocaleString()} Hz
+              </div>
+              <div>
+                <span className="font-medium">Channels:</span>{' '}
+                {audioBuffer.numberOfChannels === 1 ? 'Mono' : audioBuffer.numberOfChannels === 2 ? 'Stereo' : `${audioBuffer.numberOfChannels} channels`}
+              </div>
+              <div>
+                <span className="font-medium">Size:</span>{' '}
+                {formatFileSize(fileSize)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}