@helios-project/player 0.48.3

package/README.md

@@ -0,0 +1,148 @@
+# Helios Player
+
+The `@helios-project/player` package provides the `<helios-player>` Web Component, a drop-in UI for reviewing and exporting Helios compositions.
+
+## Installation
+
+```bash
+npm install @helios-project/player
+```
+
+## Usage
+
+### Host Page
+
+Import the player and use the custom element in your HTML.
+
+```html
+<script type="module">
+  import "@helios-project/player";
+</script>
+
+<helios-player
+  src="path/to/composition.html"
+  width="1920"
+  height="1080"
+  controls
+  autoplay
+></helios-player>
+```
+
+### Connecting the Composition
+
+For the player to control your composition, the composition page (inside the iframe) must connect to the parent window.
+
+**If you are using `packages/core` directly:**
+
+```javascript
+import { Helios } from "@helios-project/core";
+import { connectToParent } from "@helios-project/player/bridge";
+
+const helios = new Helios({ ... });
+
+// Initialize the bridge
+connectToParent(helios);
+```
+
+**If you are using `window.helios` (Legacy/Direct Mode):**
+
+The player will automatically attempt to access `window.helios` on the iframe's content window if it's on the same origin. However, `connectToParent` is the recommended approach for cross-origin support and sandboxing.
+
+## Attributes
+
+| Attribute | Description | Default |
+|---|---|---|
+| `src` | URL of the composition page to load in the iframe. | (Required) |
+| `width` | Width of the player (aspect ratio calculation). | - |
+| `height` | Height of the player (aspect ratio calculation). | - |
+| `autoplay` | Automatically start playback when connected. | `false` |
+| `loop` | Loop playback when the end is reached. | `false` |
+| `controls` | Show the UI controls overlay. | `false` |
+| `export-mode` | Strategy for client-side export: `auto`, `canvas`, or `dom`. | `auto` |
+| `canvas-selector` | CSS selector for the canvas element (used in `canvas` export mode). | `canvas` |
+| `export-format` | Output video format: `mp4` (H.264/AAC) or `webm` (VP9/Opus). | `mp4` |
+| `poster` | URL of an image to display before playback starts. | - |
+| `preload` | `auto` or `none`. If `none`, defers loading the iframe until interaction. | `auto` |
+| `input-props` | JSON string of properties to pass to the composition. | - |
+| `interactive` | Enable direct interaction with the composition (disables click-to-pause). | `false` |
+| `controlslist` | Space-separated list of features to disable: `nodownload`, `nofullscreen`. | - |
+| `sandbox` | Security flags for the iframe. | `allow-scripts allow-same-origin` |
+
+## CSS Variables
+
+The player exposes several CSS variables to allow theming of the controls:
+
+| Variable | Default | Description |
+|---|---|---|
+| `--helios-controls-bg` | `rgba(0, 0, 0, 0.6)` | Background color of the controls bar. |
+| `--helios-text-color` | `white` | Text and icon color. |
+| `--helios-accent-color` | `#007bff` | Accent color for active elements (scrubber, buttons). |
+| `--helios-range-track-color` | `#555` | Background color of the scrubber track. |
+| `--helios-font-family` | `sans-serif` | Font family for the player UI. |
+
+## Standard Media API
+
+The `<helios-player>` element implements a subset of the HTMLMediaElement interface, allowing you to control playback programmatically.
+
+### Methods
+
+- `play(): Promise<void>` - Starts playback.
+- `pause(): void` - Pauses playback.
+- `load(): void` - Reloads the iframe (useful if `src` changed or to retry connection).
+- `addTextTrack(kind: string, label?: string, language?: string): TextTrack` - Adds a new text track to the media element.
+
+### Properties
+
+- `textTracks` (TextTrackList, read-only): The text tracks associated with the media element.
+- `currentTime` (number): Current playback position in seconds.
+- `duration` (number, read-only): Total duration in seconds.
+- `paused` (boolean, read-only): Whether playback is paused.
+- `ended` (boolean, read-only): Whether playback has reached the end.
+- `volume` (number): Audio volume (0.0 to 1.0).
+- `muted` (boolean): Audio mute state.
+- `playbackRate` (number): Playback speed (default 1.0).
+- `videoWidth` (number, read-only): The intrinsic width of the video (from controller state or attributes).
+- `videoHeight` (number, read-only): The intrinsic height of the video (from controller state or attributes).
+- `buffered` (TimeRanges, read-only): Returns a TimeRanges object representing buffered content (always 0-duration).
+- `seekable` (TimeRanges, read-only): Returns a TimeRanges object representing seekable content (always 0-duration).
+- `seeking` (boolean, read-only): Whether the player is currently seeking (scrubbing).
+- `readyState` (number, read-only): The current readiness state of the media (0-4).
+- `networkState` (number, read-only): The current network state (0-3).
+- `fps` (number, read-only): Frames per second of the composition.
+- `currentFrame` (number): Current frame index.
+- `inputProps` (object): Get or set the input properties passed to the composition.
+
+## Events
+
+The element dispatches the following custom events:
+
+- `play`: Fired when playback starts.
+- `pause`: Fired when playback is paused.
+- `ended`: Fired when playback completes.
+- `timeupdate`: Fired when the current time/frame changes.
+- `volumechange`: Fired when volume or mute state changes.
+- `ratechange`: Fired when playback rate changes.
+- `durationchange`: Fired when the duration of the composition changes.
+- `loadstart`: Fired when the browser begins looking for media data.
+- `loadedmetadata`: Fired when the duration and dimensions of the media have been determined.
+- `loadeddata`: Fired when data for the current frame is available.
+- `canplay`: Fired when the browser can resume playback of the media.
+- `canplaythrough`: Fired when the browser estimates it can play through the media without buffering.
+
+## Client-Side Export
+
+The player supports exporting the composition to video (MP4/WebM) directly in the browser using WebCodecs.
+
+- **`export-mode="canvas"`**: captures frames from a `<canvas>` element. Fast and efficient.
+- **`export-mode="dom"`**: captures the entire DOM using `foreignObject` SVG serialization. Useful for compositions using DOM elements (divs, text, css).
+- **`export-mode="auto"`**: attempts to detect the best strategy.
+
+Configuration:
+
+```html
+<helios-player
+  src="..."
+  export-mode="dom"
+  export-format="webm"
+></helios-player>
+```

