From f4c4629bb20052131642f251f0dfdcd1a24e1e6e Mon Sep 17 00:00:00 2001
From: cbaucom <chrisrb83@gmail.com>
Date: Mon, 22 Jun 2026 09:57:04 -0400
Subject: [PATCH] Add sequential audio clip playlist for multi-track
 soundtrack.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces single soundtrackFilename with ordered audioClips in slideshow.json, sequential RenderPlan segments, and playlist UI — foundation for loudness normalization and media looping.

Closes #45

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .claude/plans/multi-track-audio-breakdown.md |  96 ++++++++++++++++++
 specs/multi-track-audio-timeline.md          |  40 ++++++++
 src/composition/SlideshowComposition.tsx     |  46 +++++++--
 src/composition/soundtrackVolume.ts          |   4 +
 src/editor-shell/App.tsx                     |  36 ++++---
 src/editor-shell/EditorSidebar.tsx           |  13 +--
 src/editor-shell/SoundtrackPanel.tsx         | 100 ++++++++++++++-----
 src/editor-shell/slidePersistence.test.ts    |  99 +++++++++++++++---
 src/editor-shell/slidePersistence.ts         |  26 ++++-
 src/editor-shell/useBeatGrid.ts              |   8 +-
 src/editor-shell/useProject.ts               |  60 ++++++-----
 src/project-store/schema.ts                  |   6 ++
 src/sequence-planner/ducking.test.ts         |  28 +++---
 src/sequence-planner/index.ts                |  14 ++-
 src/sequence-planner/planner.test.ts         |  62 ++++++++----
 src/sequence-planner/planner.ts              |  47 ++++++---
 src/sequence-planner/types.ts                |   9 ++
 src/timeline-core/audioClips.test.ts         |  34 +++++++
 src/timeline-core/audioClips.ts              |  18 ++++
 src/timeline-core/index.ts                   |   3 +-
 src/timeline-core/types.ts                   |   5 +
 21 files changed, 600 insertions(+), 154 deletions(-)
 create mode 100644 .claude/plans/multi-track-audio-breakdown.md
 create mode 100644 specs/multi-track-audio-timeline.md
 create mode 100644 src/timeline-core/audioClips.test.ts
 create mode 100644 src/timeline-core/audioClips.ts

diff --git a/.claude/plans/multi-track-audio-breakdown.md b/.claude/plans/multi-track-audio-breakdown.md
new file mode 100644
index 0000000..5ff7e37
--- /dev/null
+++ b/.claude/plans/multi-track-audio-breakdown.md
@@ -0,0 +1,96 @@
+# Approved issue breakdown — Multi-track audio timeline
+
+Source: parent PRD issue #1. Approved by Chris on 2026-06-22. Expands PRD out-of-scope items (multi-track audio, media looping). Create in listed order; blocked-by references use real issue numbers.
+
+---
+
+## Slice 19 — Audio clip sequence: model, planner, composition
+
+**Type**: AFK | **Stories**: 17 | **Blocked by**: #34 | **Issue**: #45
+
+**What to build**: Replace the single-soundtrack model with an ordered, sequential playlist of audio clips. Migrate `soundtrackFilename` → `audioClips` on load.
+
+**Acceptance criteria**:
+- [ ] Given multiple audio files in the folder, when the user builds a clip sequence (add / reorder / remove), then `slideshow.json` stores `audioClips: [{ filename, gainDb? }]` and persists across reopen.
+- [ ] Given a clip sequence, when planned, then `RenderPlan` contains ordered audio segments with absolute `startFrame`, `durationInFrames`, `blobUrl`, and per-clip gain (default 0 dB).
+- [ ] Given sequential clips, when played/exported, then clip 2 starts exactly when clip 1 ends (frame-accurate, no gap/overlap).
+- [ ] Given an existing project with only `soundtrackFilename`, when opened, then it loads as a one-clip sequence without data loss.
+
+**Technical notes**: Timeline Core `AudioClip` type; `slidePersistence` migration; `planner.ts` multi-audio; `SlideshowComposition` multiple `<Audio>`; minimal `SoundtrackPanel` clip list. Duration unchanged — `totalFrames` still visual-only.
+
+---
+
+## Slice 20 — Loudness normalization + per-clip gain overrides
+
+**Type**: AFK | **Stories**: new | **Blocked by**: #45 | **Issue**: #47
+
+**What to build**: Pure loudness-analysis module computing recommended gain offset (dB) per audio file. Auto-normalize by default; manual `gainDb` on clip overrides.
+
+**Acceptance criteria**:
+- [ ] Given two synthetic tracks with known RMS difference, when analyzed, then recommended offsets bring perceived levels within ±1 dB of a target.
+- [ ] Given analyzed tracks, when a clip has no manual `gainDb`, then playback/export uses the auto-normalized level.
+- [ ] Given a user-adjusted gain on a clip, when saved, then the manual value wins until reset.
+- [ ] Given analysis results, when the project reopens, then cached offsets in `loudnessCache` avoid re-analysis unless the file changes.
+
+**Technical notes**: `src/audio-analysis/` or extend beat-grid decode; RMS/peak target level; planner `effectiveGainDb`; `soundtrackVolume.ts` combines gain + ducking.
+
+---
+
+## Slice 21 — Audio-driven duration + full-sequence media loop
+
+**Type**: AFK | **Stories**: 17, 18 | **Blocked by**: #45 | **Issue**: #46
+
+**What to build**: When audio exceeds visual timeline, `totalFrames` = sum of clip durations. Loop entire slide sequence deterministically until audio ends.
+
+**Acceptance criteria**:
+- [ ] Given audio longer than one pass of slides, when planned, then `totalFrames` equals total audio duration and slide entries repeat with correct transitions at loop boundaries.
+- [ ] Given audio shorter than visual, when planned, then `totalFrames` equals visual duration.
+- [ ] Given beat sync on, when looping, then nudged durations apply on every pass.
+- [ ] Given a fixed fixture, when planned, then RenderPlan matches a golden snapshot including looped entries.
+
+**Technical notes**: Core planner change; loop boundaries use normal adjacent-slide transitions; videos replay each pass.
+
+---
+
+## Slice 22 — Proportional timeline UI + audio lane with gain controls
+
+**Type**: HITL | **Stories**: 6, 31 | **Blocked by**: #45, #47, #46 | **Issue**: #48
+
+**What to build**: Time-proportional timeline: media thumbnails (width ∝ duration) + audio lane with waveforms, clip boundaries, per-clip gain sliders. Shared scroll; playhead sync.
+
+**Acceptance criteria**:
+- [ ] Given mixed durations, when rendered, then thumbnail widths are proportional to slide duration.
+- [ ] Given an audio clip sequence, when rendered, then clips appear on a lane below media aligned to start times.
+- [ ] Given a gain slider, when adjusted, then playback changes immediately and `gainDb` persists.
+- [ ] Given playback or scrubbing, when the playhead moves, then media and audio lanes highlight consistently.
+- [ ] HITL: owner signs off on iMovie-like usability on a 10-clip project.
+
+**Technical notes**: `TimelinePanel.tsx` or refactor `StoryboardFilmstrip`; composition-patterns skill; Remotion waveform or Web Audio peaks.
+
+---
+
+## Slice 23 — Beat grid across multi-clip audio timeline
+
+**Type**: AFK | **Stories**: 18–22 | **Blocked by**: #45, #46 | **Issue**: #49
+
+**What to build**: Beat sync against concatenated virtual soundtrack. Per-file `beatGridCache`; effective grid spans full timeline with clip start offsets.
+
+**Acceptance criteria**:
+- [ ] Given 2+ clips, when beat sync on, then boundaries nudge against beats on combined timeline.
+- [ ] Given manual beat grid, when clips reordered, then beat positions stay correct relative to concatenated playback.
+- [ ] Given beat sync with looped media, when planned, then nudging aligns across full audio duration.
+- [ ] Given per-file cache, when a new clip added, then only that file is analyzed.
+
+**Technical notes**: `concatBeatGrid` pure function; `useBeatGrid` on clip list changes.
+
+---
+
+## Published
+
+| Slice | Issue |
+|-------|-------|
+| 19 — Audio clip sequence | #45 |
+| 20 — Loudness normalization | #47 |
+| 21 — Audio-driven duration + loop | #46 |
+| 22 — Proportional timeline UI | #48 |
+| 23 — Beat grid multi-clip | #49 |
diff --git a/specs/multi-track-audio-timeline.md b/specs/multi-track-audio-timeline.md
new file mode 100644
index 0000000..638921b
--- /dev/null
+++ b/specs/multi-track-audio-timeline.md
@@ -0,0 +1,40 @@
+# Multi-track audio timeline
+
+Parent issues: #45–#49. This spec tracks slice 19 (#45) implementation.
+
+## Slice 19 — Audio clip sequence (done)
+
+Replace single `soundtrackFilename` with ordered `audioClips[]`. Sequential playback in RenderPlan. `totalFrames` remains visual-only.
+
+Closes #45.
+
+### Data model
+
+```typescript
+type AudioClip = { filename: string; gainDb?: number }
+type SerializedAudioClip = { filename: string; gainDb?: number }
+```
+
+Migration: `soundtrackFilename` → single `audioClips` entry on load.
+
+### RenderPlan
+
+```typescript
+type AudioSegment = {
+  blobUrl: string
+  durationInFrames: number
+  gainDb: number
+  startFrame: number
+}
+
+type RenderPlan = {
+  entries: RenderPlanEntry[]
+  audioSegments?: AudioSegment[]
+  duckingEnvelope?: DuckingEnvelope
+  totalFrames: number
+}
+```
+
+### UI (minimal)
+
+SoundtrackPanel: ordered clip list, add / reorder / remove. Beat grid uses first clip until #49.
diff --git a/src/composition/SlideshowComposition.tsx b/src/composition/SlideshowComposition.tsx
index aae4396..9854ca7 100644
--- a/src/composition/SlideshowComposition.tsx
+++ b/src/composition/SlideshowComposition.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react'
-import { AbsoluteFill, Img, interpolate, useCurrentFrame } from 'remotion'
+import { AbsoluteFill, Img, interpolate, Sequence, useCurrentFrame } from 'remotion'
 import { Audio, Video } from '@remotion/media'
 import { TransitionSeries, linearTiming } from '@remotion/transitions'
 import { fade } from '@remotion/transitions/fade'
 import type { TransitionPresentation, TransitionPresentationComponentProps } from '@remotion/transitions'
 import { loadFont } from '@remotion/google-fonts/Inter'
