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>
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'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>
|
|
);
|
|
}
|