package/dist/bridge.d.ts

@@ -0,0 +1,2 @@
+import { Helios } from "@helios-project/core";
+export declare function connectToParent(helios: Helios): void;

package/dist/bridge.js

@@ -0,0 +1,169 @@
+import { captureDomToBitmap } from "./features/dom-capture";
+import { getAudioAssets } from "./features/audio-utils";
+export function connectToParent(helios) {
+    // 1. Listen for messages from parent
+    window.addEventListener('message', async (event) => {
+        if (event.source !== window.parent)
+            return;
+        const { type, frame } = event.data;
+        switch (type) {
+            case 'HELIOS_GET_AUDIO_TRACKS':
+                const assets = await getAudioAssets(document);
+                const buffers = assets.map(a => a.buffer);
+                window.parent.postMessage({ type: 'HELIOS_AUDIO_DATA', assets }, '*', buffers);
+                break;
+            case 'HELIOS_CONNECT':
+                // Reply with ready and current state
+                window.parent.postMessage({ type: 'HELIOS_READY', state: helios.getState() }, '*');
+                window.parent.postMessage({ type: 'HELIOS_STATE', state: helios.getState() }, '*');
+                break;
+            case 'HELIOS_PLAY':
+                helios.play();
+                break;
+            case 'HELIOS_PAUSE':
+                helios.pause();
+                break;
+            case 'HELIOS_SEEK':
+                if (typeof frame === 'number') {
+                    helios.seek(frame);
+                }
+                break;
+            case 'HELIOS_SET_PLAYBACK_RATE':
+                if (typeof event.data.rate === 'number') {
+                    helios.setPlaybackRate(event.data.rate);
+                }
+                break;
+            case 'HELIOS_SET_PLAYBACK_RANGE':
+                const { start, end } = event.data;
+                if (typeof start === 'number' && typeof end === 'number') {
+                    helios.setPlaybackRange(start, end);
+                }
+                break;
+            case 'HELIOS_CLEAR_PLAYBACK_RANGE':
+                helios.clearPlaybackRange();
+                break;
+            case 'HELIOS_SET_VOLUME':
+                if (typeof event.data.volume === 'number') {
+                    helios.setAudioVolume(event.data.volume);
+                }
+                break;
+            case 'HELIOS_SET_MUTED':
+                if (typeof event.data.muted === 'boolean') {
+                    helios.setAudioMuted(event.data.muted);
+                }
+                break;
+            case 'HELIOS_SET_LOOP':
+                if (typeof event.data.loop === 'boolean') {
+                    helios.setLoop(event.data.loop);
+                }
+                break;
+            case 'HELIOS_SET_PROPS':
+                if (event.data.props) {
+                    helios.setInputProps(event.data.props);
+                }
+                break;
+            case 'HELIOS_SET_CAPTIONS':
+                if (event.data.captions !== undefined) {
+                    helios.setCaptions(event.data.captions);
+                }
+                break;
+            case 'HELIOS_GET_SCHEMA':
+                window.parent.postMessage({ type: 'HELIOS_SCHEMA', schema: helios.schema }, '*');
+                break;
+            case 'HELIOS_CAPTURE_FRAME':
+                handleCaptureFrame(helios, event.data);
+                break;
+        }
+    });
+    // 2. Announce readiness immediately (in case parent is already listening)
+    // This helps when the iframe reloads or connects after the parent has already set up listeners
+    window.parent.postMessage({ type: 'HELIOS_READY', state: helios.getState() }, '*');
+    // 3. Subscribe to Helios state changes and broadcast
+    helios.subscribe((state) => {
+        window.parent.postMessage({ type: 'HELIOS_STATE', state }, '*');
+    });
+    // 4. Capture Global Errors
+    window.addEventListener('error', (e) => {
+        window.parent.postMessage({
+            type: 'HELIOS_ERROR',
+            error: {
+                message: e.message,
+                filename: e.filename,
+                lineno: e.lineno,
+                colno: e.colno,
+                stack: e.error?.stack
+            }
+        }, '*');
+    });
+    window.addEventListener('unhandledrejection', (e) => {
+        window.parent.postMessage({
+            type: 'HELIOS_ERROR',
+            error: {
+                message: e.reason?.message || String(e.reason),
+                stack: e.reason?.stack
+            }
+        }, '*');
+    });
+}
+async function handleCaptureFrame(helios, data) {
+    const { frame, selector, mode } = data;
+    // 1. Seek
+    helios.seek(frame);
+    // 2. Wait for render (double RAF to be safe and ensure paint)
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+    const state = helios.getState();
+    const captions = state.activeCaptions || [];
+    // 3. DOM Mode
+    if (mode === 'dom') {
+        try {
+            const bitmap = await captureDomToBitmap(document.body);
+            window.parent.postMessage({
+                type: 'HELIOS_FRAME_DATA',
+                frame,
+                success: true,
+                bitmap,
+                captions
+            }, '*', [bitmap]);
+        }
+        catch (e) {
+            window.parent.postMessage({
+                type: 'HELIOS_FRAME_DATA',
+                frame,
+                success: false,
+                error: e.message
+            }, '*');
+        }
+        return;
+    }
+    // 4. Canvas Mode (Default)
+    const canvas = document.querySelector(selector || 'canvas');
+    if (!canvas || !(canvas instanceof HTMLCanvasElement)) {
+        window.parent.postMessage({
+            type: 'HELIOS_FRAME_DATA',
+            frame,
+            success: false,
+            error: 'Canvas not found'
+        }, '*');
+        return;
+    }
+    // 4. Create Bitmap
+    try {
+        const bitmap = await createImageBitmap(canvas);
+        // 5. Send back
+        window.parent.postMessage({
+            type: 'HELIOS_FRAME_DATA',
+            frame,
+            success: true,
+            bitmap,
+            captions
+        }, '*', [bitmap]);
+    }
+    catch (e) {
+        window.parent.postMessage({
+            type: 'HELIOS_FRAME_DATA',
+            frame,
+            success: false,
+            error: e.message
+        }, '*');
+    }
+}