-import type { RenderPlanEntry, RenderPlan } from '../sequence-planner/types'
+import type { AudioSegment, RenderPlanEntry, RenderPlan } from '../sequence-planner/types'
 import type { TransitionType } from '../timeline-core/settings'
 import { isTitleSlide } from '../timeline-core/types'
 import type { MediaSlide, TitleSlide } from '../timeline-core/types'
-import { volumeAtFrame } from './soundtrackVolume'
+import { dbToLinear, volumeAtFrame } from './soundtrackVolume'
 
 type MediaRenderPlanEntry = Omit<RenderPlanEntry, 'slide'> & { slide: MediaSlide }
 type TitleRenderPlanEntry = Omit<RenderPlanEntry, 'slide'> & { slide: TitleSlide }
@@ -62,8 +62,8 @@ export function SlideshowComposition({ plan }: SlideshowProps) {
 
   return (
     <AbsoluteFill>
-      {plan.soundtrack ? (
-        <SoundtrackAudio track={plan.soundtrack} />
+      {plan.audioSegments && plan.duckingEnvelope ? (
+        <AudioSegments duckingEnvelope={plan.duckingEnvelope} segments={plan.audioSegments} />
       ) : null}
       <TransitionSeries>
       {plan.entries.map((entry) => (
@@ -89,13 +89,39 @@ export function SlideshowComposition({ plan }: SlideshowProps) {
 }
 
 // @remotion/media's Audio (not Html5Audio) — required for renderMediaOnWeb export.
-function SoundtrackAudio({ track }: { track: NonNullable<RenderPlan['soundtrack']> }) {
-  const { duckingEnvelope } = track
+function AudioSegments({
+  duckingEnvelope,
+  segments,
+}: {
+  duckingEnvelope: NonNullable<RenderPlan['duckingEnvelope']>
+  segments: AudioSegment[]
+}) {
+  return segments.map((segment, index) => (
+    <Sequence
+      durationInFrames={segment.durationInFrames}
+      from={segment.startFrame}
+      key={`${segment.startFrame}-${segment.blobUrl}-${index}`}
+      layout="none"
+    >
+      <AudioSegmentAudio duckingEnvelope={duckingEnvelope} segment={segment} />
+    </Sequence>
+  ))
+}
+
+function AudioSegmentAudio({
+  duckingEnvelope,
+  segment,
+}: {
+  duckingEnvelope: NonNullable<RenderPlan['duckingEnvelope']>
+  segment: AudioSegment
+}) {
+  const gainLinear = dbToLinear(segment.gainDb)
   const volume = useCallback(
-    (frame: number) => volumeAtFrame(duckingEnvelope, frame),
-    [duckingEnvelope],
+    (localFrame: number) =>
+      volumeAtFrame(duckingEnvelope, segment.startFrame + localFrame) * gainLinear,
+    [duckingEnvelope, gainLinear, segment.startFrame],
   )
-  return <Audio src={track.blobUrl} volume={volume} />
+  return <Audio src={segment.blobUrl} volume={volume} />
 }
 
 function TitleSlideView({ entry }: { entry: TitleRenderPlanEntry }) {
diff --git a/src/composition/soundtrackVolume.ts b/src/composition/soundtrackVolume.ts
index 5640f6e..42d3933 100644
--- a/src/composition/soundtrackVolume.ts
+++ b/src/composition/soundtrackVolume.ts
@@ -1,6 +1,10 @@
 import { interpolate } from 'remotion'
 import type { DuckingEnvelope } from '../sequence-planner/types'
 
+export function dbToLinear(gainDb: number): number {
+  return Math.pow(10, gainDb / 20)
+}
+
 export function volumeAtFrame(envelope: DuckingEnvelope, frame: number): number {
   const { keyframes, rampFrames } = envelope
   if (keyframes.length === 0) return 1
diff --git a/src/editor-shell/App.tsx b/src/editor-shell/App.tsx
index 9bb8463..a8c59df 100644
--- a/src/editor-shell/App.tsx
+++ b/src/editor-shell/App.tsx
@@ -37,6 +37,7 @@ export function App() {
   const {
     aspectRatio,
     setAspectRatio,
+    audioClips,
     audioTracks,
     beatGridCache,
     globalSettings,
@@ -44,9 +45,9 @@ export function App() {
     manualBeatGrid,
     slides,
     setSlides,
-    soundtrackFilename,
     themeName,
     setThemeName,
+    updateAudioClips,
     updateBeatGridPersist,
     loading,
     error,
@@ -56,11 +57,13 @@ export function App() {
     recentProjects,
   } = project
 
+  const primaryClipFilename = audioClips[0]?.filename ?? null
+
   const beatGrid = useBeatGrid({
     audioTracks,
     onPersistChange: updateBeatGridPersist,
     persisted: { beatGridCache, manualBeatGrid },
-    soundtrackFilename,
+    primaryClipFilename,
   })
 
   const handleReorder = useCallback((fromIndex: number, toIndex: number) => {
@@ -99,11 +102,17 @@ export function App() {
     setSlides(prev => prev.map(s => (s.id === id && isTitleSlide(s) ? { ...s, ...updates } : s)))
   }, [setSlides])
 
-  const selectedSoundtrack = useMemo(
-    () => (soundtrackFilename
-      ? audioTracks.find((track) => track.filename === soundtrackFilename)
-      : undefined),
-    [audioTracks, soundtrackFilename],
+  const planAudioClips = useMemo(
+    () => audioClips.map((clip) => {
+      const track = audioTracks.find((entry) => entry.filename === clip.filename)
+      if (!track) return null
+      return {
+        blobUrl: track.blobUrl,
+        durationInFrames: track.durationInFrames,
+        ...(clip.gainDb !== undefined ? { gainDb: clip.gainDb } : {}),
+      }
+    }).filter((clip) => clip !== null),
+    [audioClips, audioTracks],
   )
 
   const renderPlan = useMemo(
@@ -111,15 +120,10 @@ export function App() {
       filterIncluded(slides),
       globalSettings,
       undefined,
-      selectedSoundtrack
-        ? {
-            blobUrl: selectedSoundtrack.blobUrl,
-            durationInFrames: selectedSoundtrack.durationInFrames,
-          }
-        : undefined,
+      planAudioClips.length > 0 ? planAudioClips : undefined,
       beatGrid.effectiveBeatGrid,
     ),
-    [beatGrid.effectiveBeatGrid, globalSettings, selectedSoundtrack, slides],
+    [beatGrid.effectiveBeatGrid, globalSettings, planAudioClips, slides],
   )
   const totalFrames = renderPlan.totalFrames > 0 ? renderPlan.totalFrames : FPS
   const canvas = dimensionsForAspectRatio(aspectRatio)
@@ -220,10 +224,10 @@ export function App() {
                 onClearManualBeatGrid={beatGrid.clearManualBeatGrid}
                 onJamendoAdd={project.addJamendoTrack}
                 onSettingsChange={handleSettingsChange}
-                onSoundtrackChange={project.changeSoundtrack}
+                onAudioClipsChange={updateAudioClips}
                 onThemeChange={handleThemeChange}
                 settings={globalSettings}
-                soundtrackFilename={soundtrackFilename}
+                audioClips={audioClips}
                 themeName={themeName}
               />
             }
diff --git a/src/editor-shell/EditorSidebar.tsx b/src/editor-shell/EditorSidebar.tsx
index 2a06a58..802fab6 100644
--- a/src/editor-shell/EditorSidebar.tsx
+++ b/src/editor-shell/EditorSidebar.tsx
@@ -6,6 +6,7 @@ import {
 } from '@/components/ui/accordion'
 import { Button } from '@/components/ui/button'
 import type { AspectRatio, GlobalSettings, ThemeName } from '../timeline-core'
+import type { AudioClip } from '../timeline-core/types'
 import type { AudioTrack } from '../project-store'
 import type { BeatGrid } from '../beat-grid/types'
 import type { JamendoAttribution, JamendoTrack } from '../jamendo/types'
@@ -25,13 +26,13 @@ type Props = {
   onApplyManualBpm: (bpm: number, firstBeatOffsetSecs: number) => void
   onApplyTapTimestamps: (tapTimestampsMs: number[]) => void
   onAspectRatioChange: (ratio: AspectRatio) => void
+  onAudioClipsChange: (clips: AudioClip[]) => void
   onClearManualBeatGrid: () => void
   onJamendoAdd: (track: JamendoTrack, attribution: JamendoAttribution) => Promise<void>
   onSettingsChange: (updated: GlobalSettings) => void
-  onSoundtrackChange: (filename: string | null) => void
   onThemeChange: (name: ThemeName) => void
+  audioClips: AudioClip[]
   settings: GlobalSettings
-  soundtrackFilename: string | null
   themeName: ThemeName | null
 }
 
@@ -46,13 +47,13 @@ export function EditorSidebar({
   onApplyManualBpm,
   onApplyTapTimestamps,
   onAspectRatioChange,
+  onAudioClipsChange,
   onClearManualBeatGrid,
   onJamendoAdd,
   onSettingsChange,
-  onSoundtrackChange,
   onThemeChange,
+  audioClips,
   settings,
-  soundtrackFilename,
   themeName,
 }: Props) {
   return (
@@ -85,15 +86,15 @@ export function EditorSidebar({
               <AccordionContent>
                 <SoundtrackPanel
                   analysisStatus={analysisStatus}
+                  audioClips={audioClips}
                   audioTracks={audioTracks}
                   beatSync={settings.beatSync !== false}
                   effectiveBeatGrid={effectiveBeatGrid}
                   manualBeatGrid={manualBeatGrid}
                   onApplyManualBpm={onApplyManualBpm}
                   onApplyTapTimestamps={onApplyTapTimestamps}
-                  onChange={onSoundtrackChange}
+                  onChange={onAudioClipsChange}
                   onClearManualBeatGrid={onClearManualBeatGrid}
-                  soundtrackFilename={soundtrackFilename}
                 />
               </AccordionContent>
             </AccordionItem>
diff --git a/src/editor-shell/SoundtrackPanel.tsx b/src/editor-shell/SoundtrackPanel.tsx
index 128d048..f347491 100644
--- a/src/editor-shell/SoundtrackPanel.tsx
+++ b/src/editor-shell/SoundtrackPanel.tsx
@@ -1,3 +1,5 @@
+import { useRef } from 'react'
+import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import {
   Select,
@@ -7,6 +9,8 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import type { AudioTrack } from '../project-store'
+import type { AudioClip } from '../timeline-core/types'
+import { addAudioClip, moveAudioClip, removeAudioClip } from '../timeline-core'
 import type { BeatGrid } from '../beat-grid/types'
 import { BeatGridPanel } from './BeatGridPanel'
 import type { BeatGridAnalysisStatus } from './useBeatGrid'
@@ -15,19 +19,20 @@ const NONE_VALUE = '__none__'
 
 type Props = {
   analysisStatus: BeatGridAnalysisStatus
+  audioClips: AudioClip[]
   audioTracks: AudioTrack[]
   beatSync: boolean
   effectiveBeatGrid: BeatGrid | undefined
   manualBeatGrid: BeatGrid | undefined
   onApplyManualBpm: (bpm: number, firstBeatOffsetSecs: number) => void
   onApplyTapTimestamps: (tapTimestampsMs: number[]) => void
-  onChange: (filename: string | null) => void
+  onChange: (clips: AudioClip[]) => void
   onClearManualBeatGrid: () => void
-  soundtrackFilename: string | null
 }
 
 export function SoundtrackPanel({
   analysisStatus,
+  audioClips,
   audioTracks,
   beatSync,
   effectiveBeatGrid,
@@ -36,37 +41,82 @@ export function SoundtrackPanel({
   onApplyTapTimestamps,
   onChange,
   onClearManualBeatGrid,
-  soundtrackFilename,
 }: Props) {
+  const dragIndexRef = useRef<number | null>(null)
+
   if (audioTracks.length === 0) return null
 
-  const selectedTrack = soundtrackFilename
-    ? audioTracks.find((track) => track.filename === soundtrackFilename)
+  const clipFilenames = new Set(audioClips.map((clip) => clip.filename))
+  const availableTracks = audioTracks.filter((track) => !clipFilenames.has(track.filename))
+  const primaryTrack = audioClips[0]
+    ? audioTracks.find((track) => track.filename === audioClips[0].filename)
     : undefined
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex flex-col gap-1.5">
-        <Label className="text-xs text-muted-foreground" htmlFor="soundtrack-select">Track</Label>
-        <Select
-          onValueChange={(value) => onChange(value === NONE_VALUE ? null : value)}
-          value={soundtrackFilename ?? NONE_VALUE}
-        >
-          <SelectTrigger className="w-full" id="soundtrack-select" size="sm">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value={NONE_VALUE}>None</SelectItem>
-            {audioTracks.map((track) => (
-              <SelectItem key={track.filename} value={track.filename}>
-                {track.filename}
-              </SelectItem>
+      {audioClips.length > 0 ? (
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs text-muted-foreground">Playlist</Label>
+          <ul className="flex flex-col gap-1">
+            {audioClips.map((clip, index) => (
+              <li
+                key={`${clip.filename}-${index}`}
+                className="flex items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs"
+                draggable
+                onDragEnd={() => { dragIndexRef.current = null }}
+                onDragOver={(event) => event.preventDefault()}
+                onDragStart={() => { dragIndexRef.current = index }}
+                onDrop={(event) => {
+                  event.preventDefault()
+                  if (dragIndexRef.current !== null && dragIndexRef.current !== index) {
+                    onChange(moveAudioClip(audioClips, dragIndexRef.current, index))
+                  }
+                  dragIndexRef.current = null
+                }}
+              >
+                <span className="min-w-0 flex-1 truncate">{clip.filename}</span>
+                <Button
+                  aria-label={`Remove ${clip.filename}`}
+                  onClick={() => onChange(removeAudioClip(audioClips, index))}
+                  size="icon-sm"
+                  type="button"
+                  variant="ghost"
+                >
+                  ×
+                </Button>
+              </li>
             ))}
-          </SelectContent>
-        </Select>
-      </div>
+          </ul>
+        </div>
+      ) : null}
+
+      {availableTracks.length > 0 ? (
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs text-muted-foreground" htmlFor="audio-clip-add">Add track</Label>
+          <Select
+            onValueChange={(value) => {
+              if (value !== NONE_VALUE) {
+                onChange(addAudioClip(audioClips, value))
+              }
+            }}
+            value={NONE_VALUE}
+          >
+            <SelectTrigger className="w-full" id="audio-clip-add" size="sm">
+              <SelectValue placeholder="Choose a track…" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={NONE_VALUE}>Choose a track…</SelectItem>
+              {availableTracks.map((track) => (
+                <SelectItem key={track.filename} value={track.filename}>
+                  {track.filename}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
 
-      {selectedTrack ? (
+      {primaryTrack ? (
         <BeatGridPanel
           analysisStatus={analysisStatus}
           beatSync={beatSync}
@@ -75,7 +125,7 @@ export function SoundtrackPanel({
           onApplyManualBpm={onApplyManualBpm}
           onApplyTapTimestamps={onApplyTapTimestamps}
           onClearManualBeatGrid={onClearManualBeatGrid}
-          soundtrackBlobUrl={selectedTrack.blobUrl}
+          soundtrackBlobUrl={primaryTrack.blobUrl}
         />
       ) : null}
     </div>
diff --git a/src/editor-shell/slidePersistence.test.ts b/src/editor-shell/slidePersistence.test.ts
index 259daa6..791ee6d 100644
--- a/src/editor-shell/slidePersistence.test.ts
+++ b/src/editor-shell/slidePersistence.test.ts
@@ -4,7 +4,7 @@ import type { MediaSlide } from '../timeline-core/types'
 import { SCHEMA_VERSION } from '../project-store'
 import type { JamendoAttribution } from '../jamendo/types'
 import type { BeatGrid } from '../beat-grid/types'
-import { slidesToJson } from './slidePersistence'
+import { audioClipsFromJson, slidesToJson } from './slidePersistence'
 
 const BEAT_GRID: BeatGrid = {
   beatIntervalSecs: 0.5,
@@ -24,24 +24,25 @@ function makeSlide(filename: string): MediaSlide {
 }
 
 describe('slidesToJson', () => {
-  it('includes soundtrackFilename when a soundtrack is selected', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], 'theme.mp3')
-    expect(json.soundtrackFilename).toBe('theme.mp3')
+  it('includes audioClips when clips are in the playlist', () => {
+    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], [{ filename: 'theme.mp3' }])
+    expect(json.audioClips).toEqual([{ filename: 'theme.mp3' }])
     expect(json.schemaVersion).toBe(SCHEMA_VERSION)
+    expect(json.soundtrackFilename).toBeUndefined()
   })
 
-  it('omits soundtrackFilename when none is selected', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], null)
-    expect(json.soundtrackFilename).toBeUndefined()
+  it('omits audioClips when playlist is empty', () => {
+    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], [])
+    expect(json.audioClips).toBeUndefined()
   })
 
   it('includes themeName when a theme is active', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], null, 'classic')
+    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], [], 'classic')
     expect(json.themeName).toBe('classic')
   })
 
   it('omits themeName when null', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], null, null)
+    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], [], null)
     expect(json.themeName).toBeUndefined()
   })
 
@@ -52,38 +53,104 @@ describe('slidesToJson', () => {
       artist: 'Cool Artist',
       licenseUrl: 'https://creativecommons.org/licenses/by/3.0/',
     }
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], 'track.mp3', null, attribution)
+    const json = slidesToJson(
+      DEFAULT_GLOBAL_SETTINGS,
+      [makeSlide('a.jpg')],
+      [{ filename: 'track.mp3' }],
+      null,
+      attribution,
+    )
     expect(json.soundtrackAttribution).toEqual(attribution)
   })
 
   it('omits soundtrackAttribution when null', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], 'track.mp3', null, null)
+    const json = slidesToJson(
+      DEFAULT_GLOBAL_SETTINGS,
+      [makeSlide('a.jpg')],
+      [{ filename: 'track.mp3' }],
+      null,
+      null,
+    )
     expect(json.soundtrackAttribution).toBeUndefined()
   })
 
   it('includes aspectRatio when provided', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], null, null, null, '9:16')
+    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], [], null, null, '9:16')
     expect(json.aspectRatio).toBe('9:16')
   })
 
   it('omits aspectRatio when not provided', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], null, null, null)
+    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], [], null, null)
     expect(json.aspectRatio).toBeUndefined()
   })
 
   it('includes beatGridCache when provided', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], 'track.mp3', null, null, null, BEAT_GRID)
+    const json = slidesToJson(
+      DEFAULT_GLOBAL_SETTINGS,
+      [makeSlide('a.jpg')],
+      [{ filename: 'track.mp3' }],
+      null,
+      null,
+      null,
+      BEAT_GRID,
+    )
     expect(json.beatGridCache).toEqual(BEAT_GRID)
   })
 
   it('includes manualBeatGrid when provided', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], 'track.mp3', null, null, null, null, BEAT_GRID)
+    const json = slidesToJson(
+      DEFAULT_GLOBAL_SETTINGS,
+      [makeSlide('a.jpg')],
+      [{ filename: 'track.mp3' }],
+      null,
+      null,
+      null,
+      null,
+      BEAT_GRID,
+    )
     expect(json.manualBeatGrid).toEqual(BEAT_GRID)
   })
 
   it('omits beat grid fields when not provided', () => {
-    const json = slidesToJson(DEFAULT_GLOBAL_SETTINGS, [makeSlide('a.jpg')], 'track.mp3')
+    const json = slidesToJson(
+      DEFAULT_GLOBAL_SETTINGS,
+      [makeSlide('a.jpg')],
+      [{ filename: 'track.mp3' }],
+    )
     expect(json.beatGridCache).toBeUndefined()
     expect(json.manualBeatGrid).toBeUndefined()
   })
