valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Ableton Live-style effects and complete automation system

Browse Source 
Enhanced visual design:
- Improved device rack container with darker background and inner shadow
- Device cards now have rounded corners, shadows, and colored indicators
- Better visual separation between enabled/disabled effects
- Active devices highlighted with accent border

Complete automation infrastructure (Phase 9):
- Created comprehensive type system for automation lanes and points
- Implemented AutomationPoint component with drag-and-drop editing
- Implemented AutomationHeader with mode controls (Read/Write/Touch/Latch)
- Implemented AutomationLane with canvas-based curve rendering
- Integrated automation lanes into Track component below effects
- Created automation playback engine with real-time interpolation
- Added automation data persistence to localStorage

Automation features:
- Add/remove automation points by clicking/double-clicking
- Drag points to change time and value
- Multiple automation modes (Read, Write, Touch, Latch)
- Linear and step curve types (bezier planned)
- Adjustable lane height (60-180px)
- Show/hide automation per lane
- Real-time value display at playhead
- Color-coded lanes by parameter type
- Keyboard delete support (Delete/Backspace)

Track type updates:
- Added automation field to Track interface
- Updated track creation to initialize empty automation
- Updated localStorage save/load to include automation data

Files created:
- components/automation/AutomationPoint.tsx
- components/automation/AutomationHeader.tsx
- components/automation/AutomationLane.tsx
- lib/audio/automation/utils.ts (helper functions)
- lib/audio/automation/playback.ts (playback engine)
- types/automation.ts (complete type system)

Files modified:
- components/effects/EffectDevice.tsx (Ableton-style visual improvements)
- components/tracks/Track.tsx (automation lanes integration)
- types/track.ts (automation field added)
- lib/audio/track-utils.ts (automation initialization)
- lib/hooks/useMultiTrack.ts (automation persistence)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-18 16:30:01 +01:00
parent dc9647731d
commit 9b1eedc379
11 changed files with 1179 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
components/automation/AutomationHeader.tsx Normal file
View File

@@ -0,0 +1,140 @@
'use client';
import * as React from 'react';
import { Eye, EyeOff, ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils/cn';
import type { AutomationMode } from '@/types/automation';
export interface AutomationHeaderProps {
parameterName: string;
currentValue?: number;
visible: boolean;
mode: AutomationMode;
color?: string;
onToggleVisible?: () => void;
onModeChange?: (mode: AutomationMode) => void;
onHeightChange?: (delta: number) => void;
className?: string;
formatter?: (value: number) => string;
}
const MODE_LABELS: Record<AutomationMode, string> = {
read: 'R',
write: 'W',
touch: 'T',
latch: 'L',
};
const MODE_COLORS: Record<AutomationMode, string> = {
read: 'text-muted-foreground',
write: 'text-red-500',
touch: 'text-yellow-500',
latch: 'text-orange-500',
};
export function AutomationHeader({
parameterName,
currentValue,
visible,
mode,
color,
onToggleVisible,
onModeChange,
onHeightChange,
className,
formatter,
}: AutomationHeaderProps) {
const modes: AutomationMode[] = ['read', 'write', 'touch', 'latch'];
const currentModeIndex = modes.indexOf(mode);
const handleCycleModeClick = () => {
if (!onModeChange) return;
const nextIndex = (currentModeIndex + 1) % modes.length;
onModeChange(modes[nextIndex]);
};
const formatValue = (value: number) => {
if (formatter) return formatter(value);
return value.toFixed(2);
};
return (
<div
className={cn(
'flex items-center gap-2 px-2 py-1 bg-muted/50 border-b border-border/30 flex-shrink-0',
className
)}
>
{/* Color indicator */}
{color && (
<div
className="w-1 h-4 rounded-full flex-shrink-0"
style={{ backgroundColor: color }}
/>
)}
{/* Parameter name */}
<span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">
{parameterName}
</span>
{/* Current value display */}
{currentValue !== undefined && (
<span className="text-[10px] font-mono text-muted-foreground px-1.5 py-0.5 bg-background/50 rounded">
{formatValue(currentValue)}
</span>
)}
{/* Automation mode button */}
<Button
variant="ghost"
size="icon-sm"
onClick={handleCycleModeClick}
title={`Automation mode: ${mode} (click to cycle)`}
className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[mode])}
>
{MODE_LABELS[mode]}
</Button>
{/* Height controls */}
{onHeightChange && (
<div className="flex flex-col gap-0 flex-shrink-0">
<Button
variant="ghost"
size="icon-sm"
onClick={() => onHeightChange(20)}
title="Increase lane height"
className="h-3 w-4 p-0"
>
<ChevronUp className="h-2.5 w-2.5" />
</Button>
<Button
variant="ghost"
size="icon-sm"
onClick={() => onHeightChange(-20)}
title="Decrease lane height"
className="h-3 w-4 p-0"
>
<ChevronDown className="h-2.5 w-2.5" />
</Button>
</div>
)}
{/* Show/hide toggle */}
<Button
variant="ghost"
size="icon-sm"
onClick={onToggleVisible}
title={visible ? 'Hide automation' : 'Show automation'}
className="h-5 w-5 flex-shrink-0"
>
{visible ? (
<Eye className="h-3 w-3" />
) : (
<EyeOff className="h-3 w-3 text-muted-foreground" />
)}
</Button>
</div>
);
}