package/dist/controllers.d.ts

@@ -0,0 +1,91 @@
+import { Helios, CaptionCue, HeliosSchema } from "@helios-project/core";
+import { AudioAsset } from "./features/audio-utils";
+export interface HeliosController {
+    play(): void;
+    pause(): void;
+    seek(frame: number): void;
+    setAudioVolume(volume: number): void;
+    setAudioMuted(muted: boolean): void;
+    setLoop(loop: boolean): void;
+    setPlaybackRate(rate: number): void;
+    setPlaybackRange(startFrame: number, endFrame: number): void;
+    clearPlaybackRange(): void;
+    setCaptions(captions: string | CaptionCue[]): void;
+    setInputProps(props: Record<string, any>): void;
+    subscribe(callback: (state: any) => void): () => void;
+    onError(callback: (err: any) => void): () => void;
+    getState(): any;
+    dispose(): void;
+    captureFrame(frame: number, options?: {
+        selector?: string;
+        mode?: 'canvas' | 'dom';
+    }): Promise<{
+        frame: VideoFrame;
+        captions: CaptionCue[];
+    } | null>;
+    getAudioTracks(): Promise<AudioAsset[]>;
+    getSchema(): Promise<HeliosSchema | undefined>;
+}
+export declare class DirectController implements HeliosController {
+    instance: Helios;
+    private iframe?;
+    constructor(instance: Helios, iframe?: HTMLIFrameElement | undefined);
+    play(): void;
+    pause(): void;
+    seek(frame: number): void;
+    setAudioVolume(volume: number): void;
+    setAudioMuted(muted: boolean): void;
+    setLoop(loop: boolean): void;
+    setPlaybackRate(rate: number): void;
+    setPlaybackRange(start: number, end: number): void;
+    clearPlaybackRange(): void;
+    setCaptions(captions: string | CaptionCue[]): void;
+    setInputProps(props: Record<string, any>): void;
+    subscribe(callback: (state: any) => void): () => void;
+    getState(): Readonly<import("@helios-project/core").HeliosState>;
+    dispose(): void;
+    onError(callback: (err: any) => void): () => void;
+    getAudioTracks(): Promise<AudioAsset[]>;
+    getSchema(): Promise<HeliosSchema | undefined>;
+    captureFrame(frame: number, options?: {
+        selector?: string;
+        mode?: 'canvas' | 'dom';
+    }): Promise<{
+        frame: VideoFrame;
+        captions: CaptionCue[];
+    } | null>;
+}
+export declare class BridgeController implements HeliosController {
+    private iframeWindow;
+    private listeners;
+    private errorListeners;
+    private lastState;
+    constructor(iframeWindow: Window, initialState?: any);
+    private handleMessage;
+    private notifyListeners;
+    private notifyErrorListeners;
+    play(): void;
+    pause(): void;
+    seek(frame: number): void;
+    setAudioVolume(volume: number): void;
+    setAudioMuted(muted: boolean): void;
+    setLoop(loop: boolean): void;
+    setPlaybackRate(rate: number): void;
+    setPlaybackRange(start: number, end: number): void;
+    clearPlaybackRange(): void;
+    setCaptions(captions: string | CaptionCue[]): void;
+    setInputProps(props: Record<string, any>): void;
+    subscribe(callback: (state: any) => void): () => void;
+    onError(callback: (err: any) => void): () => void;
+    getState(): any;
+    dispose(): void;
+    captureFrame(frame: number, options?: {
+        selector?: string;
+        mode?: 'canvas' | 'dom';
+    }): Promise<{
+        frame: VideoFrame;
+        captions: CaptionCue[];
+    } | null>;
+    getAudioTracks(): Promise<AudioAsset[]>;
+    getSchema(): Promise<HeliosSchema | undefined>;
+}