+
+  it('serializes gainDb on audio clips', () => {
+    const json = slidesToJson(
+      DEFAULT_GLOBAL_SETTINGS,
+      [makeSlide('a.jpg')],
+      [{ filename: 'a.mp3', gainDb: -3 }],
+    )
+    expect(json.audioClips).toEqual([{ filename: 'a.mp3', gainDb: -3 }])
+  })
+})
+
+describe('audioClipsFromJson', () => {
+  it('reads audioClips from saved json', () => {
+    const clips = audioClipsFromJson({
+      schemaVersion: 1,
+      slides: [],
+      audioClips: [{ filename: 'a.mp3' }, { filename: 'b.mp3' }],
+    })
+    expect(clips).toEqual([{ filename: 'a.mp3' }, { filename: 'b.mp3' }])
+  })
+
+  it('migrates soundtrackFilename to a single clip', () => {
+    const clips = audioClipsFromJson({
+      schemaVersion: 1,
+      slides: [],
+      soundtrackFilename: 'legacy.mp3',
+    })
+    expect(clips).toEqual([{ filename: 'legacy.mp3' }])
+  })
+
+  it('returns empty array when no audio is saved', () => {
+    expect(audioClipsFromJson({ schemaVersion: 1, slides: [] })).toEqual([])
+  })
 })
diff --git a/src/editor-shell/slidePersistence.ts b/src/editor-shell/slidePersistence.ts
index 0277608..05502e4 100644
--- a/src/editor-shell/slidePersistence.ts
+++ b/src/editor-shell/slidePersistence.ts
@@ -1,5 +1,5 @@
 import type { BeatGrid } from '../beat-grid/types'
-import type { MediaSlide, Slide } from '../timeline-core/types'
+import type { AudioClip, MediaSlide, Slide } from '../timeline-core/types'
 import { isTitleSlide } from '../timeline-core/types'
 import type { AspectRatio, GlobalSettings, ThemeName } from '../timeline-core'
 import { SCHEMA_VERSION, type SlideshowJson } from '../project-store'
@@ -29,10 +29,23 @@ export function reconcileSlides(enumerated: MediaSlide[], saved: SlideshowJson):
   return ordered
 }
 
+export function audioClipsFromJson(saved: SlideshowJson): AudioClip[] {
+  if (saved.audioClips?.length) {
+    return saved.audioClips.map((clip) => ({
+      filename: clip.filename,
+      ...(clip.gainDb !== undefined ? { gainDb: clip.gainDb } : {}),
+    }))
+  }
+  if (saved.soundtrackFilename) {
+    return [{ filename: saved.soundtrackFilename }]
+  }
+  return []
+}
+
 export function slidesToJson(
   globalSettings: GlobalSettings,
   slides: Slide[],
-  soundtrackFilename?: string | null,
+  audioClips?: AudioClip[] | null,
   themeName?: ThemeName | null,
   soundtrackAttribution?: JamendoAttribution | null,
   aspectRatio?: AspectRatio | null,
@@ -43,9 +56,16 @@ export function slidesToJson(
     globalSettings,
     schemaVersion: SCHEMA_VERSION,
     ...(aspectRatio ? { aspectRatio } : {}),
+    ...(audioClips?.length
+      ? {
+          audioClips: audioClips.map((clip) => ({
+            filename: clip.filename,
+            ...(clip.gainDb !== undefined ? { gainDb: clip.gainDb } : {}),
+          })),
+        }
+      : {}),
     ...(beatGridCache ? { beatGridCache } : {}),
     ...(manualBeatGrid ? { manualBeatGrid } : {}),
-    ...(soundtrackFilename ? { soundtrackFilename } : {}),
     ...(themeName ? { themeName } : {}),
     ...(soundtrackAttribution ? { soundtrackAttribution } : {}),
     slides: slides.map(slide => {
diff --git a/src/editor-shell/useBeatGrid.ts b/src/editor-shell/useBeatGrid.ts
index 1211e03..416ea2e 100644
--- a/src/editor-shell/useBeatGrid.ts
+++ b/src/editor-shell/useBeatGrid.ts
@@ -20,19 +20,19 @@ type Options = {
   audioTracks: AudioTrack[]
   onPersistChange: (update: PersistedBeatGrid) => void
   persisted: PersistedBeatGrid
-  soundtrackFilename: string | null
+  primaryClipFilename: string | null
 }
 
 export function useBeatGrid({
   audioTracks,
   onPersistChange,
   persisted,
-  soundtrackFilename,
+  primaryClipFilename,
 }: Options) {
   const [analysisFailedForFilename, setAnalysisFailedForFilename] = useState<string | null>(null)
 
-  const soundtrack = soundtrackFilename
-    ? audioTracks.find((track) => track.filename === soundtrackFilename)
+  const soundtrack = primaryClipFilename
+    ? audioTracks.find((track) => track.filename === primaryClipFilename)
     : undefined
 
   const effectiveBeatGrid = resolveEffectiveBeatGrid(
diff --git a/src/editor-shell/useProject.ts b/src/editor-shell/useProject.ts
index 2cbcf91..e6e4081 100644
--- a/src/editor-shell/useProject.ts
+++ b/src/editor-shell/useProject.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import type { Slide } from '../timeline-core/types'
+import type { AudioClip, Slide } from '../timeline-core/types'
 import { isTitleSlide } from '../timeline-core/types'
-import { DEFAULT_ASPECT_RATIO, DEFAULT_GLOBAL_SETTINGS, isAspectRatio } from '../timeline-core'
+import { addAudioClip, DEFAULT_ASPECT_RATIO, DEFAULT_GLOBAL_SETTINGS, isAspectRatio } from '../timeline-core'
 import type { AspectRatio, GlobalSettings, ThemeName } from '../timeline-core'
 import {
   addRecentProject,
@@ -19,7 +19,7 @@ import {
   type SlideshowJson,
 } from '../project-store'
 import { enumerateFolder, revokeSlideBlobUrls } from '../project-store/media-loader'
-import { reconcileSlides, slidesToJson } from './slidePersistence'
+import { audioClipsFromJson, reconcileSlides, slidesToJson } from './slidePersistence'
 import type { JamendoAttribution, JamendoTrack } from '../jamendo/types'
 import { downloadTrack, sanitizeFilename } from '../jamendo'
 import type { BeatGrid } from '../beat-grid'
@@ -35,16 +35,21 @@ async function listFolderFilenames(handle: FileSystemDirectoryHandle): Promise<S
   return names
 }
 
+function filterValidAudioClips(clips: AudioClip[], audioTracks: AudioTrack[]): AudioClip[] {
+  const filenames = new Set(audioTracks.map((track) => track.filename))
+  return clips.filter((clip) => filenames.has(clip.filename))
+}
+
 type Options = {
   onFolderLoaded?: () => void
 }
 
 export function useProject({ onFolderLoaded }: Options = {}) {
   const [aspectRatio, setAspectRatio] = useState<AspectRatio>(DEFAULT_ASPECT_RATIO)
+  const [audioClips, setAudioClips] = useState<AudioClip[]>([])
   const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([])
   const [globalSettings, setGlobalSettings] = useState<GlobalSettings>(DEFAULT_GLOBAL_SETTINGS)
   const [slides, setSlides] = useState<Slide[]>([])
-  const [soundtrackFilename, setSoundtrackFilename] = useState<string | null>(null)
   const [soundtrackAttribution, setSoundtrackAttribution] = useState<JamendoAttribution | null>(null)
   const [themeName, setThemeName] = useState<ThemeName | null>(null)
   const [beatGridCache, setBeatGridCache] = useState<BeatGrid | undefined>()
@@ -97,7 +102,7 @@ export function useProject({ onFolderLoaded }: Options = {}) {
       saveProject(handle, slidesToJson(
         globalSettings,
         slides,
-        soundtrackFilename,
+        audioClips,
         themeName,
         soundtrackAttribution,
         aspectRatio,
@@ -105,7 +110,7 @@ export function useProject({ onFolderLoaded }: Options = {}) {
         manualBeatGrid,
       )).catch(console.error)
     }, AUTOSAVE_DELAY)
-  }, [aspectRatio, beatGridCache, globalSettings, manualBeatGrid, slides, soundtrackAttribution, soundtrackFilename, themeName])
+  }, [aspectRatio, audioClips, beatGridCache, globalSettings, manualBeatGrid, slides, soundtrackAttribution, themeName])
 
   const loadFolder = useCallback(
     async (handle: FileSystemDirectoryHandle, savedData?: SlideshowJson) => {
@@ -116,12 +121,13 @@ export function useProject({ onFolderLoaded }: Options = {}) {
         const nextAudioTracks = await enumerateAudioTracks(handle)
         const restoredSettings = savedData?.globalSettings ?? DEFAULT_GLOBAL_SETTINGS
         const restoredThemeName = savedData?.themeName ?? null
-        const savedSoundtrack = savedData?.soundtrackFilename ?? null
-        const validSoundtrack =
-          savedSoundtrack && nextAudioTracks.some((track) => track.filename === savedSoundtrack)
-            ? savedSoundtrack
-            : null
-        const restoredAttribution = validSoundtrack ? (savedData?.soundtrackAttribution ?? null) : null
+        const restoredClips = filterValidAudioClips(
+          savedData ? audioClipsFromJson(savedData) : [],
+          nextAudioTracks,
+        )
+        const restoredAttribution = restoredClips.length > 0
+          ? (savedData?.soundtrackAttribution ?? null)
+          : null
         let finalSlides: Slide[] = savedData ? reconcileSlides(enumerated, savedData) : enumerated
         // Apply global duration only to media slides not already in savedData (new files added to folder).
         const savedFilenames = new Set(
@@ -136,14 +142,14 @@ export function useProject({ onFolderLoaded }: Options = {}) {
         pendingAudioRevokeRef.current = audioTracks
         pendingRevokeRef.current = latestSlidesRef.current
         setAspectRatio(isAspectRatio(savedData?.aspectRatio) ? savedData.aspectRatio : DEFAULT_ASPECT_RATIO)
+        setAudioClips(restoredClips)
         setAudioTracks(nextAudioTracks)
         setGlobalSettings(restoredSettings)
         setThemeName(restoredThemeName)
         setSlides(finalSlides)
-        setSoundtrackFilename(validSoundtrack)
         setSoundtrackAttribution(restoredAttribution)
-        setBeatGridCache(validSoundtrack ? savedData?.beatGridCache : undefined)
-        setManualBeatGrid(validSoundtrack ? savedData?.manualBeatGrid : undefined)
+        setBeatGridCache(restoredClips.length > 0 ? savedData?.beatGridCache : undefined)
+        setManualBeatGrid(restoredClips.length > 0 ? savedData?.manualBeatGrid : undefined)
         setProjectName(handle.name)
         setFolderOpen(true)
         onFolderLoaded?.()
@@ -217,7 +223,7 @@ export function useProject({ onFolderLoaded }: Options = {}) {
       const nextAudioTracks = await enumerateAudioTracks(handle)
       pendingAudioRevokeRef.current = latestAudioTracksRef.current
       setAudioTracks(nextAudioTracks)
-      setSoundtrackFilename(filename)
+      setAudioClips((previous) => addAudioClip(previous, filename))
       setSoundtrackAttribution(attribution)
       setBeatGridCache(undefined)
       setManualBeatGrid(undefined)
@@ -234,12 +240,17 @@ export function useProject({ onFolderLoaded }: Options = {}) {
     return filename
   }, [])
 
-  const changeSoundtrack = useCallback((filename: string | null) => {
-    setSoundtrackFilename(filename)
-    setSoundtrackAttribution(null)
-    setBeatGridCache(undefined)
-    setManualBeatGrid(undefined)
-  }, [])
+  const updateAudioClips = useCallback((clips: AudioClip[]) => {
+    const primaryChanged = audioClips[0]?.filename !== clips[0]?.filename
+    if (primaryChanged || clips.length === 0) {
+      setBeatGridCache(undefined)
+      setManualBeatGrid(undefined)
+    }
+    if (clips.length === 0) {
+      setSoundtrackAttribution(null)
+    }
+    setAudioClips(clips)
+  }, [audioClips])
 
   const updateBeatGridPersist = useCallback((update: {
     beatGridCache?: BeatGrid
@@ -291,6 +302,7 @@ export function useProject({ onFolderLoaded }: Options = {}) {
   return {
     aspectRatio,
     setAspectRatio,
+    audioClips,
     audioTracks,
     beatGridCache,
     globalSettings,
@@ -298,9 +310,10 @@ export function useProject({ onFolderLoaded }: Options = {}) {
     manualBeatGrid,
     slides,
     setSlides,
-    soundtrackFilename,
+    soundtrackAttribution,
     themeName,
     setThemeName,
+    updateAudioClips,
     updateBeatGridPersist,
     loading,
     error,
@@ -315,7 +328,6 @@ export function useProject({ onFolderLoaded }: Options = {}) {
     refresh,
     openRecent,
     addJamendoTrack,
-    changeSoundtrack,
     dismissCorruptError,
     saveExportedVideo,
   }
diff --git a/src/project-store/schema.ts b/src/project-store/schema.ts
index 0c0e03f..55a0081 100644
--- a/src/project-store/schema.ts
+++ b/src/project-store/schema.ts
@@ -28,8 +28,14 @@ export type SerializedTitleSlide = {
 
 export type SerializedSlide = SerializedMediaSlide | SerializedTitleSlide
 
+export type SerializedAudioClip = {
+  filename: string
+  gainDb?: number
+}
+
 export type SlideshowJson = {
   aspectRatio?: AspectRatio
+  audioClips?: SerializedAudioClip[]
   globalSettings?: GlobalSettings
   schemaVersion: number
   slides: SerializedSlide[]
diff --git a/src/sequence-planner/ducking.test.ts b/src/sequence-planner/ducking.test.ts
index 5d1261d..d5b3f2b 100644
--- a/src/sequence-planner/ducking.test.ts
+++ b/src/sequence-planner/ducking.test.ts
@@ -21,7 +21,7 @@ function makeSlide(
 }
 
 const SETTINGS = { ...DEFAULT_GLOBAL_SETTINGS, transitionType: 'cut' as const }
-const SOUNDTRACK = { blobUrl: 'blob:audio', durationInFrames: 900 }
+const AUDIO_CLIP = [{ blobUrl: 'blob:audio', durationInFrames: 900 }]
 
 describe('plan — soundtrack ducking envelope', () => {
   it('ducks music during a video slide between photos', () => {
@@ -29,8 +29,8 @@ describe('plan — soundtrack ducking envelope', () => {
     const video = makeSlide('v', 'video', 120)
     const photo2 = makeSlide('b', 'image', 90)
 
-    const result = plan([photo, video, photo2], SETTINGS, undefined, SOUNDTRACK)
-    const envelope = result.soundtrack?.duckingEnvelope
+    const result = plan([photo, video, photo2], SETTINGS, undefined, AUDIO_CLIP)
+    const envelope = result.duckingEnvelope
 
     expect(envelope).toBeDefined()
     expect(envelope!.rampFrames).toBe(DUCK_RAMP_FRAMES)
@@ -50,19 +50,19 @@ describe('plan — soundtrack ducking envelope', () => {
   it('does not duck when video audio is muted', () => {
     const video = makeSlide('v', 'video', 120, { muteVideoAudio: true })
 
-    const result = plan([video], SETTINGS, undefined, SOUNDTRACK)
+    const result = plan([video], SETTINGS, undefined, AUDIO_CLIP)
 
-    expect(result.soundtrack?.duckingEnvelope.segments).toEqual([])
+    expect(result.duckingEnvelope?.segments).toEqual([])
     expect(result.entries[0].videoVolume).toBe(0)
   })
 
   it('mutes soundtrack when muteMusic is set', () => {
     const video = makeSlide('v', 'video', 120, { muteMusic: true })
 
-    const result = plan([video], SETTINGS, undefined, SOUNDTRACK)
-    const { keyframes } = result.soundtrack!.duckingEnvelope
+    const result = plan([video], SETTINGS, undefined, AUDIO_CLIP)
+    const { keyframes } = result.duckingEnvelope!
 
-    expect(result.soundtrack?.duckingEnvelope.segments).toEqual([])
+    expect(result.duckingEnvelope?.segments).toEqual([])
     expect(keyframes).toContainEqual({ frame: 0, volume: 0 })
     expect(keyframes).toContainEqual({ frame: 120, volume: 1 })
   })
@@ -70,11 +70,11 @@ describe('plan — soundtrack ducking envelope', () => {
   it('uses custom musicVolume instead of default duck level', () => {
     const video = makeSlide('v', 'video', 120, { musicVolume: 0.5 })
 
-    const result = plan([video], SETTINGS, undefined, SOUNDTRACK)
+    const result = plan([video], SETTINGS, undefined, AUDIO_CLIP)
 
-    expect(result.soundtrack?.duckingEnvelope.segments).toEqual([])
-    expect(result.soundtrack?.duckingEnvelope.keyframes).toContainEqual({ frame: 0, volume: 0.5 })
-    expect(result.soundtrack?.duckingEnvelope.keyframes).toContainEqual({ frame: 120, volume: 1 })
+    expect(result.duckingEnvelope?.segments).toEqual([])
+    expect(result.duckingEnvelope?.keyframes).toContainEqual({ frame: 0, volume: 0.5 })
+    expect(result.duckingEnvelope?.keyframes).toContainEqual({ frame: 120, volume: 1 })
   })
 })
 
@@ -92,8 +92,8 @@ describe('plan — ducking envelope property', () => {
     ]
 
     for (const slides of cases) {
-      const result = plan(slides, SETTINGS, undefined, SOUNDTRACK)
-      const envelope = result.soundtrack!.duckingEnvelope
+      const result = plan(slides, SETTINGS, undefined, AUDIO_CLIP)
+      const envelope = result.duckingEnvelope!
       const expectedSpans = getUnmutedVideoAudioSpans(result.entries).filter((span) => {
         const entry = result.entries.find((candidate) => candidate.startFrame === span.startFrame)
         return entry?.slide.overrides?.musicVolume === undefined
diff --git a/src/sequence-planner/index.ts b/src/sequence-planner/index.ts
index 95ab329..d5da45d 100644
--- a/src/sequence-planner/index.ts
+++ b/src/sequence-planner/index.ts
@@ -1,4 +1,14 @@
 export { plan, TRANSITION_FRAMES } from './planner'
 export { slideIdAtFrame, startFrameForSlideId } from './playback'
-export type { SoundtrackInput } from './planner'
-export type { MediaMetadata, RenderPlan, RenderPlanEntry, SoundtrackTrack, TransitionSpec, DuckingEnvelope, DuckingSegment, VolumeKeyframe } from './types'
+export type { AudioClipInput } from './planner'
+export type {
+  AudioSegment,
+  MediaMetadata,
+  RenderPlan,
+  RenderPlanEntry,
+  SoundtrackTrack,
+  TransitionSpec,
+  DuckingEnvelope,
+  DuckingSegment,
+  VolumeKeyframe,
+} from './types'
diff --git a/src/sequence-planner/planner.test.ts b/src/sequence-planner/planner.test.ts
index 88b81fc..507a9b5 100644
--- a/src/sequence-planner/planner.test.ts
+++ b/src/sequence-planner/planner.test.ts
@@ -377,32 +377,58 @@ describe('plan — title slides', () => {
   })
 })
 
-describe('plan — soundtrack', () => {
-  const SOUNDTRACK = { blobUrl: 'blob:audio', durationInFrames: 300 }
-
-  it('includes soundtrack on RenderPlan when provided', () => {
-    const result = plan([IMG_90], CROSSFADE, undefined, SOUNDTRACK)
-    expect(result.soundtrack).toEqual({
-      ...SOUNDTRACK,
-      duckingEnvelope: {
-        keyframes: [{ frame: 0, volume: 1 }],
-        rampFrames: 6,
-        segments: [],
+describe('plan — audio clips', () => {
+  const CLIP_A = { blobUrl: 'blob:audio-a', durationInFrames: 120 }
+  const CLIP_B = { blobUrl: 'blob:audio-b', durationInFrames: 90 }
+  const DUCKING = {
+    keyframes: [{ frame: 0, volume: 1 }],
+    rampFrames: 6,
+    segments: [],
+  }
+
+  it('includes sequential audio segments on RenderPlan when provided', () => {
+    const result = plan([IMG_90], CROSSFADE, undefined, [CLIP_A])
+    expect(result.audioSegments).toEqual([
+      {
+        blobUrl: CLIP_A.blobUrl,
+        durationInFrames: CLIP_A.durationInFrames,
+        gainDb: 0,
+        startFrame: 0,
       },
-    })
+    ])
+    expect(result.duckingEnvelope).toEqual(DUCKING)
     expect(result.totalFrames).toBe(90)
   })
 
-  it('omits soundtrack when not provided', () => {
+  it('omits audio segments when not provided', () => {
     const result = plan([IMG_90], CROSSFADE)
-    expect(result.soundtrack).toBeUndefined()
+    expect(result.audioSegments).toBeUndefined()
+    expect(result.duckingEnvelope).toBeUndefined()
+  })
+
+  it('places clip 2 immediately after clip 1 with no gap', () => {
+    const result = plan([IMG_90], CROSSFADE, undefined, [CLIP_A, CLIP_B])
+    expect(result.audioSegments).toEqual([
+      {
+        blobUrl: CLIP_A.blobUrl,
+        durationInFrames: 120,
+        gainDb: 0,
+        startFrame: 0,
+      },
+      {
+        blobUrl: CLIP_B.blobUrl,
+        durationInFrames: 90,
+        gainDb: 0,
+        startFrame: 120,
+      },
+    ])
   })
 
-  it('keeps slideshow totalFrames independent of soundtrack duration', () => {
-    const shortTrack = { blobUrl: 'blob:short', durationInFrames: 60 }
-    const result = plan([IMG_90, IMG_90B], CROSSFADE, undefined, shortTrack)
+  it('keeps slideshow totalFrames independent of audio duration', () => {
+    const shortClip = { blobUrl: 'blob:short', durationInFrames: 60 }
+    const result = plan([IMG_90, IMG_90B], CROSSFADE, undefined, [shortClip])
     expect(result.totalFrames).toBe(165)
-    expect(result.soundtrack?.durationInFrames).toBe(60)
+    expect(result.audioSegments?.[0].durationInFrames).toBe(60)
   })
 })
 
diff --git a/src/sequence-planner/planner.ts b/src/sequence-planner/planner.ts
index d5baad5..856d090 100644
--- a/src/sequence-planner/planner.ts
+++ b/src/sequence-planner/planner.ts
@@ -6,15 +6,19 @@ import type { BeatGrid } from '../beat-grid/types'
 import { nudge } from '../beat-grid/nudge'
 import { buildDuckingEnvelope, resolveVideoVolume } from './ducking'
 import type {
+  AudioSegment,
   KenBurnsVector,
   MediaMetadata,
   RenderPlan,
   RenderPlanEntry,
-  SoundtrackTrack,
   TransitionSpec,
 } from './types'
 
-export type SoundtrackInput = Pick<SoundtrackTrack, 'blobUrl' | 'durationInFrames'>
+export type AudioClipInput = {
+  blobUrl: string
+  durationInFrames: number
+  gainDb?: number
+}
 
 export { DUCK_LEVEL, DUCK_RAMP_FRAMES, FULL_VOLUME, getUnmutedVideoAudioSpans } from './ducking'
 
@@ -37,22 +41,40 @@ const KB_PRESETS: KenBurnsVector[] = [
 
 const KB_ZOOM_IN_PRESETS: KenBurnsVector[] = [KB_PRESETS[0], KB_PRESETS[2]]
 
+function buildAudioOutput(
+  entries: RenderPlanEntry[],
+  audioClips?: AudioClipInput[],
+): Pick<RenderPlan, 'audioSegments' | 'duckingEnvelope'> {
+  if (!audioClips?.length) return {}
+
+  const duckingEnvelope = buildDuckingEnvelope(entries)
+  const audioSegments: AudioSegment[] = []
+  let startFrame = 0
+
+  for (const clip of audioClips) {
+    audioSegments.push({
+      blobUrl: clip.blobUrl,
+      durationInFrames: clip.durationInFrames,
+      gainDb: clip.gainDb ?? 0,
+      startFrame,
+    })
+    startFrame += clip.durationInFrames
+  }
+
+  return { audioSegments, duckingEnvelope }
+}
+
 export function plan(
   slides: Slide[],
   settings: GlobalSettings,
   mediaMetadata?: Map<string, MediaMetadata>,
-  soundtrack?: SoundtrackInput,
+  audioClips?: AudioClipInput[],
   beatGrid?: BeatGrid,
 ): RenderPlan {
   if (slides.length === 0) {
     return {
       entries: [],
-      soundtrack: soundtrack
-        ? {
-            ...soundtrack,
-            duckingEnvelope: buildDuckingEnvelope([]),
-          }
-        : undefined,
+      ...buildAudioOutput([], audioClips),
       totalFrames: 0,
     }
   }
@@ -146,12 +168,7 @@ export function plan(
 
   return {
     entries,
-    soundtrack: soundtrack
-      ? {
-          ...soundtrack,
-          duckingEnvelope: buildDuckingEnvelope(entries),
-        }
-      : undefined,
+    ...buildAudioOutput(entries, audioClips),
     totalFrames: cursor,
   }
 }
diff --git a/src/sequence-planner/types.ts b/src/sequence-planner/types.ts
index 7cb8d22..0f82097 100644
--- a/src/sequence-planner/types.ts
+++ b/src/sequence-planner/types.ts
@@ -48,7 +48,16 @@ export type SoundtrackTrack = {
   durationInFrames: number
 }
 
+export type AudioSegment = {
+  blobUrl: string
+  durationInFrames: number
+  gainDb: number
+  startFrame: number
+}
+
 export type RenderPlan = {
+  audioSegments?: AudioSegment[]
+  duckingEnvelope?: DuckingEnvelope
   entries: RenderPlanEntry[]
   soundtrack?: SoundtrackTrack
   totalFrames: number
diff --git a/src/timeline-core/audioClips.test.ts b/src/timeline-core/audioClips.test.ts
new file mode 100644
index 0000000..df0b90d
--- /dev/null
+++ b/src/timeline-core/audioClips.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { addAudioClip, moveAudioClip, removeAudioClip } from './audioClips'
+import type { AudioClip } from './types'
+
+const CLIPS: AudioClip[] = [
+  { filename: 'a.mp3' },
+  { filename: 'b.mp3' },
+  { filename: 'c.mp3' },
+]
+
+describe('audio clip ordering', () => {
+  it('adds a clip when not already present', () => {
+    expect(addAudioClip(CLIPS, 'd.mp3')).toEqual([...CLIPS, { filename: 'd.mp3' }])
+  })
+
+  it('does not duplicate an existing clip', () => {
+    expect(addAudioClip(CLIPS, 'b.mp3')).toBe(CLIPS)
+  })
+
+  it('moves a clip to a new position', () => {
+    expect(moveAudioClip(CLIPS, 0, 2)).toEqual([
+      { filename: 'b.mp3' },
+      { filename: 'c.mp3' },
+      { filename: 'a.mp3' },
+    ])
+  })
+
+  it('removes a clip by index', () => {
+    expect(removeAudioClip(CLIPS, 1)).toEqual([
+      { filename: 'a.mp3' },
+      { filename: 'c.mp3' },
+    ])
+  })
+})
diff --git a/src/timeline-core/audioClips.ts b/src/timeline-core/audioClips.ts
new file mode 100644
index 0000000..87e8950
--- /dev/null
+++ b/src/timeline-core/audioClips.ts
@@ -0,0 +1,18 @@
+import type { AudioClip } from './types'
+
+export function addAudioClip(clips: AudioClip[], filename: string): AudioClip[] {
+  if (clips.some((clip) => clip.filename === filename)) return clips
+  return [...clips, { filename }]
+}
+
+export function moveAudioClip(clips: AudioClip[], fromIndex: number, toIndex: number): AudioClip[] {
+  if (fromIndex === toIndex) return clips
+  const result = [...clips]
+  const [item] = result.splice(fromIndex, 1)
+  result.splice(toIndex, 0, item)
+  return result
+}
+
+export function removeAudioClip(clips: AudioClip[], index: number): AudioClip[] {
+  return clips.filter((_, clipIndex) => clipIndex !== index)
+}
diff --git a/src/timeline-core/index.ts b/src/timeline-core/index.ts
index 0a14e88..337b5c2 100644
--- a/src/timeline-core/index.ts
+++ b/src/timeline-core/index.ts
@@ -1,6 +1,7 @@
 export { ASPECT_RATIOS, DEFAULT_ASPECT_RATIO, dimensionsForAspectRatio, isAspectRatio } from './aspect'
 export type { AspectRatio, CanvasDimensions } from './aspect'
 export { getMediaType, isSupportedAudio, isSupportedMedia, sortByFilename } from './media'
+export { addAudioClip, moveAudioClip, removeAudioClip } from './audioClips'
 export { moveSlide, toggleExcluded, filterIncluded, createTitleSlide } from './timeline'
 export { resolve, applyImageDuration, DEFAULT_GLOBAL_SETTINGS, THEMES, applyTheme } from './settings'
 export type {
@@ -13,5 +14,5 @@ export type {
   KenBurnsMode,
   ThemeName,
 } from './settings'
-export type { MediaSlide, TitleSlide, Slide, MediaType } from './types'
+export type { AudioClip, MediaSlide, TitleSlide, Slide, MediaType } from './types'
 export { isTitleSlide } from './types'
diff --git a/src/timeline-core/types.ts b/src/timeline-core/types.ts
index c884cb7..c7d47ed 100644
--- a/src/timeline-core/types.ts
+++ b/src/timeline-core/types.ts
@@ -31,6 +31,11 @@ export type TitleSlide = {
 
 export type Slide = MediaSlide | TitleSlide
 
+export type AudioClip = {
+  filename: string
+  gainDb?: number
+}
+
 export function isTitleSlide(s: Slide): s is TitleSlide {
   return 'kind' in s && (s as TitleSlide).kind === 'title'
 }