337
components/automation/AutomationLane.tsx Normal file
View File

@@ -0,0 +1,337 @@
'use client';
import * as React from 'react';
import { cn } from '@/lib/utils/cn';
import type { AutomationLane as AutomationLaneType, AutomationPoint as AutomationPointType, AutomationMode } from '@/types/automation';
import { AutomationHeader } from './AutomationHeader';
import { AutomationPoint } from './AutomationPoint';
export interface AutomationLaneProps {
lane: AutomationLaneType;
duration: number; // Total timeline duration in seconds
zoom: number; // Zoom factor
currentTime?: number; // Playhead position
onUpdateLane?: (updates: Partial<AutomationLaneType>) => void;
onAddPoint?: (time: number, value: number) => void;
onUpdatePoint?: (pointId: string, updates: Partial<AutomationPointType>) => void;
onRemovePoint?: (pointId: string) => void;
className?: string;
}
export function AutomationLane({
lane,
duration,
zoom,
currentTime = 0,
onUpdateLane,
onAddPoint,
onUpdatePoint,
onRemovePoint,
className,
}: AutomationLaneProps) {
const canvasRef = React.useRef<HTMLCanvasElement>(null);
const containerRef = React.useRef<HTMLDivElement>(null);
const [selectedPointId, setSelectedPointId] = React.useState<string | null>(null);
const [isDraggingPoint, setIsDraggingPoint] = React.useState(false);
// Convert time to X pixel position
const timeToX = React.useCallback(
(time: number): number => {
if (!containerRef.current) return 0;
const width = containerRef.current.clientWidth;
return (time / duration) * width * zoom;
},
[duration, zoom]
);
// Convert value (0-1) to Y pixel position (inverted: 0 at bottom, 1 at top)
const valueToY = React.useCallback(
(value: number): number => {
if (!containerRef.current) return 0;
const height = lane.height;
return height * (1 - value);
},
[lane.height]
);
// Convert X pixel position to time
const xToTime = React.useCallback(
(x: number): number => {
if (!containerRef.current) return 0;
const width = containerRef.current.clientWidth;
return (x / (width * zoom)) * duration;
},
[duration, zoom]
);
// Convert Y pixel position to value (0-1)
const yToValue = React.useCallback(
(y: number): number => {
const height = lane.height;
return Math.max(0, Math.min(1, 1 - y / height));
},
[lane.height]
);
// Draw automation curve
React.useEffect(() => {
if (!canvasRef.current || !lane.visible) return;
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
if (!ctx) return;
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
const width = rect.width;
const height = rect.height;
// Clear canvas
ctx.clearRect(0, 0, width, height);
// Background
ctx.fillStyle = getComputedStyle(canvas).getPropertyValue('--color-background') || 'rgb(15, 23, 42)';
ctx.fillRect(0, 0, width, height);
// Grid lines (horizontal value guides)
ctx.strokeStyle = 'rgba(148, 163, 184, 0.1)';
ctx.lineWidth = 1;
for (let i = 0; i <= 4; i++) {
const y = (height / 4) * i;
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(width, y);
ctx.stroke();
}
// Draw automation curve
if (lane.points.length > 0) {
const color = lane.color || 'rgb(59, 130, 246)';
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.beginPath();
// Sort points by time
const sortedPoints = [...lane.points].sort((a, b) => a.time - b.time);
// Draw lines between points
for (let i = 0; i < sortedPoints.length; i++) {
const point = sortedPoints[i];
const x = timeToX(point.time);
const y = valueToY(point.value);
if (i === 0) {
// Start from left edge at first point's value
ctx.moveTo(0, y);
ctx.lineTo(x, y);
} else {
const prevPoint = sortedPoints[i - 1];
const prevX = timeToX(prevPoint.time);
const prevY = valueToY(prevPoint.value);
if (point.curve === 'step') {
// Step curve: horizontal then vertical
ctx.lineTo(x, prevY);
ctx.lineTo(x, y);
} else {
// Linear curve (bezier not implemented yet)
ctx.lineTo(x, y);
}
}
// Extend to right edge from last point
if (i === sortedPoints.length - 1) {
ctx.lineTo(width, y);
}
}
ctx.stroke();
// Fill area under curve
ctx.globalAlpha = 0.2;
ctx.fillStyle = color;
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1.0;
}
// Draw playhead
if (currentTime >= 0 && duration > 0) {
const playheadX = timeToX(currentTime);
if (playheadX >= 0 && playheadX <= width) {
ctx.strokeStyle = 'rgba(239, 68, 68, 0.8)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(playheadX, 0);
ctx.lineTo(playheadX, height);
ctx.stroke();
}
}
}, [lane, duration, zoom, currentTime, timeToX, valueToY]);
// Handle canvas click to add point
const handleCanvasClick = React.useCallback(
(e: React.MouseEvent<HTMLCanvasElement>) => {
if (isDraggingPoint || !onAddPoint) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const time = xToTime(x);
const value = yToValue(y);
onAddPoint(time, value);
},
[isDraggingPoint, onAddPoint, xToTime, yToValue]
);
// Handle point drag
const handlePointDragStart = React.useCallback((pointId: string) => {
setIsDraggingPoint(true);
setSelectedPointId(pointId);
}, []);
const handlePointDrag = React.useCallback(
(pointId: string, deltaX: number, deltaY: number) => {
if (!containerRef.current || !onUpdatePoint) return;
const point = lane.points.find((p) => p.id === pointId);
if (!point) return;
const rect = containerRef.current.getBoundingClientRect();
const width = rect.width;
// Calculate new time and value
const timePerPixel = duration / (width * zoom);
const valuePerPixel = 1 / lane.height;
const newTime = Math.max(0, Math.min(duration, point.time + deltaX * timePerPixel));
const newValue = Math.max(0, Math.min(1, point.value - deltaY * valuePerPixel));
onUpdatePoint(pointId, { time: newTime, value: newValue });
},
[lane.points, lane.height, duration, zoom, onUpdatePoint]
);
const handlePointDragEnd = React.useCallback(() => {
setIsDraggingPoint(false);
}, []);
// Handle point click (select)
const handlePointClick = React.useCallback((pointId: string, event: React.MouseEvent) => {
event.stopPropagation();
setSelectedPointId(pointId);
}, []);
// Handle point double-click (delete)
const handlePointDoubleClick = React.useCallback(
(pointId: string) => {
if (onRemovePoint) {
onRemovePoint(pointId);
}
},
[onRemovePoint]
);
// Handle keyboard delete
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.key === 'Delete' || e.key === 'Backspace') && selectedPointId && onRemovePoint) {
e.preventDefault();
onRemovePoint(selectedPointId);
setSelectedPointId(null);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedPointId, onRemovePoint]);
// Get current value at playhead (interpolated)
const getCurrentValue = React.useCallback((): number | undefined => {
if (lane.points.length === 0) return undefined;
const sortedPoints = [...lane.points].sort((a, b) => a.time - b.time);
// Find surrounding points
let prevPoint = sortedPoints[0];
let nextPoint = sortedPoints[sortedPoints.length - 1];
for (let i = 0; i < sortedPoints.length - 1; i++) {
if (sortedPoints[i].time <= currentTime && sortedPoints[i + 1].time >= currentTime) {
prevPoint = sortedPoints[i];
nextPoint = sortedPoints[i + 1];
break;
}
}
// Interpolate
if (currentTime <= prevPoint.time) return prevPoint.value;
if (currentTime >= nextPoint.time) return nextPoint.value;
const timeDelta = nextPoint.time - prevPoint.time;
const valueDelta = nextPoint.value - prevPoint.value;
const progress = (currentTime - prevPoint.time) / timeDelta;
return prevPoint.value + valueDelta * progress;
}, [lane.points, currentTime]);
if (!lane.visible) return null;
return (
<div className={cn('flex flex-col border-b border-border/50', className)} style={{ height: lane.height + 30 }}>
{/* Header */}
<AutomationHeader
parameterName={lane.parameterName}
currentValue={getCurrentValue()}
visible={lane.visible}
mode={lane.mode}
color={lane.color}
onToggleVisible={() => onUpdateLane?.({ visible: !lane.visible })}
onModeChange={(mode: AutomationMode) => onUpdateLane?.({ mode })}
onHeightChange={(delta) => {
const newHeight = Math.max(60, Math.min(180, lane.height + delta));
onUpdateLane?.({ height: newHeight });
}}
formatter={lane.valueRange.formatter}
/>
{/* Lane canvas area */}
<div
ref={containerRef}
className="relative flex-1 bg-background/30 overflow-hidden cursor-crosshair"
style={{ height: lane.height }}
>
<canvas
ref={canvasRef}
className="absolute inset-0 w-full h-full"
onClick={handleCanvasClick}
/>
{/* Automation points */}
{lane.points.map((point) => (
<AutomationPoint
key={point.id}
point={point}
x={timeToX(point.time)}
y={valueToY(point.value)}
isSelected={selectedPointId === point.id}
onDragStart={handlePointDragStart}
onDrag={handlePointDrag}
onDragEnd={handlePointDragEnd}
onClick={handlePointClick}
onDoubleClick={handlePointDoubleClick}
/>
))}
</div>
</div>
);
}

