Added comprehensive audio editing capabilities: - Region selection with Shift+drag on waveform - Visual selection feedback with blue overlay and borders - AudioBuffer manipulation utilities (cut, copy, paste, delete, trim) - EditControls UI component with edit buttons - Keyboard shortcuts (Ctrl+A, Ctrl+X, Ctrl+C, Ctrl+V, Delete, Escape) - Clipboard management for cut/copy/paste operations - Updated useAudioPlayer hook with loadBuffer method New files: - types/selection.ts - Selection and ClipboardData interfaces - lib/audio/buffer-utils.ts - AudioBuffer manipulation utilities - components/editor/EditControls.tsx - Edit controls UI Modified files: - components/editor/Waveform.tsx - Added selection support - components/editor/AudioEditor.tsx - Integrated edit operations - lib/hooks/useAudioPlayer.ts - Added loadBuffer method 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
212 lines
4.9 KiB
TypeScript
212 lines
4.9 KiB
TypeScript
'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>;
|
|
loadBuffer: (buffer: AudioBuffer, name?: string) => 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 loadBuffer = React.useCallback(
|
|
(buffer: AudioBuffer, name?: string) => {
|
|
if (!player) return;
|
|
|
|
player.loadBuffer(buffer);
|
|
setAudioBuffer(buffer);
|
|
if (name) setFileName(name);
|
|
setDuration(buffer.duration);
|
|
setCurrentTime(0);
|
|
setIsPlaying(false);
|
|
setIsPaused(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,
|
|
loadBuffer,
|
|
clearFile,
|
|
play,
|
|
pause,
|
|
stop,
|
|
seek,
|
|
setVolume,
|
|
isPlaying,
|
|
isPaused,
|
|
currentTime,
|
|
duration,
|
|
volume,
|
|
audioBuffer,
|
|
fileName,
|
|
isLoading,
|
|
error,
|
|
currentTimeFormatted: formatDuration(currentTime),
|
|
durationFormatted: formatDuration(duration),
|
|
};
|
|
}
|