feat: implement Phase 4 - selection and editing features

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>
This commit is contained in:
2025-11-17 15:50:42 +01:00
parent 5cf9a69056
commit ed9ac0b24f
6 changed files with 656 additions and 12 deletions

View File

@@ -7,6 +7,7 @@ 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
@@ -99,6 +100,21 @@ export function useAudioPlayer(): UseAudioPlayerReturn {
[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;
@@ -173,6 +189,7 @@ export function useAudioPlayer(): UseAudioPlayerReturn {
return {
loadFile,
loadBuffer,
clearFile,
play,
pause,