123
components/automation/AutomationPoint.tsx Normal file
View File

@@ -0,0 +1,123 @@
'use client';
import * as React from 'react';
import { cn } from '@/lib/utils/cn';
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
export interface AutomationPointProps {
point: AutomationPointType;
x: number; // Pixel position
y: number; // Pixel position
isSelected?: boolean;
onDragStart?: (pointId: string, startX: number, startY: number) => void;
onDrag?: (pointId: string, deltaX: number, deltaY: number) => void;
onDragEnd?: (pointId: string) => void;
onClick?: (pointId: string, event: React.MouseEvent) => void;
onDoubleClick?: (pointId: string) => void;
}
export function AutomationPoint({
point,
x,
y,
isSelected = false,
onDragStart,
onDrag,
onDragEnd,
onClick,
onDoubleClick,
}: AutomationPointProps) {
const [isDragging, setIsDragging] = React.useState(false);
const dragStartRef = React.useRef({ x: 0, y: 0 });
const handleMouseDown = React.useCallback(
(e: React.MouseEvent) => {
if (e.button !== 0) return; // Only left click
e.stopPropagation();
setIsDragging(true);
dragStartRef.current = { x: e.clientX, y: e.clientY };
if (onDragStart) {
onDragStart(point.id, e.clientX, e.clientY);
}
},
[point.id, onDragStart]
);
const handleClick = React.useCallback(
(e: React.MouseEvent) => {
if (!isDragging && onClick) {
onClick(point.id, e);
}
},
[isDragging, point.id, onClick]
);
const handleDoubleClick = React.useCallback(
(e: React.MouseEvent) => {
e.stopPropagation();
if (onDoubleClick) {
onDoubleClick(point.id);
}
},
[point.id, onDoubleClick]
);
// Global mouse handlers
React.useEffect(() => {
if (!isDragging) return;
const handleMouseMove = (e: MouseEvent) => {
if (!isDragging) return;
const deltaX = e.clientX - dragStartRef.current.x;
const deltaY = e.clientY - dragStartRef.current.y;
if (onDrag) {
onDrag(point.id, deltaX, deltaY);
}
// Update drag start position for next delta calculation
dragStartRef.current = { x: e.clientX, y: e.clientY };
};
const handleMouseUp = () => {
if (isDragging) {
setIsDragging(false);
if (onDragEnd) {
onDragEnd(point.id);
}
}
};
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, point.id, onDrag, onDragEnd]);
return (
<div
className={cn(
'absolute rounded-full cursor-pointer transition-all select-none',
'hover:scale-125',
isDragging ? 'scale-125 z-10' : 'z-0',
isSelected
? 'w-3 h-3 bg-primary border-2 border-background shadow-lg'
: 'w-2.5 h-2.5 bg-primary/80 border border-background shadow-md'
)}
style={{
left: x - (isSelected || isDragging ? 6 : 5),
top: y - (isSelected || isDragging ? 6 : 5),
}}
onMouseDown={handleMouseDown}
onClick={handleClick}
onDoubleClick={handleDoubleClick}
title={`Time: ${point.time.toFixed(3)}s, Value: ${point.value.toFixed(3)}`}
/>
);
}

