@motionscript/browser 0.0.0-stage → 0.1.0-alpha.10

package/dist/ticker.js

@@ -0,0 +1,215 @@
+import { Ticker } from "@motionscript/core";
+/**
+ * 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.
+ *
+ * A single silent buffer covering the full timeline is started on play(),
+ * which keeps the context active and gives the browser a stable audio
+ * graph to schedule against even on scenes that contain no audio nodes.
+ */
+export class WebTicker extends Ticker {
+    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();
+        const { context } = opts;
+        this.contextOf = typeof context === "function" ? context : () => context ?? new AudioContext();
+        this.ownsContext = !context;
+        this.fps = opts.fps;
+    }
+    getContext() {
+        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;
+        // The clock is read only while playing; `play` anchors it afresh.
+        if (this.isPlaying)
+            this.playStartCtxTime = this.context.currentTime;
+        this.seekEpoch++;
+        this.setCurrentTime(clamped);
+    }
+    /**
+     * 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") {
+            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();
+        super.play(speed, reverse);
+        this.startLoop();
+    }
+    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */
+    pause() {
+        this.seekOffset = this.currentTime;
+        this.stopLoop();
+        this.stopSilentTicker();
+        if (this._context?.state === "running") {
+            this._context.suspend();
+        }
+        super.pause();
+    }
+    /** (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. */
+    startSilentTicker() {
+        this.stopSilentTicker();
+        const remaining = Math.max(0.001, this.duration - this.seekOffset);
+        const sampleRate = this.context.sampleRate;
+        const buffer = this.context.createBuffer(1, Math.ceil(remaining * sampleRate), sampleRate);
+        const source = this.context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(this.context.destination);
+        source.start();
+        this.silentSource = source;
+    }
+    stopSilentTicker() {
+        if (this.silentSource) {
+            try {
+                this.silentSource.onended = null;
+                this.silentSource.stop();
+                this.silentSource.disconnect();
+            }
+            catch {
+                // already stopped
+            }
+            this.silentSource = null;
+        }
+    }
+    /** 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 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();
+                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);
+    }
+    stopLoop() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    dispose() {
+        this.stopLoop();
+        this.stopSilentTicker();
+        if (this.ownsContext) {
+            void this._context?.close();
+        }
+        super.dispose();
+    }
+}
+//# sourceMappingURL=ticker.js.map

package/dist/ticker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.js","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,SAAU,SAAQ,MAAM;IAChB,SAAS,CAAqB;IAC9B,WAAW,CAAU;IAC9B,QAAQ,GAAwB,IAAI,CAAC;IACrC,GAAG,CAAS;IAEZ,gBAAgB,GAAW,CAAC,CAAC;IAC7B,UAAU,GAAW,CAAC,CAAC;IACvB,KAAK,GAAW,CAAC,CAAC;IAClB,OAAO,GAAY,KAAK,CAAC;IAEzB,KAAK,GAAkB,IAAI,CAAC;IACpC,iHAAiH;IACzG,SAAS,GAAW,CAAC,CAAC;IACtB,YAAY,GAAiC,IAAI,CAAC;IAE1D;;;;OAIG;IACH,YAAY,IAAoE;QAC5E,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,IAAI,IAAI,YAAY,EAAE,CAAC;QAC/F,IAAI,CAAC,WAAW,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;IAED,UAAU;QACN,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAY,OAAO;QACf,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAED,IAAI,CAAC,CAAS;QACV,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC1B,kEAAkE;QAClE,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QACrE,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,CAAC,QAAgB,CAAC,EAAE,UAAmB,KAAK;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QAEnC,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,IAAI,CACtB,GAAG,EAAE;gBACD,0EAA0E;gBAC1E,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,SAAS;oBAAE,KAAK,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YACzF,CAAC,EACD,CAAC,KAAK,EAAE,EAAE;gBACN,OAAO,CAAC,KAAK,CAAC,iDAAiD,EAAE,KAAK,CAAC,CAAC;gBACxE,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,CAAC,CACJ,CAAC;QACN,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QACjD,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC3B,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAED,qJAAqJ;IACrJ,KAAK;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QAC5B,CAAC;QACD,KAAK,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,mNAAmN;IAC3M,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;QACnE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;QAC3F,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC;QACjD,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QACvB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;IAC/B,CAAC;IAEO,gBAAgB;QACpB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC;gBACD,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;gBACzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;YACnC,CAAC;YAAC,MAAM,CAAC;gBACL,kBAAkB;YACtB,CAAC;YACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC7B,CAAC;IACL,CAAC;IAED,2IAA2I;IACnI,QAAQ;QACZ,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAChF,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO;YACrB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO;YAC3B,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC7E,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACK,SAAS;QACb,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YAAE,OAAO;QAChC,MAAM,OAAO,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;QAC/D,IAAI,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,MAAM,GAAuD,IAAI,CAAC;QACtE,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAoC,EAAE;YAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9B,IAAI,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC5D,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;gBACrD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;gBACzE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;gBACrC,MAAM,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;gBACtC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ;oBAAE,IAAI,GAAG,IAAI,CAAC;YACjF,CAAC;YACD,MAAM,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;YAClD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;QACxC,CAAC,CAAC;QAEF,MAAM,IAAI,GAAG,KAAK,EAAE,GAAW,EAAE,EAAE;YAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;YAC3B,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC/B,IAAI,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC3B,qFAAqF;YACrF,qFAAqF;YACrF,uFAAuF;YACvF,gFAAgF;YAChF,kEAAkE;YAClE,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC;YACrD,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,CAAC;YAChC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAE3C,MAAM,MAAM,GAAG,GAAG,EAAE;gBAChB,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK;oBAAE,OAAO;gBACrC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;gBACvB,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACtC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC;YAClC,CAAC,CAAC;YACF,MAAM,EAAE,CAAC;YAET,IAAI,MAAM,EAAE,CAAC;gBACT,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACtC,kDAAkD;gBAClD,oDAAoD;gBACpD,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClB,MAAM,EAAE,CAAC;YACb,CAAC;YAED,8DAA8D;YAC9D,0BAA0B;YAC1B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;gBAAE,OAAO;YAChC,IAAI,KAAK,EAAE,CAAC;gBACR,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IAEO,QAAQ;QACZ,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACtB,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACtB,CAAC;IACL,CAAC;IAED,OAAO;QACH,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,KAAK,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QAChC,CAAC;QACD,KAAK,CAAC,OAAO,EAAE,CAAC;IACpB,CAAC;CACJ","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,6 +1,78 @@
 {
   "name": "@motionscript/browser",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.10",
+  "type": "module",
+  "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",
+    "directory": "packages/browser"
+  },
+  "homepage": "https://motionscript.dev",
+  "bugs": {
+    "url": "https://github.com/motionscript-dev/motionscript/issues"
+  },
+  "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"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./audio": {
+      "types": "./dist/audio/index.d.ts",
+      "default": "./dist/audio/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@motionscript/core": "^0.1.0-alpha.10"
+  },
+  "devDependencies": {
+    "@vitest/browser": "4.1.7",
+    "@vitest/browser-playwright": "^4.1.7",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "playwright": "^1.60.0",
+    "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.10"
+  },
+  "dependencies": {
+    "@mediabunny/mp3-encoder": "^1.49.0",
+    "esbuild-wasm": "^0.28.1",
+    "mediabunny": "^1.40.1",
+    "@motionscript/renderer": "^0.1.0-alpha.10"
+  },
+  "motionscriptBrowser": {
+    "assets": {
+      "esbuild.wasm": "esbuild-wasm/esbuild.wasm",
+      "ms_renderer_bg.wasm": "@motionscript/renderer/ms_renderer_bg.wasm"
+    }
+  },
+  "scripts": {
+    "build": "eslint . && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && node ../../scripts/build-browser.mjs",
+    "dev": "concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -p tsconfig.build.json -w\"",
+    "clean": "rimraf --glob dist .turbo *.tsbuildinfo",
+    "test": "vitest",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }