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>

lib/hooks/useAudioPlayer.ts

@@ -0,0 +1,194 @@
+'use client';
+
+import * as React from 'react';
+import { AudioPlayer } from '@/lib/audio/player';
+import { decodeAudioFile, formatDuration } from '@/lib/audio/decoder';
+
+export interface UseAudioPlayerReturn {
+  // File management
+  loadFile: (file: File) => Promise<void>;
+  clearFile: () => void;
+
+  // Playback controls
+  play: () => Promise<void>;
+  pause: () => void;
+  stop: () => void;
+  seek: (time: number) => Promise<void>;
+
+  // Volume control
+  setVolume: (volume: number) => void;
+
+  // State
+  isPlaying: boolean;
+  isPaused: boolean;
+  currentTime: number;
+  duration: number;
+  volume: number;
+  audioBuffer: AudioBuffer | null;
+  fileName: string | null;
+  isLoading: boolean;
+  error: string | null;
+
+  // Formatted values
+  currentTimeFormatted: string;
+  durationFormatted: string;
+}
+
+export function useAudioPlayer(): UseAudioPlayerReturn {
+  const [player, setPlayer] = React.useState<AudioPlayer | null>(null);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [isPaused, setIsPaused] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const [volume, setVolumeState] = React.useState(1);
+  const [audioBuffer, setAudioBuffer] = React.useState<AudioBuffer | null>(null);
+  const [fileName, setFileName] = React.useState<string | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // Initialize player on client side only
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setPlayer(new AudioPlayer());
+    }
+  }, []);
+
+  // Update current time while playing
+  React.useEffect(() => {
+    if (!isPlaying || !player) return;
+
+    const interval = setInterval(() => {
+      const state = player.getState();
+      setCurrentTime(state.currentTime);
+
+      // Stop when reaching the end
+      if (state.currentTime >= state.duration) {
+        setIsPlaying(false);
+        setIsPaused(false);
+        setCurrentTime(0);
+      }
+    }, 50); // Update 20 times per second
+
+    return () => clearInterval(interval);
+  }, [isPlaying, player]);
+
+  const loadFile = React.useCallback(
+    async (file: File) => {
+      if (!player) return;
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const buffer = await decodeAudioFile(file);
+        player.loadBuffer(buffer);
+
+        setAudioBuffer(buffer);
+        setFileName(file.name);
+        setDuration(buffer.duration);
+        setCurrentTime(0);
+        setIsPlaying(false);
+        setIsPaused(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load audio file');
+        console.error('Error loading audio file:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [player]
+  );
+
+  const clearFile = React.useCallback(() => {
+    if (!player) return;
+
+    player.stop();
+    setAudioBuffer(null);
+    setFileName(null);
+    setDuration(0);
+    setCurrentTime(0);
+    setIsPlaying(false);
+    setIsPaused(false);
+    setError(null);
+  }, [player]);
+
+  const play = React.useCallback(async () => {
+    if (!player) return;
+
+    try {
+      await player.play();
+      setIsPlaying(true);
+      setIsPaused(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to play audio');
+      console.error('Error playing audio:', err);
+    }
+  }, [player]);
+
+  const pause = React.useCallback(() => {
+    if (!player) return;
+
+    player.pause();
+    setIsPlaying(false);
+    setIsPaused(true);
+  }, [player]);
+
+  const stop = React.useCallback(() => {
+    if (!player) return;
+
+    player.stop();
+    setIsPlaying(false);
+    setIsPaused(false);
+    setCurrentTime(0);
+  }, [player]);
+
+  const seek = React.useCallback(
+    async (time: number) => {
+      if (!player) return;
+
+      await player.seek(time);
+      setCurrentTime(time);
+    },
+    [player]
+  );
+
+  const setVolume = React.useCallback(
+    (vol: number) => {
+      if (!player) return;
+
+      player.setVolume(vol);
+      setVolumeState(vol);
+    },
+    [player]
+  );
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      if (player) {
+        player.dispose();
+      }
+    };
+  }, [player]);
+
+  return {
+    loadFile,
+    clearFile,
+    play,
+    pause,
+    stop,
+    seek,
+    setVolume,
+    isPlaying,
+    isPaused,
+    currentTime,
+    duration,
+    volume,
+    audioBuffer,
+    fileName,
+    isLoading,
+    error,
+    currentTimeFormatted: formatDuration(currentTime),
+    durationFormatted: formatDuration(duration),
+  };
+}