64
components/effects/EffectDevice.tsx
View File

@@ -25,40 +25,50 @@ export function EffectDevice({
return (
<div
className={cn(
'flex-shrink-0 flex flex-col h-full border-l border-border transition-all duration-200',
effect.enabled ? 'bg-accent/20' : 'bg-muted/20',
'flex-shrink-0 flex flex-col h-full transition-all duration-200 rounded-md overflow-hidden',
effect.enabled
? 'bg-card border border-border/50 shadow-md'
: 'bg-card/40 border border-border/30 shadow-sm opacity-60',
isExpanded ? 'min-w-96' : 'w-10'
)}
>
{!isExpanded ? (
/* Collapsed State - No Header */
<button
onClick={() => setIsExpanded(true)}
className="w-full h-full flex flex-col items-center justify-between py-1 hover:bg-primary/10 transition-colors group"
title={`Expand ${effect.name}`}
>
<ChevronRight className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-primary transition-colors" />
<span
className="flex-1 text-xs font-medium whitespace-nowrap text-muted-foreground group-hover:text-primary transition-colors"
style={{
writingMode: 'vertical-rl',
textOrientation: 'mixed',
}}
/* Collapsed State */
<>
{/* Colored top indicator */}
<div className={cn('h-0.5 w-full', effect.enabled ? 'bg-primary' : 'bg-muted-foreground/20')} />
<button
onClick={() => setIsExpanded(true)}
className="w-full h-full flex flex-col items-center justify-between py-1 hover:bg-primary/10 transition-colors group"
title={`Expand ${effect.name}`}
>
{effect.name}
</span>
<div
className={cn(
'w-1 h-1 rounded-full flex-shrink-0 mb-1',
effect.enabled ? 'bg-primary' : 'bg-muted-foreground/30'
)}
title={effect.enabled ? 'Enabled' : 'Disabled'}
/>
</button>
<ChevronRight className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-primary transition-colors" />
<span
className="flex-1 text-xs font-medium whitespace-nowrap text-muted-foreground group-hover:text-primary transition-colors"
style={{
writingMode: 'vertical-rl',
textOrientation: 'mixed',
}}
>
{effect.name}
</span>
<div
className={cn(
'w-1.5 h-1.5 rounded-full flex-shrink-0 mb-1',
effect.enabled ? 'bg-primary shadow-sm shadow-primary/50' : 'bg-muted-foreground/30'
)}
title={effect.enabled ? 'Enabled' : 'Disabled'}
/>
</button>
</>
) : (
<>
{/* Colored top indicator */}
<div className={cn('h-0.5 w-full', effect.enabled ? 'bg-primary' : 'bg-muted-foreground/20')} />
{/* Full-Width Header Row */}
<div className="flex items-center gap-1 px-2 py-1 border-b border-border bg-card/30 flex-shrink-0">
<div className="flex items-center gap-1 px-2 py-1.5 border-b border-border/50 bg-muted/30 flex-shrink-0">
<Button
variant="ghost"
size="icon-sm"
@@ -95,7 +105,7 @@ export function EffectDevice({
</div>
{/* Device Body */}
<div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
<div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-3 bg-card/50">
<EffectParameters effect={effect} onUpdateParameters={onUpdateParameters} />
</div>
</>

76
components/tracks/Track.tsx
View File

@@ -11,6 +11,9 @@ import { EffectDevice } from '@/components/effects/EffectDevice';
import { createEffect, type EffectType } from '@/lib/audio/effects/chain';
import { VerticalFader } from '@/components/ui/VerticalFader';
import { CircularKnob } from '@/components/ui/CircularKnob';
import { AutomationLane } from '@/components/automation/AutomationLane';
import type { AutomationLane as AutomationLaneType, AutomationPoint as AutomationPointType } from '@/types/automation';
import { createAutomationPoint } from '@/lib/audio/automation/utils';
export interface TrackProps {
track: TrackType;
@@ -589,12 +592,12 @@ export function Track({
</div>
</div>
{/* Bottom: Effects Section (Collapsible, Full Width) */}
{/* Bottom: Effects Section (Collapsible, Full Width) - Ableton Style */}
{!track.collapsed && (
<div className="bg-muted/50 border-b border-border/50">
<div className="bg-muted/80 border-b border-border shadow-inner">
{/* Effects Header - clickable to toggle */}
<div
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border/30"
onClick={() => setShowEffects(!showEffects)}
>
{showEffects ? (
@@ -642,8 +645,8 @@ export function Track({
{/* Horizontal scrolling device rack - expanded state */}
{showEffects && (
<div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70">
<div className="flex h-full">
<div className="h-48 overflow-x-auto custom-scrollbar bg-background/50 p-2">
<div className="flex h-full gap-2">
{track.effectChain.effects.length === 0 ? (
<div className="text-xs text-muted-foreground text-center py-8 w-full">
No devices. Click + to add an effect.
@@ -665,6 +668,69 @@ export function Track({
</div>
)}
{/* Automation Lanes */}
{!track.collapsed && track.automation?.showAutomation && (
<div className="bg-background/30">
{track.automation.lanes.map((lane) => (
<AutomationLane
key={lane.id}
lane={lane}
duration={duration}
zoom={zoom}
currentTime={currentTime}
onUpdateLane={(updates) => {
const updatedLanes = track.automation.lanes.map((l) =>
l.id === lane.id ? { ...l, ...updates } : l
);
onUpdateTrack(track.id, {
automation: { ...track.automation, lanes: updatedLanes },
});
}}
onAddPoint={(time, value) => {
const newPoint = createAutomationPoint({
time,
value,
curve: 'linear',
});
const updatedLanes = track.automation.lanes.map((l) =>
l.id === lane.id
? { ...l, points: [...l.points, newPoint] }
: l
);
onUpdateTrack(track.id, {
automation: { ...track.automation, lanes: updatedLanes },
});
}}
onUpdatePoint={(pointId, updates) => {
const updatedLanes = track.automation.lanes.map((l) =>
l.id === lane.id
? {
...l,
points: l.points.map((p) =>
p.id === pointId ? { ...p, ...updates } : p
),
}
: l
);
onUpdateTrack(track.id, {
automation: { ...track.automation, lanes: updatedLanes },
});
}}
onRemovePoint={(pointId) => {
const updatedLanes = track.automation.lanes.map((l) =>
l.id === lane.id
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
: l
);
onUpdateTrack(track.id, {
automation: { ...track.automation, lanes: updatedLanes },
});
}}
/>
))}
</div>
)}
{/* Effect Browser Dialog */}
<EffectBrowser
open={effectBrowserOpen}

167
lib/audio/automation/playback.ts Normal file
View File

@@ -0,0 +1,167 @@
/**
* Automation playback engine
* Applies automation to track parameters in real-time during playback
*/
import type { Track } from '@/types/track';
import type { AutomationLane, AutomationValue } from '@/types/automation';
import { interpolateAutomationValue, applyAutomationToTrack } from './utils';
/**
* Get all automation values at a specific time
*/
export function getAutomationValuesAtTime(
track: Track,
time: number
): AutomationValue[] {
if (!track.automation || track.automation.lanes.length === 0) {
return [];
}
const values: AutomationValue[] = [];
for (const lane of track.automation.lanes) {
// Skip lanes in write mode (don't apply during playback)
if (lane.mode === 'write') continue;
// Skip lanes with no points
if (lane.points.length === 0) continue;
const value = interpolateAutomationValue(lane.points, time);
values.push({
parameterId: lane.parameterId,
value,
time,
});
}
return values;
}
/**
* Apply automation values to a track
* Returns a new track object with automated parameters applied
*/
export function applyAutomationValues(
track: Track,
values: AutomationValue[]
): Track {
let updatedTrack = track;
for (const automation of values) {
updatedTrack = applyAutomationToTrack(
updatedTrack,
automation.parameterId,
automation.value
);
}
return updatedTrack;
}
/**
* Apply automation to all tracks at a specific time
* Returns a new tracks array with automation applied
*/
export function applyAutomationToTracks(
tracks: Track[],
time: number
): Track[] {
return tracks.map((track) => {
const automationValues = getAutomationValuesAtTime(track, time);
if (automationValues.length === 0) {
return track;
}
return applyAutomationValues(track, automationValues);
});
}
/**
* Record automation point during playback
*/
export function recordAutomationPoint(
lane: AutomationLane,
time: number,
value: number
): AutomationLane {
// In write mode, replace all existing points in the recorded region
// For simplicity, just add the point for now
// TODO: Implement proper write mode that clears existing points
const newPoint = {
id: `point-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
time,
value,
curve: 'linear' as const,
};
return {
...lane,
points: [...lane.points, newPoint],
};
}
/**
* Automation playback scheduler
* Schedules automation updates at regular intervals during playback
*/
export class AutomationPlaybackScheduler {
private intervalId: number | null = null;
private updateInterval: number = 50; // Update every 50ms (20 Hz)
private onUpdate: ((time: number) => void) | null = null;
/**
* Start the automation scheduler
*/
start(onUpdate: (time: number) => void): void {
if (this.intervalId !== null) {
this.stop();
}
this.onUpdate = onUpdate;
this.intervalId = window.setInterval(() => {
// Get current playback time from your audio engine
// This is a placeholder - you'll need to integrate with your actual playback system
if (this.onUpdate) {
// Call update callback with current time
// The callback should get the time from your actual playback system
this.onUpdate(0); // Placeholder
}
}, this.updateInterval);
}
/**
* Stop the automation scheduler
*/
stop(): void {
if (this.intervalId !== null) {
window.clearInterval(this.intervalId);
this.intervalId = null;
}
this.onUpdate = null;
}
/**
* Set update interval (in milliseconds)
*/
setUpdateInterval(interval: number): void {
this.updateInterval = Math.max(10, Math.min(1000, interval));
// Restart if already running
if (this.intervalId !== null && this.onUpdate) {
const callback = this.onUpdate;
this.stop();
this.start(callback);
}
}
/**
* Check if scheduler is running
*/
isRunning(): boolean {
return this.intervalId !== null;
}
}

185
lib/audio/automation/utils.ts Normal file
View File

@@ -0,0 +1,185 @@
/**
* Automation utility functions
*/
import type {
AutomationLane,
AutomationPoint,
CreateAutomationLaneInput,
CreateAutomationPointInput,
AutomationParameterId,
} from '@/types/automation';
/**
* Generate a unique automation point ID
*/
export function generateAutomationPointId(): string {
return `point-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}
/**
* Generate a unique automation lane ID
*/
export function generateAutomationLaneId(): string {
return `lane-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}
/**
* Create a new automation point
*/
export function createAutomationPoint(
input: CreateAutomationPointInput
): AutomationPoint {
return {
id: generateAutomationPointId(),
...input,
};
}
/**
* Create a new automation lane
*/
export function createAutomationLane(
trackId: string,
parameterId: AutomationParameterId,
parameterName: string,
input?: Partial<CreateAutomationLaneInput>
): AutomationLane {
return {
id: generateAutomationLaneId(),
trackId,
parameterId,
parameterName,
visible: input?.visible ?? true,
height: input?.height ?? 80,
points: input?.points ?? [],
mode: input?.mode ?? 'read',
color: input?.color,
valueRange: input?.valueRange ?? {
min: 0,
max: 1,
},
};
}
/**
* Create a volume automation lane
*/
export function createVolumeAutomationLane(trackId: string): AutomationLane {
return createAutomationLane(trackId, 'volume', 'Volume', {
valueRange: {
min: 0,
max: 1,
formatter: (value) => `${(value * 100).toFixed(0)}%`,
},
color: 'rgb(34, 197, 94)', // green
});
}
/**
* Create a pan automation lane
*/
export function createPanAutomationLane(trackId: string): AutomationLane {
return createAutomationLane(trackId, 'pan', 'Pan', {
valueRange: {
min: -1,
max: 1,
formatter: (value) => {
const normalized = value * 2 - 1; // Convert 0-1 to -1-1
if (normalized === 0) return 'C';
if (normalized < 0) return `L${Math.abs(Math.round(normalized * 100))}`;
return `R${Math.round(normalized * 100)}`;
},
},
color: 'rgb(59, 130, 246)', // blue
});
}
/**
* Interpolate automation value at a specific time
*/
export function interpolateAutomationValue(
points: AutomationPoint[],
time: number
): number {
if (points.length === 0) return 0;
const sortedPoints = [...points].sort((a, b) => a.time - b.time);
// Before first point
if (time <= sortedPoints[0].time) {
return sortedPoints[0].value;
}
// After last point
if (time >= sortedPoints[sortedPoints.length - 1].time) {
return sortedPoints[sortedPoints.length - 1].value;
}
// Find surrounding points
for (let i = 0; i < sortedPoints.length - 1; i++) {
const prevPoint = sortedPoints[i];
const nextPoint = sortedPoints[i + 1];
if (time >= prevPoint.time && time <= nextPoint.time) {
// Handle step curve
if (prevPoint.curve === 'step') {
return prevPoint.value;
}
// Linear interpolation
const timeDelta = nextPoint.time - prevPoint.time;
const valueDelta = nextPoint.value - prevPoint.value;
const progress = (time - prevPoint.time) / timeDelta;
return prevPoint.value + valueDelta * progress;
}
}
return 0;
}
/**
* Apply automation value to track parameter
*/
export function applyAutomationToTrack(
track: any,
parameterId: AutomationParameterId,
value: number
): any {
if (parameterId === 'volume') {
return { ...track, volume: value };
}
if (parameterId === 'pan') {
// Convert 0-1 to -1-1
return { ...track, pan: value * 2 - 1 };
}
// Effect parameters (format: "effect.{effectId}.{paramName}")
if (parameterId.startsWith('effect.')) {
const parts = parameterId.split('.');
if (parts.length === 3) {
const [, effectId, paramName] = parts;
return {
...track,
effectChain: {
...track.effectChain,
effects: track.effectChain.effects.map((effect: any) =>
effect.id === effectId
? {
...effect,
parameters: {
...effect.parameters,
[paramName]: value,
},
}
: effect
),
},
};
}
}
return track;
}

4
lib/audio/track-utils.ts
View File

@@ -35,6 +35,10 @@ export function createTrack(name?: string, color?: TrackColor): Track {
solo: false,
recordEnabled: false,
effectChain: createEffectChain(`${trackName} Effects`),
automation: {
lanes: [],
showAutomation: false,
},
collapsed: false,
selected: false,
selection: null,

4
lib/hooks/useMultiTrack.ts
View File

@@ -26,13 +26,14 @@ export function useMultiTrack() {
return [];
}
// Note: AudioBuffers can't be serialized, but EffectChains can
// Note: AudioBuffers can't be serialized, but EffectChains and Automation can
return parsed.map((t: any) => ({
...t,
name: String(t.name || 'Untitled Track'), // Ensure name is always a string
height: t.height && t.height >= DEFAULT_TRACK_HEIGHT ? t.height : DEFAULT_TRACK_HEIGHT, // Migrate old heights
audioBuffer: null, // Will need to be reloaded
effectChain: t.effectChain || createEffectChain(`${t.name} Effects`), // Restore effect chain or create new
automation: t.automation || { lanes: [], showAutomation: false }, // Restore automation or create new
selection: t.selection || null, // Initialize selection
}));
}
@@ -64,6 +65,7 @@ export function useMultiTrack() {
collapsed: track.collapsed,
selected: track.selected,
effectChain: track.effectChain, // Save effect chain
automation: track.automation, // Save automation data
}));
localStorage.setItem(STORAGE_KEY, JSON.stringify(trackData));
} catch (error) {

105
types/automation.ts Normal file
View File

@@ -0,0 +1,105 @@
/**
* Automation system type definitions
* Based on Ableton Live's automation model
*/
/**
* Automation curve types
* - linear: Straight line between points
* - bezier: Curved line with control handles
* - step: Horizontal lines with vertical transitions (for discrete values)
*/
export type AutomationCurveType = 'linear' | 'bezier' | 'step';
/**
* Automation recording/playback modes
* - read: Only playback automation
* - write: Record automation (replaces existing)
* - touch: Record while touching control, then return to read mode
* - latch: Record from first touch until stop, then return to read mode
*/
export type AutomationMode = 'read' | 'write' | 'touch' | 'latch';
/**
* Single automation breakpoint
*/
export interface AutomationPoint {
id: string;
time: number; // Position in seconds from track start
value: number; // Parameter value (normalized 0-1)
curve: AutomationCurveType;
// Bezier control handles (only used when curve is 'bezier')
handleIn?: { x: number; y: number }; // Relative to point position
handleOut?: { x: number; y: number }; // Relative to point position
}
/**
* Parameter identifier for automation
* Examples:
* - 'volume' - Track volume
* - 'pan' - Track pan
* - 'mute' - Track mute (step curve)
* - 'effect.compressor-1.threshold' - Effect parameter
* - 'effect.delay-2.time' - Effect parameter
*/
export type AutomationParameterId = string;
/**
* Single automation lane for a specific parameter
*/
export interface AutomationLane {
id: string;
trackId: string;
parameterId: AutomationParameterId;
parameterName: string; // Display name (e.g., "Volume", "Compressor Threshold")
visible: boolean; // Show/hide lane
height: number; // Lane height in pixels (user-adjustable, 60-120px)
points: AutomationPoint[];
mode: AutomationMode;
color?: string; // Optional color override (defaults to parameter type color)
// Value range for display (actual values are normalized 0-1)
valueRange: {
min: number; // Display minimum (e.g., 0 for volume)
max: number; // Display maximum (e.g., 1 for volume)
unit?: string; // Display unit (e.g., 'dB', '%', 'ms', 'Hz')
formatter?: (value: number) => string; // Custom value formatter
};
}
/**
* All automation lanes for a single track
*/
export interface TrackAutomation {
trackId: string;
lanes: AutomationLane[];
showAutomation: boolean; // Master show/hide toggle for all lanes
}
/**
* Complete automation data for entire project
*/
export interface ProjectAutomation {
tracks: Record<string, TrackAutomation>;
}
/**
* Automation parameter value at a specific time
* Used for real-time playback
*/
export interface AutomationValue {
parameterId: AutomationParameterId;
value: number;
time: number;
}
/**
* Helper type for creating new automation points
*/
export type CreateAutomationPointInput = Omit<AutomationPoint, 'id'>;
/**
* Helper type for creating new automation lanes
*/
export type CreateAutomationLaneInput = Omit<AutomationLane, 'id' | 'points'> & {
points?: AutomationPoint[];
};

7
types/track.ts
View File

@@ -4,6 +4,7 @@
import type { EffectChain } from '@/lib/audio/effects/chain';
import type { Selection } from './selection';
import type { AutomationLane } from './automation';
export interface Track {
id: string;
@@ -22,6 +23,12 @@ export interface Track {
// Effects
effectChain: EffectChain;
// Automation
automation: {
lanes: AutomationLane[];
showAutomation: boolean; // Master show/hide toggle
};
// UI state
collapsed: boolean;
selected: boolean;