@motionscript/browser 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/ticker.d.ts

@@ -1,8 +1,8 @@
 import { Ticker } from "@motionscript/core";
 /**
- * Ticker backed by a Web Audio AudioContext. Scene time advances in
- * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes
- * scheduled on the same context play perfectly in sync.
+ * Ticker backed by a Web Audio AudioContext. Clip time follows
+ * `audioContext.currentTime` (within a few ms, see `startLoop`), so any
+ * AudioBufferSourceNodes scheduled on the same context play in sync.
  *
  * When paused we suspend the context (audio stops, currentTime freezes);
  * when playing we resume and a rAF loop publishes ticks at the target fps.
@@ -12,29 +12,61 @@ import { Ticker } from "@motionscript/core";
  * graph to schedule against even on scenes that contain no audio nodes.
  */
 export declare class WebTicker extends Ticker {
-    private context;
-    private ownsContext;
+    private readonly contextOf;
+    private readonly ownsContext;
+    private _context;
     private fps;
     private playStartCtxTime;
     private seekOffset;
     private speed;
     private reverse;
     private rafId;
+    /** Bumped by every `seek`, so the loop can tell that a listener or tick callback moved the playhead under it. */
+    private seekEpoch;
     private silentSource;
+    /**
+     * `context` may be a getter, called on the first `play`: a session hands
+     * over its audio sink's, which is created on first use, so a session that
+     * never plays never opens the audio device.
+     */
     constructor(opts: {
-        context?: AudioContext;
+        context?: AudioContext | (() => AudioContext);
         fps: number;
     });
     getContext(): AudioContext;
+    private get context();
     seek(t: number): void;
-    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */
-    play(speed?: number, reverse?: boolean): Promise<void>;
+    /**
+     * Anchors elapsed-time tracking to the current `context.currentTime`, starts the silent ticker
+     * + rAF tick loop and asks a suspended context to resume.
+     *
+     * Synchronous, as {@link Ticker.play} is: a `pause` or `seek` in the same turn must find a
+     * running clock to stop. A suspended context's `currentTime` is frozen, so the clock holds at
+     * the anchor until the resume lands — outside a user gesture that is never.
+     */
+    play(speed?: number, reverse?: boolean): void;
     /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */
     pause(): void;
     /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */
     private startSilentTicker;
     private stopSilentTicker;
-    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */
+    /** Where the playhead is now, from elapsed `context.currentTime` (so it stays sample-accurate), and whether that is the end of the run. */
+    private position;
+    /**
+     * Drives ticks off `requestAnimationFrame`, firing `tick()` when the playhead reaches another
+     * project frame — and once more at the end of the run, whether or not it landed on a boundary.
+     *
+     * `context.currentTime` moves in whole render quanta handed over in bursts: at 48 kHz on a
+     * 60 Hz display it advances 8, 10.67, 18.67 or 21.33 ms between animation frames, and a
+     * playhead read straight off it skipped up to a third of the frames. So the playhead advances
+     * by each animation frame's own interval, pulled 5% of the way to the audio clock every frame
+     * and snapped to it when they disagree by more than 50 ms (a stall, a seek). It stays within
+     * a few ms of the audio and moves one frame per frame.
+     *
+     * A listener may `seek` (a host looping wraps to 0 when it hears the end), so the end is
+     * re-read after the listeners and the tick callbacks have run: a run that was seeked out of
+     * its end carries on, and one that was not pauses itself.
+     */
     private startLoop;
     private stopLoop;
     dispose(): void;

package/dist/ticker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticker.d.ts","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,qBAAa,SAAU,SAAQ,MAAM;IACjC,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,GAAG,CAAS;IAEpB,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,OAAO,CAAkB;IAEjC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,YAAY,CAAsC;gBAE9C,IAAI,EAAE;QAAE,OAAO,CAAC,EAAE,YAAY,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;IAOzD,UAAU,IAAI,YAAY;IAI1B,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAOrB,kKAAkK;IAC5J,IAAI,CAAC,KAAK,GAAE,MAAU,EAAE,OAAO,GAAE,OAAe,GAAG,OAAO,CAAC,IAAI,CAAC;IAetE,qJAAqJ;IACrJ,KAAK,IAAI,IAAI;IAUb,mNAAmN;IACnN,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;IAaxB,sMAAsM;IACtM,OAAO,CAAC,SAAS;IA2CjB,OAAO,CAAC,QAAQ;IAOhB,OAAO,IAAI,IAAI;CAQlB"}
+{"version":3,"file":"ticker.d.ts","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,qBAAa,SAAU,SAAQ,MAAM;IACjC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAqB;IAC/C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAU;IACtC,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,GAAG,CAAS;IAEpB,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,OAAO,CAAkB;IAEjC,OAAO,CAAC,KAAK,CAAuB;IACpC,iHAAiH;IACjH,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,YAAY,CAAsC;IAE1D;;;;OAIG;gBACS,IAAI,EAAE;QAAE,OAAO,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,YAAY,CAAC,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;IAQhF,UAAU,IAAI,YAAY;IAK1B,OAAO,KAAK,OAAO,GAElB;IAED,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IASrB;;;;;;;OAOG;IACH,IAAI,CAAC,KAAK,GAAE,MAAU,EAAE,OAAO,GAAE,OAAe,GAAG,IAAI;IAwBvD,qJAAqJ;IACrJ,KAAK,IAAI,IAAI;IAUb,mNAAmN;IACnN,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;IAaxB,2IAA2I;IAC3I,OAAO,CAAC,QAAQ;IAShB;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,SAAS;IA6DjB,OAAO,CAAC,QAAQ;IAOhB,OAAO,IAAI,IAAI;CAQlB"}

package/dist/ticker.js

@@ -1,8 +1,8 @@
 import { Ticker } from "@motionscript/core";
 /**
- * Ticker backed by a Web Audio AudioContext. Scene time advances in
- * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes
- * scheduled on the same context play perfectly in sync.
+ * Ticker backed by a Web Audio AudioContext. Clip time follows
+ * `audioContext.currentTime` (within a few ms, see `startLoop`), so any
+ * AudioBufferSourceNodes scheduled on the same context play in sync.
  *
  * When paused we suspend the context (audio stops, currentTime freezes);
  * when playing we resume and a rAF loop publishes ticks at the target fps.
@@ -12,37 +12,67 @@ import { Ticker } from "@motionscript/core";
  * graph to schedule against even on scenes that contain no audio nodes.
  */
 export class WebTicker extends Ticker {
-    context;
+    contextOf;
     ownsContext;
+    _context = null;
     fps;
     playStartCtxTime = 0;
     seekOffset = 0;
     speed = 1;
     reverse = false;
     rafId = null;
+    /** Bumped by every `seek`, so the loop can tell that a listener or tick callback moved the playhead under it. */
+    seekEpoch = 0;
     silentSource = null;
+    /**
+     * `context` may be a getter, called on the first `play`: a session hands
+     * over its audio sink's, which is created on first use, so a session that
+     * never plays never opens the audio device.
+     */
     constructor(opts) {
         super();
-        this.context = opts.context ?? new AudioContext();
-        this.ownsContext = !opts.context;
+        const { context } = opts;
+        this.contextOf = typeof context === "function" ? context : () => context ?? new AudioContext();
+        this.ownsContext = !context;
         this.fps = opts.fps;
     }
     getContext() {
-        return this.context;
+        this._context ??= this.contextOf();
+        return this._context;
+    }
+    get context() {
+        return this.getContext();
     }
     seek(t) {
         const clamped = Math.max(0, Math.min(t, this.duration));
         this.seekOffset = clamped;
-        this.playStartCtxTime = this.context.currentTime;
+        // The clock is read only while playing; `play` anchors it afresh.
+        if (this.isPlaying)
+            this.playStartCtxTime = this.context.currentTime;
+        this.seekEpoch++;
         this.setCurrentTime(clamped);
     }
-    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */
-    async play(speed = 1, reverse = false) {
+    /**
+     * Anchors elapsed-time tracking to the current `context.currentTime`, starts the silent ticker
+     * + rAF tick loop and asks a suspended context to resume.
+     *
+     * Synchronous, as {@link Ticker.play} is: a `pause` or `seek` in the same turn must find a
+     * running clock to stop. A suspended context's `currentTime` is frozen, so the clock holds at
+     * the anchor until the resume lands — outside a user gesture that is never.
+     */
+    play(speed = 1, reverse = false) {
         this.speed = speed;
         this.reverse = reverse;
         this.seekOffset = this.currentTime;
         if (this.context.state === "suspended") {
-            await this.context.resume();
+            this.context.resume().then(() => {
+                // A pause that arrived while the resume was pending could not suspend it.
+                if (!this.isPlaying && this.context.state === "running")
+                    void this.context.suspend();
+            }, (error) => {
+                console.error("[WebTicker] The audio context could not resume:", error);
+                this.pause();
+            });
         }
         this.playStartCtxTime = this.context.currentTime;
         this.startSilentTicker();
@@ -54,8 +84,8 @@ export class WebTicker extends Ticker {
         this.seekOffset = this.currentTime;
         this.stopLoop();
         this.stopSilentTicker();
-        if (this.context.state === "running") {
-            this.context.suspend();
+        if (this._context?.state === "running") {
+            this._context.suspend();
         }
         super.pause();
     }
@@ -84,43 +114,85 @@ export class WebTicker extends Ticker {
             this.silentSource = null;
         }
     }
-    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */
+    /** Where the playhead is now, from elapsed `context.currentTime` (so it stays sample-accurate), and whether that is the end of the run. */
+    position() {
+        const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;
+        const next = this.reverse
+            ? this.seekOffset - elapsed
+            : this.seekOffset + elapsed;
+        const time = Math.max(0, Math.min(next, this.duration));
+        return { time, ended: this.reverse ? time <= 0 : time >= this.duration };
+    }
+    /**
+     * Drives ticks off `requestAnimationFrame`, firing `tick()` when the playhead reaches another
+     * project frame — and once more at the end of the run, whether or not it landed on a boundary.
+     *
+     * `context.currentTime` moves in whole render quanta handed over in bursts: at 48 kHz on a
+     * 60 Hz display it advances 8, 10.67, 18.67 or 21.33 ms between animation frames, and a
+     * playhead read straight off it skipped up to a third of the frames. So the playhead advances
+     * by each animation frame's own interval, pulled 5% of the way to the audio clock every frame
+     * and snapped to it when they disagree by more than 50 ms (a stall, a seek). It stays within
+     * a few ms of the audio and moves one frame per frame.
+     *
+     * A listener may `seek` (a host looping wraps to 0 when it hears the end), so the end is
+     * re-read after the listeners and the tick callbacks have run: a run that was seeked out of
+     * its end carries on, and one that was not pauses itself.
+     */
     startLoop() {
         if (this.rafId !== null)
             return;
-        const frameDt = 1 / this.fps;
-        let lastTickTime = this.currentTime;
-        const loop = async () => {
-            const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;
-            const next = this.reverse
-                ? this.seekOffset - elapsed
-                : this.seekOffset + elapsed;
-            const clamped = Math.max(0, Math.min(next, this.duration));
-            const ended = this.reverse ? clamped <= 0 : clamped >= this.duration;
-            // Whether this animation frame has carried the playhead onto a new
-            // *scene* frame. This loop runs at the display's refresh rate, which
-            // on a 120 or 144Hz panel is two or three times the rate anything is
-            // rendered at — so the clock advances every time round (the elapsed
-            // maths in `play`/`pause` depend on it being exact) while listeners
-            // hear about it once per frame. The end of the run always reports,
-            // whether or not it landed on a boundary, or the final position would
-            // never reach a host. See `Ticker.setCurrentTime`.
-            const crossed = Math.abs(clamped - lastTickTime) >= frameDt;
-            this.setCurrentTime(clamped, crossed || ended);
-            if (crossed) {
-                lastTickTime = clamped;
-                // Await so that a slow tick (asset load on a scene
+        const frameOf = (t) => Math.floor(t * this.fps + 1e-6);
+        let lastFrame = frameOf(this.currentTime);
+        let steady = null;
+        const steadied = (now) => {
+            const audio = this.position();
+            let time = audio.time;
+            if (!audio.ended && steady && steady.epoch === this.seekEpoch) {
+                const step = ((now - steady.at) / 1000) * this.speed;
+                const predicted = this.reverse ? steady.time - step : steady.time + step;
+                const drift = audio.time - predicted;
+                const next = predicted + drift * 0.05;
+                if (Math.abs(drift) <= 0.05 && next > 0 && next < this.duration)
+                    time = next;
+            }
+            steady = { time, at: now, epoch: this.seekEpoch };
+            return { time, ended: audio.ended };
+        };
+        const loop = async (now) => {
+            let epoch = this.seekEpoch;
+            const position = steadied(now);
+            let ended = position.ended;
+            // This loop runs at the display's refresh rate, which on a 120 or 144Hz panel is two
+            // or three times the rate anything is rendered at — so the clock advances every time
+            // round (the elapsed maths in `play`/`pause` depend on it being exact) while listeners
+            // hear about it once per frame. The end of the run always reports, or the final
+            // position would never reach a host. See `Ticker.setCurrentTime`.
+            const crossed = frameOf(position.time) !== lastFrame;
+            const report = crossed || ended;
+            this.setCurrentTime(position.time, report);
+            const reread = () => {
+                if (this.seekEpoch === epoch)
+                    return;
+                epoch = this.seekEpoch;
+                lastFrame = frameOf(this.currentTime);
+                ended = this.position().ended;
+            };
+            reread();
+            if (report) {
+                lastFrame = frameOf(this.currentTime);
+                // Await so that a slow tick (asset load on a clip
                 // boundary) doesn't queue a second concurrent tick.
                 await this.tick();
-            }
-            if (ended) {
-                this.rafId = null;
-                return;
+                reread();
             }
             // If pause() cleared the rafId while we were awaiting tick(),
             // do not resume the loop.
             if (this.rafId === null)
                 return;
+            if (ended) {
+                this.pause();
+                return;
+            }
             this.rafId = requestAnimationFrame(loop);
         };
         this.rafId = requestAnimationFrame(loop);
@@ -135,7 +207,7 @@ export class WebTicker extends Ticker {
         this.stopLoop();
         this.stopSilentTicker();
         if (this.ownsContext) {
-            this.context.close();
+            void this._context?.close();
         }
         super.dispose();
     }

package/dist/ticker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ticker.js","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"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","sourcesContent":["import { Ticker } from \"@motionscript/core\";\n\n/**\n * Ticker backed by a Web Audio AudioContext. Scene time advances in\n * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes\n * scheduled on the same context play perfectly in sync.\n *\n * When paused we suspend the context (audio stops, currentTime freezes);\n * when playing we resume and a rAF loop publishes ticks at the target fps.\n *\n * A single silent buffer covering the full timeline is started on play(),\n * which keeps the context active and gives the browser a stable audio\n * graph to schedule against even on scenes that contain no audio nodes.\n */\nexport class WebTicker extends Ticker {\n    private context: AudioContext;\n    private ownsContext: boolean;\n    private fps: number;\n\n    private playStartCtxTime: number = 0;\n    private seekOffset: number = 0;\n    private speed: number = 1;\n    private reverse: boolean = false;\n\n    private rafId: number | null = null;\n    private silentSource: AudioBufferSourceNode | null = null;\n\n    constructor(opts: { context?: AudioContext; fps: number }) {\n        super();\n        this.context = opts.context ?? new AudioContext();\n        this.ownsContext = !opts.context;\n        this.fps = opts.fps;\n    }\n\n    getContext(): AudioContext {\n        return this.context;\n    }\n\n    seek(t: number): void {\n        const clamped = Math.max(0, Math.min(t, this.duration));\n        this.seekOffset = clamped;\n        this.playStartCtxTime = this.context.currentTime;\n        this.setCurrentTime(clamped);\n    }\n\n    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */\n    async play(speed: number = 1, reverse: boolean = false): Promise<void> {\n        this.speed = speed;\n        this.reverse = reverse;\n        this.seekOffset = this.currentTime;\n\n        if (this.context.state === \"suspended\") {\n            await this.context.resume();\n        }\n\n        this.playStartCtxTime = this.context.currentTime;\n        this.startSilentTicker();\n        super.play(speed, reverse);\n        this.startLoop();\n    }\n\n    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */\n    pause(): void {\n        this.seekOffset = this.currentTime;\n        this.stopLoop();\n        this.stopSilentTicker();\n        if (this.context.state === \"running\") {\n            this.context.suspend();\n        }\n        super.pause();\n    }\n\n    /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */\n    private startSilentTicker(): void {\n        this.stopSilentTicker();\n        const remaining = Math.max(0.001, this.duration - this.seekOffset);\n        const sampleRate = this.context.sampleRate;\n        const buffer = this.context.createBuffer(1, Math.ceil(remaining * sampleRate), sampleRate);\n        const source = this.context.createBufferSource();\n        source.buffer = buffer;\n        source.connect(this.context.destination);\n        source.start();\n        this.silentSource = source;\n    }\n\n    private stopSilentTicker(): void {\n        if (this.silentSource) {\n            try {\n                this.silentSource.onended = null;\n                this.silentSource.stop();\n                this.silentSource.disconnect();\n            } catch {\n                // already stopped\n            }\n            this.silentSource = null;\n        }\n    }\n\n    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */\n    private startLoop(): void {\n        if (this.rafId !== null) return;\n        const frameDt = 1 / this.fps;\n        let lastTickTime = this.currentTime;\n\n        const loop = async () => {\n            const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;\n            const next = this.reverse\n                ? this.seekOffset - elapsed\n                : this.seekOffset + elapsed;\n            const clamped = Math.max(0, Math.min(next, this.duration));\n            const ended = this.reverse ? clamped <= 0 : clamped >= this.duration;\n            // Whether this animation frame has carried the playhead onto a new\n            // *scene* frame. This loop runs at the display's refresh rate, which\n            // on a 120 or 144Hz panel is two or three times the rate anything is\n            // rendered at — so the clock advances every time round (the elapsed\n            // maths in `play`/`pause` depend on it being exact) while listeners\n            // hear about it once per frame. The end of the run always reports,\n            // whether or not it landed on a boundary, or the final position would\n            // never reach a host. See `Ticker.setCurrentTime`.\n            const crossed = Math.abs(clamped - lastTickTime) >= frameDt;\n            this.setCurrentTime(clamped, crossed || ended);\n\n            if (crossed) {\n                lastTickTime = clamped;\n                // Await so that a slow tick (asset load on a scene\n                // boundary) doesn't queue a second concurrent tick.\n                await this.tick();\n            }\n\n            if (ended) {\n                this.rafId = null;\n                return;\n            }\n            // If pause() cleared the rafId while we were awaiting tick(),\n            // do not resume the loop.\n            if (this.rafId === null) return;\n            this.rafId = requestAnimationFrame(loop);\n        };\n\n        this.rafId = requestAnimationFrame(loop);\n    }\n\n    private stopLoop(): void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId);\n            this.rafId = null;\n        }\n    }\n\n    dispose(): void {\n        this.stopLoop();\n        this.stopSilentTicker();\n        if (this.ownsContext) {\n            this.context.close();\n        }\n        super.dispose();\n    }\n}\n"]}
+{"version":3,"file":"ticker.js","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"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","sourcesContent":["import { Ticker } from \"@motionscript/core\";\n\n/**\n * Ticker backed by a Web Audio AudioContext. Clip time follows\n * `audioContext.currentTime` (within a few ms, see `startLoop`), so any\n * AudioBufferSourceNodes scheduled on the same context play in sync.\n *\n * When paused we suspend the context (audio stops, currentTime freezes);\n * when playing we resume and a rAF loop publishes ticks at the target fps.\n *\n * A single silent buffer covering the full timeline is started on play(),\n * which keeps the context active and gives the browser a stable audio\n * graph to schedule against even on scenes that contain no audio nodes.\n */\nexport class WebTicker extends Ticker {\n    private readonly contextOf: () => AudioContext;\n    private readonly ownsContext: boolean;\n    private _context: AudioContext | null = null;\n    private fps: number;\n\n    private playStartCtxTime: number = 0;\n    private seekOffset: number = 0;\n    private speed: number = 1;\n    private reverse: boolean = false;\n\n    private rafId: number | null = null;\n    /** Bumped by every `seek`, so the loop can tell that a listener or tick callback moved the playhead under it. */\n    private seekEpoch: number = 0;\n    private silentSource: AudioBufferSourceNode | null = null;\n\n    /**\n     * `context` may be a getter, called on the first `play`: a session hands\n     * over its audio sink's, which is created on first use, so a session that\n     * never plays never opens the audio device.\n     */\n    constructor(opts: { context?: AudioContext | (() => AudioContext); fps: number }) {\n        super();\n        const { context } = opts;\n        this.contextOf = typeof context === \"function\" ? context : () => context ?? new AudioContext();\n        this.ownsContext = !context;\n        this.fps = opts.fps;\n    }\n\n    getContext(): AudioContext {\n        this._context ??= this.contextOf();\n        return this._context;\n    }\n\n    private get context(): AudioContext {\n        return this.getContext();\n    }\n\n    seek(t: number): void {\n        const clamped = Math.max(0, Math.min(t, this.duration));\n        this.seekOffset = clamped;\n        // The clock is read only while playing; `play` anchors it afresh.\n        if (this.isPlaying) this.playStartCtxTime = this.context.currentTime;\n        this.seekEpoch++;\n        this.setCurrentTime(clamped);\n    }\n\n    /**\n     * Anchors elapsed-time tracking to the current `context.currentTime`, starts the silent ticker\n     * + rAF tick loop and asks a suspended context to resume.\n     *\n     * Synchronous, as {@link Ticker.play} is: a `pause` or `seek` in the same turn must find a\n     * running clock to stop. A suspended context's `currentTime` is frozen, so the clock holds at\n     * the anchor until the resume lands — outside a user gesture that is never.\n     */\n    play(speed: number = 1, reverse: boolean = false): void {\n        this.speed = speed;\n        this.reverse = reverse;\n        this.seekOffset = this.currentTime;\n\n        if (this.context.state === \"suspended\") {\n            this.context.resume().then(\n                () => {\n                    // A pause that arrived while the resume was pending could not suspend it.\n                    if (!this.isPlaying && this.context.state === \"running\") void this.context.suspend();\n                },\n                (error) => {\n                    console.error(\"[WebTicker] The audio context could not resume:\", error);\n                    this.pause();\n                },\n            );\n        }\n\n        this.playStartCtxTime = this.context.currentTime;\n        this.startSilentTicker();\n        super.play(speed, reverse);\n        this.startLoop();\n    }\n\n    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */\n    pause(): void {\n        this.seekOffset = this.currentTime;\n        this.stopLoop();\n        this.stopSilentTicker();\n        if (this._context?.state === \"running\") {\n            this._context.suspend();\n        }\n        super.pause();\n    }\n\n    /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */\n    private startSilentTicker(): void {\n        this.stopSilentTicker();\n        const remaining = Math.max(0.001, this.duration - this.seekOffset);\n        const sampleRate = this.context.sampleRate;\n        const buffer = this.context.createBuffer(1, Math.ceil(remaining * sampleRate), sampleRate);\n        const source = this.context.createBufferSource();\n        source.buffer = buffer;\n        source.connect(this.context.destination);\n        source.start();\n        this.silentSource = source;\n    }\n\n    private stopSilentTicker(): void {\n        if (this.silentSource) {\n            try {\n                this.silentSource.onended = null;\n                this.silentSource.stop();\n                this.silentSource.disconnect();\n            } catch {\n                // already stopped\n            }\n            this.silentSource = null;\n        }\n    }\n\n    /** Where the playhead is now, from elapsed `context.currentTime` (so it stays sample-accurate), and whether that is the end of the run. */\n    private position(): { time: number; ended: boolean } {\n        const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;\n        const next = this.reverse\n            ? this.seekOffset - elapsed\n            : this.seekOffset + elapsed;\n        const time = Math.max(0, Math.min(next, this.duration));\n        return { time, ended: this.reverse ? time <= 0 : time >= this.duration };\n    }\n\n    /**\n     * Drives ticks off `requestAnimationFrame`, firing `tick()` when the playhead reaches another\n     * project frame — and once more at the end of the run, whether or not it landed on a boundary.\n     *\n     * `context.currentTime` moves in whole render quanta handed over in bursts: at 48 kHz on a\n     * 60 Hz display it advances 8, 10.67, 18.67 or 21.33 ms between animation frames, and a\n     * playhead read straight off it skipped up to a third of the frames. So the playhead advances\n     * by each animation frame's own interval, pulled 5% of the way to the audio clock every frame\n     * and snapped to it when they disagree by more than 50 ms (a stall, a seek). It stays within\n     * a few ms of the audio and moves one frame per frame.\n     *\n     * A listener may `seek` (a host looping wraps to 0 when it hears the end), so the end is\n     * re-read after the listeners and the tick callbacks have run: a run that was seeked out of\n     * its end carries on, and one that was not pauses itself.\n     */\n    private startLoop(): void {\n        if (this.rafId !== null) return;\n        const frameOf = (t: number) => Math.floor(t * this.fps + 1e-6);\n        let lastFrame = frameOf(this.currentTime);\n        let steady: { time: number; at: number; epoch: number } | null = null;\n        const steadied = (now: number): { time: number; ended: boolean } => {\n            const audio = this.position();\n            let time = audio.time;\n            if (!audio.ended && steady && steady.epoch === this.seekEpoch) {\n                const step = ((now - steady.at) / 1000) * this.speed;\n                const predicted = this.reverse ? steady.time - step : steady.time + step;\n                const drift = audio.time - predicted;\n                const next = predicted + drift * 0.05;\n                if (Math.abs(drift) <= 0.05 && next > 0 && next < this.duration) time = next;\n            }\n            steady = { time, at: now, epoch: this.seekEpoch };\n            return { time, ended: audio.ended };\n        };\n\n        const loop = async (now: number) => {\n            let epoch = this.seekEpoch;\n            const position = steadied(now);\n            let ended = position.ended;\n            // This loop runs at the display's refresh rate, which on a 120 or 144Hz panel is two\n            // or three times the rate anything is rendered at — so the clock advances every time\n            // round (the elapsed maths in `play`/`pause` depend on it being exact) while listeners\n            // hear about it once per frame. The end of the run always reports, or the final\n            // position would never reach a host. See `Ticker.setCurrentTime`.\n            const crossed = frameOf(position.time) !== lastFrame;\n            const report = crossed || ended;\n            this.setCurrentTime(position.time, report);\n\n            const reread = () => {\n                if (this.seekEpoch === epoch) return;\n                epoch = this.seekEpoch;\n                lastFrame = frameOf(this.currentTime);\n                ended = this.position().ended;\n            };\n            reread();\n\n            if (report) {\n                lastFrame = frameOf(this.currentTime);\n                // Await so that a slow tick (asset load on a clip\n                // boundary) doesn't queue a second concurrent tick.\n                await this.tick();\n                reread();\n            }\n\n            // If pause() cleared the rafId while we were awaiting tick(),\n            // do not resume the loop.\n            if (this.rafId === null) return;\n            if (ended) {\n                this.pause();\n                return;\n            }\n            this.rafId = requestAnimationFrame(loop);\n        };\n\n        this.rafId = requestAnimationFrame(loop);\n    }\n\n    private stopLoop(): void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId);\n            this.rafId = null;\n        }\n    }\n\n    dispose(): void {\n        this.stopLoop();\n        this.stopSilentTicker();\n        if (this.ownsContext) {\n            void this._context?.close();\n        }\n        super.dispose();\n    }\n}\n"]}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@motionscript/browser",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.10",
   "type": "module",
-  "description": "Browser rendering backend for Motion Script, powered by Skia/CanvasKit.",
+  "description": "Motion Script in the browser: WebGPU rendering through @motionscript/renderer, video and still export, audio playback.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/motionscript-dev/motionscript.git",
@@ -15,12 +15,14 @@
   "sideEffects": false,
   "keywords": [],
   "license": "Apache-2.0",
+  "author": "Motionscript",
   "publishConfig": {
     "access": "public"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
+    "NOTICE",
     "dist",
     "CHANGELOG.md",
     "!dist/**/*.tsbuildinfo"
@@ -36,11 +38,9 @@
     }
   },
   "peerDependencies": {
-    "@motionscript/canvaskit": "^0.1.0-alpha.0",
-    "@motionscript/core": "^0.1.0-alpha.0"
+    "@motionscript/core": "^0.1.0-alpha.10"
   },
   "devDependencies": {
-    "@types/three": "0.185.1",
     "@vitest/browser": "4.1.7",
     "@vitest/browser-playwright": "^4.1.7",
     "concurrently": "^9.0.0",
@@ -48,22 +48,23 @@
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import-x": "^4.16.1",
     "playwright": "^1.60.0",
-    "three": "0.185.1",
+    "rolldown": "1.0.3",
     "tsc-alias": "^1.8.16",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.48.0",
     "vitest": "^4.1.5",
-    "@motionscript/core": "0.1.0-alpha.0",
-    "@motionscript/canvaskit": "0.1.0-alpha.0"
+    "@motionscript/core": "0.1.0-alpha.10"
   },
   "dependencies": {
+    "@mediabunny/mp3-encoder": "^1.49.0",
     "esbuild-wasm": "^0.28.1",
     "mediabunny": "^1.40.1",
-    "@motionscript/skia-render": "^0.1.0-alpha.0"
+    "@motionscript/renderer": "^0.1.0-alpha.10"
   },
   "motionscriptBrowser": {
     "assets": {
-      "esbuild.wasm": "esbuild-wasm/esbuild.wasm"
+      "esbuild.wasm": "esbuild-wasm/esbuild.wasm",
+      "ms_renderer_bg.wasm": "@motionscript/renderer/ms_renderer_bg.wasm"
     }
   },
   "scripts": {

package/dist/audio/filter-graph.d.ts

@@ -1,58 +0,0 @@
-import { AudioFilterItem } from "@motionscript/core";
-/**
- * Result of building an audio-filter graph for one source.
- *
- * - `output` is the last node in the chain; connect it downstream (e.g. to the
- *   per-request gain node).
- * - `nodes` are every intermediate node, so callers can `disconnect()` them on
- *   teardown.
- * - `oscillators` are LFOs (from `tremolo`) the caller must `start()` — and may
- *   `stop()` — alongside the source, since oscillators need an explicit start.
- */
-export interface AudioFilterGraph {
-    output: AudioNode;
-    nodes: AudioNode[];
-    oscillators: OscillatorNode[];
-}
-/**
- * Builds the Web Audio graph for a clip's filter chain, returning the node to
- * connect downstream. Shared by live playback ({@link WebAudioSink}) and
- * offline export (`mixAudio`) so both paths sound identical.
- *
- * Filters apply in array order (index 0 closest to the source). `speed` filters
- * are intentionally ignored here — they're realized via `source.playbackRate`
- * by the caller (and affect timeline scheduling), not as a graph node.
- *
- * `startTime` is the AudioContext time the source starts; `clipDuration` is the
- * clip's scene-time length; `elapsed` is scene-seconds already played at a mid-clip
- * seek (0 for a clean start). These let curve-valued params schedule and align.
- *
- * Pass the already-created `source` so its `playbackRate` can be set by the
- * caller; this function only wires nodes *after* the source.
- */
-export declare function buildAudioFilterGraph(ctx: BaseAudioContext, source: AudioNode, filters: readonly AudioFilterItem[], startTime?: number, clipDuration?: number, elapsed?: number): AudioFilterGraph;
-/**
- * Net *constant* playback-rate multiplier from any scalar `speed` filters in the
- * chain (product of all), defaulting to 1. Curve-valued speeds contribute 1 here
- * and are scheduled separately by {@link applySpeedToPlaybackRate}. Mirrors
- * `Sound.effectiveSpeed()` so the renderer applies the same rate the core timeline
- * reserved time for.
- */
-export declare function effectiveSpeed(filters: readonly AudioFilterItem[] | undefined): number;
-/** The first curve-valued `speed` filter in the chain, if any. */
-export declare function speedCurveOf(filters: readonly AudioFilterItem[] | undefined): import("@motionscript/core").Curve | undefined;
-/**
- * Schedule a time-varying speed curve onto an `AudioBufferSourceNode.playbackRate`.
- *
- * The curve is authored over **source time** (rate as a function of how far through
- * the source we've played). `setValueAtTime`/`linearRampToValueAtTime` schedule in
- * **context time**, so we walk scene-time forward in small steps, convert each to a
- * source-time offset via the integral inverse, read the curve there, and lay down a
- * value point at the matching context time. `scalar` folds in any constant speed
- * filters (they scale the whole rate uniformly).
- *
- * `elapsed` is scene-seconds already played at a mid-clip seek, so the schedule
- * starts at the seek point and aligns the playbackRate to the clip's true position.
- */
-export declare function applySpeedToPlaybackRate(rate: AudioParam, curve: ReturnType<typeof speedCurveOf>, sourceLength: number, sceneDuration: number, scalar: number, startTime: number, elapsed: number): void;
-//# sourceMappingURL=filter-graph.d.ts.map

package/dist/audio/filter-graph.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"filter-graph.d.ts","sourceRoot":"","sources":["../../src/audio/filter-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA4C,MAAM,oBAAoB,CAAC;AAE/F;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,WAAW,EAAE,cAAc,EAAE,CAAC;CACjC;AAyFD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACjC,GAAG,EAAE,gBAAgB,EACrB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,SAAS,eAAe,EAAE,EACnC,SAAS,GAAE,MAAwB,EACnC,YAAY,GAAE,MAAU,EACxB,OAAO,GAAE,MAAU,GACpB,gBAAgB,CAwFlB;AAYD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,SAAS,eAAe,EAAE,GAAG,SAAS,GAAG,MAAM,CAOtF;AAED,kEAAkE;AAClE,wBAAgB,YAAY,CAAC,OAAO,EAAE,SAAS,eAAe,EAAE,GAAG,SAAS,kDAM3E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,wBAAwB,CACpC,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,EACtC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,GAChB,IAAI,CAgBN"}