feat: implement medium effort features - markers, web workers, and bezier automation
Implemented three major medium effort features to enhance the audio editor: **1. Region Markers System** - Add marker type definitions supporting point markers and regions - Create useMarkers hook for marker state management - Build MarkerTimeline component for visual marker display - Create MarkerDialog component for adding/editing markers - Add keyboard shortcuts: M (add marker), Shift+M (next), Shift+Ctrl+M (previous) - Support marker navigation, editing, and deletion **2. Web Worker for Computations** - Create audio worker for offloading heavy computations - Implement worker functions: generatePeaks, generateMinMaxPeaks, normalizePeaks, analyzeAudio, findPeak - Build useAudioWorker hook for easy worker integration - Integrate worker into Waveform component with peak caching - Significantly improve UI responsiveness during waveform generation **3. Bezier Curve Automation** - Enhance interpolateAutomationValue to support Bezier curves - Implement cubic Bezier interpolation with control handles - Add createSmoothHandles for auto-smooth curve generation - Add generateBezierCurvePoints for smooth curve rendering - Support bezier alongside existing linear and step curves All features are type-safe and integrate seamlessly with the existing codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -127,7 +127,14 @@ export function interpolateAutomationValue(
|
||||
return prevPoint.value;
|
||||
}
|
||||
|
||||
// Linear interpolation
|
||||
// Handle bezier curve
|
||||
if (prevPoint.curve === 'bezier') {
|
||||
const timeDelta = nextPoint.time - prevPoint.time;
|
||||
const t = (time - prevPoint.time) / timeDelta;
|
||||
return interpolateBezier(prevPoint, nextPoint, t);
|
||||
}
|
||||
|
||||
// Linear interpolation (default)
|
||||
const timeDelta = nextPoint.time - prevPoint.time;
|
||||
const valueDelta = nextPoint.value - prevPoint.value;
|
||||
const progress = (time - prevPoint.time) / timeDelta;
|
||||
@@ -139,6 +146,117 @@ export function interpolateAutomationValue(
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interpolate value using cubic Bezier curve
|
||||
* Uses the control handles from both points to create smooth curves
|
||||
*/
|
||||
function interpolateBezier(
|
||||
p0: AutomationPoint,
|
||||
p1: AutomationPoint,
|
||||
t: number
|
||||
): number {
|
||||
// Default handle positions if not specified
|
||||
// Out handle defaults to 1/3 towards next point
|
||||
// In handle defaults to 1/3 back from current point
|
||||
const timeDelta = p1.time - p0.time;
|
||||
|
||||
// Control point 1 (out handle from p0)
|
||||
const c1x = p0.handleOut?.x ?? timeDelta / 3;
|
||||
const c1y = p0.handleOut?.y ?? 0;
|
||||
|
||||
// Control point 2 (in handle from p1)
|
||||
const c2x = p1.handleIn?.x ?? -timeDelta / 3;
|
||||
const c2y = p1.handleIn?.y ?? 0;
|
||||
|
||||
// Convert handles to absolute positions
|
||||
const cp1Value = p0.value + c1y;
|
||||
const cp2Value = p1.value + c2y;
|
||||
|
||||
// Cubic Bezier formula: B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃
|
||||
const mt = 1 - t;
|
||||
const mt2 = mt * mt;
|
||||
const mt3 = mt2 * mt;
|
||||
const t2 = t * t;
|
||||
const t3 = t2 * t;
|
||||
|
||||
const value =
|
||||
mt3 * p0.value +
|
||||
3 * mt2 * t * cp1Value +
|
||||
3 * mt * t2 * cp2Value +
|
||||
t3 * p1.value;
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create smooth bezier handles for a point based on surrounding points
|
||||
* This creates an "auto-smooth" effect similar to DAWs
|
||||
*/
|
||||
export function createSmoothHandles(
|
||||
prevPoint: AutomationPoint | null,
|
||||
currentPoint: AutomationPoint,
|
||||
nextPoint: AutomationPoint | null
|
||||
): { handleIn: { x: number; y: number }; handleOut: { x: number; y: number } } {
|
||||
// If no surrounding points, return horizontal handles
|
||||
if (!prevPoint && !nextPoint) {
|
||||
return {
|
||||
handleIn: { x: -0.1, y: 0 },
|
||||
handleOut: { x: 0.1, y: 0 },
|
||||
};
|
||||
}
|
||||
|
||||
// Calculate slope from surrounding points
|
||||
let slope = 0;
|
||||
|
||||
if (prevPoint && nextPoint) {
|
||||
// Use average slope from both neighbors
|
||||
const timeDelta = nextPoint.time - prevPoint.time;
|
||||
const valueDelta = nextPoint.value - prevPoint.value;
|
||||
slope = valueDelta / timeDelta;
|
||||
} else if (nextPoint) {
|
||||
// Only have next point
|
||||
const timeDelta = nextPoint.time - currentPoint.time;
|
||||
const valueDelta = nextPoint.value - currentPoint.value;
|
||||
slope = valueDelta / timeDelta;
|
||||
} else if (prevPoint) {
|
||||
// Only have previous point
|
||||
const timeDelta = currentPoint.time - prevPoint.time;
|
||||
const valueDelta = currentPoint.value - prevPoint.value;
|
||||
slope = valueDelta / timeDelta;
|
||||
}
|
||||
|
||||
// Create handles with 1/3 distance to neighbors
|
||||
const handleDistance = 0.1; // Fixed distance for smooth curves
|
||||
const handleY = slope * handleDistance;
|
||||
|
||||
return {
|
||||
handleIn: { x: -handleDistance, y: -handleY },
|
||||
handleOut: { x: handleDistance, y: handleY },
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate points along a bezier curve for rendering
|
||||
* Returns array of {time, value} points
|
||||
*/
|
||||
export function generateBezierCurvePoints(
|
||||
p0: AutomationPoint,
|
||||
p1: AutomationPoint,
|
||||
numPoints: number = 50
|
||||
): Array<{ time: number; value: number }> {
|
||||
const points: Array<{ time: number; value: number }> = [];
|
||||
const timeDelta = p1.time - p0.time;
|
||||
|
||||
for (let i = 0; i <= numPoints; i++) {
|
||||
const t = i / numPoints;
|
||||
const time = p0.time + t * timeDelta;
|
||||
const value = interpolateBezier(p0, p1, t);
|
||||
points.push({ time, value });
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply automation value to track parameter
|
||||
*/
|
||||
|
||||
138
lib/hooks/useAudioWorker.ts
Normal file
138
lib/hooks/useAudioWorker.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useCallback } from 'react';
|
||||
import type { WorkerMessage, WorkerResponse } from '@/lib/workers/audio.worker';
|
||||
|
||||
/**
|
||||
* Hook to use the audio Web Worker for heavy computations
|
||||
* Automatically manages worker lifecycle and message passing
|
||||
*/
|
||||
export function useAudioWorker() {
|
||||
const workerRef = useRef<Worker | null>(null);
|
||||
const callbacksRef = useRef<Map<string, (result: any, error?: string) => void>>(new Map());
|
||||
const messageIdRef = useRef(0);
|
||||
|
||||
// Initialize worker
|
||||
useEffect(() => {
|
||||
// Create worker from the audio worker file
|
||||
workerRef.current = new Worker(
|
||||
new URL('../workers/audio.worker.ts', import.meta.url),
|
||||
{ type: 'module' }
|
||||
);
|
||||
|
||||
// Handle messages from worker
|
||||
workerRef.current.onmessage = (event: MessageEvent<WorkerResponse>) => {
|
||||
const { id, result, error } = event.data;
|
||||
const callback = callbacksRef.current.get(id);
|
||||
|
||||
if (callback) {
|
||||
callback(result, error);
|
||||
callbacksRef.current.delete(id);
|
||||
}
|
||||
};
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.terminate();
|
||||
workerRef.current = null;
|
||||
}
|
||||
callbacksRef.current.clear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Send message to worker
|
||||
const sendMessage = useCallback(
|
||||
<T = any>(type: WorkerMessage['type'], payload: any): Promise<T> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!workerRef.current) {
|
||||
reject(new Error('Worker not initialized'));
|
||||
return;
|
||||
}
|
||||
|
||||
const id = `msg-${++messageIdRef.current}`;
|
||||
const message: WorkerMessage = { id, type, payload };
|
||||
|
||||
callbacksRef.current.set(id, (result, error) => {
|
||||
if (error) {
|
||||
reject(new Error(error));
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
|
||||
workerRef.current.postMessage(message);
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// API methods
|
||||
const generatePeaks = useCallback(
|
||||
async (channelData: Float32Array, width: number): Promise<Float32Array> => {
|
||||
const result = await sendMessage<Float32Array>('generatePeaks', {
|
||||
channelData,
|
||||
width,
|
||||
});
|
||||
return new Float32Array(result);
|
||||
},
|
||||
[sendMessage]
|
||||
);
|
||||
|
||||
const generateMinMaxPeaks = useCallback(
|
||||
async (
|
||||
channelData: Float32Array,
|
||||
width: number
|
||||
): Promise<{ min: Float32Array; max: Float32Array }> => {
|
||||
const result = await sendMessage<{ min: Float32Array; max: Float32Array }>(
|
||||
'generateMinMaxPeaks',
|
||||
{ channelData, width }
|
||||
);
|
||||
return {
|
||||
min: new Float32Array(result.min),
|
||||
max: new Float32Array(result.max),
|
||||
};
|
||||
},
|
||||
[sendMessage]
|
||||
);
|
||||
|
||||
const normalizePeaks = useCallback(
|
||||
async (peaks: Float32Array, targetMax: number = 1): Promise<Float32Array> => {
|
||||
const result = await sendMessage<Float32Array>('normalizePeaks', {
|
||||
peaks,
|
||||
targetMax,
|
||||
});
|
||||
return new Float32Array(result);
|
||||
},
|
||||
[sendMessage]
|
||||
);
|
||||
|
||||
const analyzeAudio = useCallback(
|
||||
async (
|
||||
channelData: Float32Array
|
||||
): Promise<{
|
||||
peak: number;
|
||||
rms: number;
|
||||
crestFactor: number;
|
||||
dynamicRange: number;
|
||||
}> => {
|
||||
return sendMessage('analyzeAudio', { channelData });
|
||||
},
|
||||
[sendMessage]
|
||||
);
|
||||
|
||||
const findPeak = useCallback(
|
||||
async (channelData: Float32Array): Promise<number> => {
|
||||
return sendMessage<number>('findPeak', { channelData });
|
||||
},
|
||||
[sendMessage]
|
||||
);
|
||||
|
||||
return {
|
||||
generatePeaks,
|
||||
generateMinMaxPeaks,
|
||||
normalizePeaks,
|
||||
analyzeAudio,
|
||||
findPeak,
|
||||
};
|
||||
}
|
||||
70
lib/hooks/useMarkers.ts
Normal file
70
lib/hooks/useMarkers.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import type { Marker, CreateMarkerInput } from '@/types/marker';
|
||||
|
||||
export function useMarkers() {
|
||||
const [markers, setMarkers] = useState<Marker[]>([]);
|
||||
|
||||
const addMarker = useCallback((input: CreateMarkerInput): Marker => {
|
||||
const marker: Marker = {
|
||||
...input,
|
||||
id: `marker-${Date.now()}-${Math.random()}`,
|
||||
};
|
||||
setMarkers((prev) => [...prev, marker].sort((a, b) => a.time - b.time));
|
||||
return marker;
|
||||
}, []);
|
||||
|
||||
const updateMarker = useCallback((id: string, updates: Partial<Marker>) => {
|
||||
setMarkers((prev) => {
|
||||
const updated = prev.map((m) =>
|
||||
m.id === id ? { ...m, ...updates } : m
|
||||
);
|
||||
// Re-sort if time changed
|
||||
if ('time' in updates) {
|
||||
return updated.sort((a, b) => a.time - b.time);
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const removeMarker = useCallback((id: string) => {
|
||||
setMarkers((prev) => prev.filter((m) => m.id !== id));
|
||||
}, []);
|
||||
|
||||
const clearMarkers = useCallback(() => {
|
||||
setMarkers([]);
|
||||
}, []);
|
||||
|
||||
const getMarkerAt = useCallback((time: number, tolerance: number = 0.1): Marker | undefined => {
|
||||
return markers.find((m) => {
|
||||
if (m.type === 'point') {
|
||||
return Math.abs(m.time - time) <= tolerance;
|
||||
} else {
|
||||
// For regions, check if time is within the region
|
||||
return m.endTime !== undefined && time >= m.time && time <= m.endTime;
|
||||
}
|
||||
});
|
||||
}, [markers]);
|
||||
|
||||
const getNextMarker = useCallback((time: number): Marker | undefined => {
|
||||
return markers.find((m) => m.time > time);
|
||||
}, [markers]);
|
||||
|
||||
const getPreviousMarker = useCallback((time: number): Marker | undefined => {
|
||||
const previous = markers.filter((m) => m.time < time);
|
||||
return previous[previous.length - 1];
|
||||
}, [markers]);
|
||||
|
||||
return {
|
||||
markers,
|
||||
addMarker,
|
||||
updateMarker,
|
||||
removeMarker,
|
||||
clearMarkers,
|
||||
getMarkerAt,
|
||||
getNextMarker,
|
||||
getPreviousMarker,
|
||||
setMarkers,
|
||||
};
|
||||
}
|
||||
200
lib/workers/audio.worker.ts
Normal file
200
lib/workers/audio.worker.ts
Normal file
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* Web Worker for heavy audio computations
|
||||
* Offloads waveform generation, analysis, and normalization to background thread
|
||||
*/
|
||||
|
||||
export interface WorkerMessage {
|
||||
id: string;
|
||||
type: 'generatePeaks' | 'generateMinMaxPeaks' | 'normalizePeaks' | 'analyzeAudio' | 'findPeak';
|
||||
payload: any;
|
||||
}
|
||||
|
||||
export interface WorkerResponse {
|
||||
id: string;
|
||||
type: string;
|
||||
result?: any;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// Message handler
|
||||
self.onmessage = (event: MessageEvent<WorkerMessage>) => {
|
||||
const { id, type, payload } = event.data;
|
||||
|
||||
try {
|
||||
let result: any;
|
||||
|
||||
switch (type) {
|
||||
case 'generatePeaks':
|
||||
result = generatePeaks(
|
||||
payload.channelData,
|
||||
payload.width
|
||||
);
|
||||
break;
|
||||
|
||||
case 'generateMinMaxPeaks':
|
||||
result = generateMinMaxPeaks(
|
||||
payload.channelData,
|
||||
payload.width
|
||||
);
|
||||
break;
|
||||
|
||||
case 'normalizePeaks':
|
||||
result = normalizePeaks(
|
||||
payload.peaks,
|
||||
payload.targetMax
|
||||
);
|
||||
break;
|
||||
|
||||
case 'analyzeAudio':
|
||||
result = analyzeAudio(payload.channelData);
|
||||
break;
|
||||
|
||||
case 'findPeak':
|
||||
result = findPeak(payload.channelData);
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Unknown worker message type: ${type}`);
|
||||
}
|
||||
|
||||
const response: WorkerResponse = { id, type, result };
|
||||
self.postMessage(response);
|
||||
} catch (error) {
|
||||
const response: WorkerResponse = {
|
||||
id,
|
||||
type,
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
};
|
||||
self.postMessage(response);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate waveform peaks from channel data
|
||||
*/
|
||||
function generatePeaks(channelData: Float32Array, width: number): Float32Array {
|
||||
const peaks = new Float32Array(width);
|
||||
const samplesPerPeak = Math.floor(channelData.length / width);
|
||||
|
||||
for (let i = 0; i < width; i++) {
|
||||
const start = i * samplesPerPeak;
|
||||
const end = Math.min(start + samplesPerPeak, channelData.length);
|
||||
|
||||
let max = 0;
|
||||
for (let j = start; j < end; j++) {
|
||||
const abs = Math.abs(channelData[j]);
|
||||
if (abs > max) {
|
||||
max = abs;
|
||||
}
|
||||
}
|
||||
|
||||
peaks[i] = max;
|
||||
}
|
||||
|
||||
return peaks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate min/max peaks for more detailed waveform visualization
|
||||
*/
|
||||
function generateMinMaxPeaks(
|
||||
channelData: Float32Array,
|
||||
width: number
|
||||
): { min: Float32Array; max: Float32Array } {
|
||||
const min = new Float32Array(width);
|
||||
const max = new Float32Array(width);
|
||||
const samplesPerPeak = Math.floor(channelData.length / width);
|
||||
|
||||
for (let i = 0; i < width; i++) {
|
||||
const start = i * samplesPerPeak;
|
||||
const end = Math.min(start + samplesPerPeak, channelData.length);
|
||||
|
||||
let minVal = 1;
|
||||
let maxVal = -1;
|
||||
|
||||
for (let j = start; j < end; j++) {
|
||||
const val = channelData[j];
|
||||
if (val < minVal) minVal = val;
|
||||
if (val > maxVal) maxVal = val;
|
||||
}
|
||||
|
||||
min[i] = minVal;
|
||||
max[i] = maxVal;
|
||||
}
|
||||
|
||||
return { min, max };
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize peaks to a given range
|
||||
*/
|
||||
function normalizePeaks(peaks: Float32Array, targetMax: number = 1): Float32Array {
|
||||
const normalized = new Float32Array(peaks.length);
|
||||
let max = 0;
|
||||
|
||||
// Find max value
|
||||
for (let i = 0; i < peaks.length; i++) {
|
||||
if (peaks[i] > max) {
|
||||
max = peaks[i];
|
||||
}
|
||||
}
|
||||
|
||||
// Normalize
|
||||
const scale = max > 0 ? targetMax / max : 1;
|
||||
for (let i = 0; i < peaks.length; i++) {
|
||||
normalized[i] = peaks[i] * scale;
|
||||
}
|
||||
|
||||
return normalized;
|
||||
}
|
||||
|
||||
/**
|
||||
* Analyze audio data for statistics
|
||||
*/
|
||||
function analyzeAudio(channelData: Float32Array): {
|
||||
peak: number;
|
||||
rms: number;
|
||||
crestFactor: number;
|
||||
dynamicRange: number;
|
||||
} {
|
||||
let peak = 0;
|
||||
let sumSquares = 0;
|
||||
let min = 1;
|
||||
let max = -1;
|
||||
|
||||
for (let i = 0; i < channelData.length; i++) {
|
||||
const val = channelData[i];
|
||||
const abs = Math.abs(val);
|
||||
|
||||
if (abs > peak) peak = abs;
|
||||
if (val < min) min = val;
|
||||
if (val > max) max = val;
|
||||
|
||||
sumSquares += val * val;
|
||||
}
|
||||
|
||||
const rms = Math.sqrt(sumSquares / channelData.length);
|
||||
const crestFactor = rms > 0 ? peak / rms : 0;
|
||||
const dynamicRange = max - min;
|
||||
|
||||
return {
|
||||
peak,
|
||||
rms,
|
||||
crestFactor,
|
||||
dynamicRange,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Find peak value in channel data
|
||||
*/
|
||||
function findPeak(channelData: Float32Array): number {
|
||||
let peak = 0;
|
||||
|
||||
for (let i = 0; i < channelData.length; i++) {
|
||||
const abs = Math.abs(channelData[i]);
|
||||
if (abs > peak) peak = abs;
|
||||
}
|
||||
|
||||
return peak;
|
||||
}
|
||||
Reference in New Issue
Block a user