package/dist/controllers.js

@@ -0,0 +1,224 @@
+import { captureDomToBitmap } from "./features/dom-capture";
+import { getAudioAssets } from "./features/audio-utils";
+export class DirectController {
+    instance;
+    iframe;
+    constructor(instance, iframe) {
+        this.instance = instance;
+        this.iframe = iframe;
+    }
+    play() { this.instance.play(); }
+    pause() { this.instance.pause(); }
+    seek(frame) { this.instance.seek(frame); }
+    setAudioVolume(volume) { this.instance.setAudioVolume(volume); }
+    setAudioMuted(muted) { this.instance.setAudioMuted(muted); }
+    setLoop(loop) { this.instance.setLoop(loop); }
+    setPlaybackRate(rate) { this.instance.setPlaybackRate(rate); }
+    setPlaybackRange(start, end) { this.instance.setPlaybackRange(start, end); }
+    clearPlaybackRange() { this.instance.clearPlaybackRange(); }
+    setCaptions(captions) { this.instance.setCaptions(captions); }
+    setInputProps(props) { this.instance.setInputProps(props); }
+    subscribe(callback) { return this.instance.subscribe(callback); }
+    getState() { return this.instance.getState(); }
+    dispose() { }
+    onError(callback) {
+        const target = this.iframe?.contentWindow || window;
+        const errorHandler = (event) => {
+            callback({
+                message: event.message,
+                filename: event.filename,
+                lineno: event.lineno,
+                colno: event.colno,
+                stack: event.error?.stack
+            });
+        };
+        const rejectionHandler = (event) => {
+            callback({
+                message: event.reason?.message || String(event.reason),
+                stack: event.reason?.stack
+            });
+        };
+        target.addEventListener('error', errorHandler);
+        target.addEventListener('unhandledrejection', rejectionHandler);
+        return () => {
+            target.removeEventListener('error', errorHandler);
+            target.removeEventListener('unhandledrejection', rejectionHandler);
+        };
+    }
+    async getAudioTracks() {
+        const doc = this.iframe?.contentDocument || document;
+        return getAudioAssets(doc);
+    }
+    async getSchema() {
+        return this.instance.schema;
+    }
+    async captureFrame(frame, options) {
+        const state = this.instance.getState();
+        const fps = state.fps;
+        const captions = state.activeCaptions || [];
+        this.instance.seek(frame);
+        // Wait for RAF in iframe to ensure paint
+        if (this.iframe && this.iframe.contentWindow) {
+            await new Promise(r => this.iframe.contentWindow.requestAnimationFrame(() => r()));
+            await new Promise(r => this.iframe.contentWindow.requestAnimationFrame(() => r()));
+        }
+        const doc = this.iframe?.contentDocument || document;
+        let videoFrame = null;
+        // Handle DOM mode
+        if (options?.mode === 'dom') {
+            try {
+                const bitmap = await captureDomToBitmap(doc.body);
+                videoFrame = new VideoFrame(bitmap, { timestamp: (frame / fps) * 1_000_000 });
+            }
+            catch (e) {
+                console.error("DOM capture failed:", e);
+                return null;
+            }
+        }
+        else {
+            const selector = options?.selector || 'canvas';
+            const canvas = doc.querySelector(selector);
+            if (canvas instanceof HTMLCanvasElement) {
+                videoFrame = new VideoFrame(canvas, { timestamp: (frame / fps) * 1_000_000 });
+            }
+        }
+        if (videoFrame) {
+            return { frame: videoFrame, captions };
+        }
+        return null;
+    }
+}
+export class BridgeController {
+    iframeWindow;
+    listeners = [];
+    errorListeners = [];
+    lastState;
+    constructor(iframeWindow, initialState) {
+        this.iframeWindow = iframeWindow;
+        this.lastState = initialState || { isPlaying: false, currentFrame: 0, duration: 0, fps: 30 };
+        window.addEventListener('message', this.handleMessage);
+    }
+    handleMessage = (event) => {
+        if (event.source !== this.iframeWindow)
+            return;
+        if (event.data?.type === 'HELIOS_STATE') {
+            this.lastState = event.data.state;
+            this.notifyListeners();
+        }
+        else if (event.data?.type === 'HELIOS_ERROR') {
+            this.notifyErrorListeners(event.data.error);
+        }
+    };
+    notifyListeners() {
+        this.listeners.forEach(cb => cb(this.lastState));
+    }
+    notifyErrorListeners(err) {
+        this.errorListeners.forEach(cb => cb(err));
+    }
+    play() { this.iframeWindow.postMessage({ type: 'HELIOS_PLAY' }, '*'); }
+    pause() { this.iframeWindow.postMessage({ type: 'HELIOS_PAUSE' }, '*'); }
+    seek(frame) { this.iframeWindow.postMessage({ type: 'HELIOS_SEEK', frame }, '*'); }
+    setAudioVolume(volume) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_VOLUME', volume }, '*'); }
+    setAudioMuted(muted) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_MUTED', muted }, '*'); }
+    setLoop(loop) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_LOOP', loop }, '*'); }
+    setPlaybackRate(rate) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_PLAYBACK_RATE', rate }, '*'); }
+    setPlaybackRange(start, end) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_PLAYBACK_RANGE', start, end }, '*'); }
+    clearPlaybackRange() { this.iframeWindow.postMessage({ type: 'HELIOS_CLEAR_PLAYBACK_RANGE' }, '*'); }
+    setCaptions(captions) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_CAPTIONS', captions }, '*'); }
+    setInputProps(props) { this.iframeWindow.postMessage({ type: 'HELIOS_SET_PROPS', props }, '*'); }
+    subscribe(callback) {
+        this.listeners.push(callback);
+        // Call immediately with current state
+        callback(this.lastState);
+        return () => {
+            this.listeners = this.listeners.filter(l => l !== callback);
+        };
+    }
+    onError(callback) {
+        this.errorListeners.push(callback);
+        return () => {
+            this.errorListeners = this.errorListeners.filter(l => l !== callback);
+        };
+    }
+    getState() { return this.lastState; }
+    dispose() {
+        window.removeEventListener('message', this.handleMessage);
+        this.listeners = [];
+        this.errorListeners = [];
+    }
+    async captureFrame(frame, options) {
+        return new Promise((resolve) => {
+            const handler = (event) => {
+                if (event.source !== this.iframeWindow)
+                    return;
+                if (event.data?.type === 'HELIOS_FRAME_DATA' && event.data.frame === frame) {
+                    window.removeEventListener('message', handler);
+                    if (event.data.success) {
+                        const bitmap = event.data.bitmap;
+                        const captions = event.data.captions || [];
+                        // fps from last state
+                        const fps = this.lastState.fps || 30;
+                        const videoFrame = new VideoFrame(bitmap, { timestamp: (frame / fps) * 1_000_000 });
+                        resolve({ frame: videoFrame, captions });
+                    }
+                    else {
+                        console.error("Bridge capture failed:", event.data.error);
+                        resolve(null);
+                    }
+                }
+            };
+            window.addEventListener('message', handler);
+            this.iframeWindow.postMessage({
+                type: 'HELIOS_CAPTURE_FRAME',
+                frame,
+                selector: options?.selector,
+                mode: options?.mode
+            }, '*');
+            // Timeout
+            setTimeout(() => {
+                window.removeEventListener('message', handler);
+                resolve(null);
+            }, 5000);
+        });
+    }
+    async getAudioTracks() {
+        return new Promise((resolve) => {
+            const handler = (event) => {
+                if (event.source !== this.iframeWindow)
+                    return;
+                if (event.data?.type === 'HELIOS_AUDIO_DATA') {
+                    window.removeEventListener('message', handler);
+                    resolve(event.data.assets || []);
+                }
+            };
+            window.addEventListener('message', handler);
+            this.iframeWindow.postMessage({ type: 'HELIOS_GET_AUDIO_TRACKS' }, '*');
+            // Timeout
+            setTimeout(() => {
+                window.removeEventListener('message', handler);
+                resolve([]);
+            }, 5000);
+        });
+    }
+    async getSchema() {
+        return new Promise((resolve) => {
+            let timeoutId;
+            const handler = (event) => {
+                if (event.source !== this.iframeWindow)
+                    return;
+                if (event.data?.type === 'HELIOS_SCHEMA') {
+                    window.removeEventListener('message', handler);
+                    clearTimeout(timeoutId);
+                    resolve(event.data.schema);
+                }
+            };
+            window.addEventListener('message', handler);
+            this.iframeWindow.postMessage({ type: 'HELIOS_GET_SCHEMA' }, '*');
+            // Timeout
+            timeoutId = window.setTimeout(() => {
+                window.removeEventListener('message', handler);
+                resolve(undefined);
+            }, 5000);
+        });
+    }
+}

package/dist/features/audio-utils.d.ts

@@ -0,0 +1,10 @@
+export interface AudioAsset {
+    buffer: ArrayBuffer;
+    mimeType: string | null;
+    volume?: number;
+    muted?: boolean;
+    loop?: boolean;
+    startTime?: number;
+}
+export declare function getAudioAssets(doc: Document): Promise<AudioAsset[]>;
+export declare function mixAudio(assets: AudioAsset[], duration: number, sampleRate: number, rangeStart?: number): Promise<AudioBuffer>;