Fade sounds and videos in and out on the items of a composition

A trailer needs its music and its clips to come in softly and leave
softly. Until now an item of a composition could only play at one
level, and a video item could not even be turned down on its own.

- Every item with sound gets a grip at its upper left and upper right
  corner. Dragging one inwards fades the item in or out. Dragging it
  back to the edge removes the fade. Lower down the same edge still
  trims as before.
- The fade is drawn as its curve, with the part above it darkened.
  The inspector shows Fade in and Fade out in seconds, each with the
  curves sound clips already know.
- The model keeps fadeIn and fadeOut in frames plus curveIn and
  curveOut on the item. Old projects load unchanged. An item shorter
  than its fades plays them cut to its length but keeps the setting.
- Sound, pattern and song items ramp the gain of their own bus. The
  scheduler plans the ramps on the audio clock next to the notes.
  Starting in the middle of a fade picks it up from there.
- Video items set the new sprite property Video volume each frame.
  It multiplies with the fade and is only shown for a driven video.
  The player glides to each new level over 15 ms so it does not click
  between frames.

Not covered: a container item that carries a video further down gets
no grips. Only a video on the item's own sprite counts.

Tests:
- tsc, eslint, Prettier clean.
- Unit tests for composition, music, song and sound (12 files): 269
  passed, 7 of them new.
- e2e 69 on melektaus-atx: ALL PASSED, 21 checks. 69p drags a grip to
  a fade in of 10 frames and hears the item bus rise from 0.127 over
  0.229 and 0.339 to 1 within one second.
- Counter-checks as unit tests: without the audio ramps, and without
  the level on the video sprite in the game, both go red.
- Gate on melektaus-atx: 309 files, 4796 tests passed, 8 more than
  at 77ac9d1. The first run failed 14 tests in 6 files that list the
  default sprite properties or the bus levels in full. They now
  expect videoVolume and the new level field of busLevels.
- Not tried in a browser: video fades, pattern and song items with a
  fade.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/viewport/SoundLibrary.ts

@@ -30,12 +30,12 @@ import { arrivalOf, sendDelays, type TimedBus } from '../core/music/routing';
 import type { SendTap } from '../core/graph/Graph';
 import { MASTER_MIX, type MixBus, type MixSend, sameMix } from '../core/music/mixer';
 import { limiterLatency } from '../core/soundfx/dynamics';
-import type { ScheduledClip, ScheduledNote } from '../core/music/Scheduler';
+import type { ScheduledClip, ScheduledNote, ScheduledRamp } from '../core/music/Scheduler';
 import { dbToGain, SOUND_ITEM_MAX_DB } from '../core/music/song';
 import { DEFAULT_TEMPO } from '../core/music/time';
 import { playedPlan, type StreamedFile, type StreamPlan } from '../core/music/streams';
 import { STREAM_RATE } from '../core/music/streamQueue';
-import { type CutRange, cutChannels, cutRange, parseCutName } from '../core/model/sound';
+import { type CutRange, cutChannels, cutRange, fadeGain, parseCutName } from '../core/model/sound';
 import { shifterLatency } from '../core/soundfx/pitchPlayer';
 import { REVERB_MAX_DECAY } from '../core/soundfx/reverb';
 import type { AudioSink, ClipTiming, NoteTiming } from '../runtime/systems/Audio';
@@ -94,6 +94,8 @@ const GLIDE_MEMORY = 2;
 const PEAK_BUCKETS = 1024;
 /** Samples the cuts made so far may hold together before the oldest are let go; one is always kept. */
 const CUT_BUDGET = 64 * 1024 * 1024;
+/** Points a ramp of a bus's level is drawn with (#418); the audio clock glides between them. */
+const RAMP_POINTS = 64;
 
 /**
  * One way's sound as a voice holds it: a buffer source, or the pitch worklet where the way has a
@@ -592,10 +594,14 @@ export class SoundLibrary implements AudioSink {
     return { latency: bus.chain?.latency ?? 0, into: bus.into, ...(bus.sends && { sends: bus.sends }) };
   };
 
-  /** What each track's bus was last set to, with whether its sound FX is there and how late (test hook). */
+  /**
+   * What each track's bus was last set to, with whether its sound FX is there and how late, and the
+   * level it has now, ramps and fades included (test hook).
+   */
   busLevels(): {
     name: string;
     gain: number;
+    level: number;
     pan: number;
     into: string | null;
     fx: boolean;
@@ -605,6 +611,7 @@ export class SoundLibrary implements AudioSink {
     return [...this.buses].map(([name, bus]) => ({
       name,
       ...bus.set,
+      level: bus.gain.gain.value,
       into: bus.sends ? null : bus.into,
       fx: bus.chain !== null,
       latency: bus.chain?.latency ?? 0,
@@ -1131,6 +1138,10 @@ export class SoundLibrary implements AudioSink {
       ...(strikeClip && {
         strikeClip: (clip: ScheduledClip) => strikeClip({ ...clip, bus: into(clip.bus) }),
       }),
+      // Only a track's: the master of the playing is its level and its fades.
+      ramp: (ramp) => {
+        if (tracks.has(ramp.bus)) this.rampBus(groupBus(id, ramp.bus), ramp);
+      },
     };
     this.sequences.start(id, name, routed, owner);
     return id;
@@ -1382,6 +1393,31 @@ export class SoundLibrary implements AudioSink {
     return Math.max(0, ...this.groupBuses(id).map((name) => this.busLatency(name)));
   }
 
+  /**
+   * A track of a playing ramped (#418): set to its gain where the ramp takes no time, else along its
+   * curve from where the ramp was taken up.
+   */
+  private rampBus(name: string, ramp: ScheduledRamp): void {
+    const param = this.buses.get(name)?.gain.gain;
+    if (!param) return;
+    const at = Math.max(this.audio().currentTime, ramp.at);
+    const end = ramp.at + ramp.duration;
+    const level = (t: number) => ramp.gain * fadeGain(ramp.curve, ramp.rise ? t : 1 - t);
+    param.cancelScheduledValues(at);
+    if (!(end > at)) {
+      param.setValueAtTime(level(1), at);
+      return;
+    }
+    const values = Float32Array.from({ length: RAMP_POINTS }, (_, i) =>
+      level(ramp.done + ((1 - ramp.done) * i) / (RAMP_POINTS - 1)),
+    );
+    try {
+      param.setValueCurveAtTime(values, at, end - at);
+    } catch {
+      param.setValueAtTime(level(1), end);
+    }
+  }
+
   /** The master of a playing, from where it stands at `at` to `gain`, there `seconds` later. */
   private level(id: number, gain: number, at: number, seconds: number): void {
     const master = this.buses.get(groupBus(id, ''));