The browser player

The same graphics play live on a web page. Each program runs in a sandboxed Web Worker and draws through the same SVG path as the renderer, so what plays on the page is what renders.

import { loadRegistry, findItem, createPlayer } from "volito/browser";

const registry = await loadRegistry();       // the packs, from jsDelivr (or pass your own base URL)
const player = await createPlayer(canvas, findItem(registry, "headline"), {
  props: { text: "Stop editing. *Start directing.*" },
  style: "neon",
  aspect: "16:9",
});
player.play();

The API

Call	What it does
`loadRegistry(base?)`	The packs' registry, from the package's files on jsDelivr unless you pass your own base URL.
`findItem(registry, ref)`	An item by id or `pack/id`.
`createPlayer(canvas, item, options)`	A player drawing on a `<canvas>`. `item` is an item, or its ref as a string.
`player.play()`	Starts playback.
`player.pause()`	Pauses.
`player.seek(t)`	Jumps to a moment in seconds. A graphic is a function of time, so the frame is exact.
`player.update(options)`	Changes any option (props, style, colors, aspect, motion, mood, seed and so on) in place.
`player.destroy()`	Stops playback and ends the worker.

Options

The player takes the same build options as the Node API (props, style, colors, aspect, duration, media, words, beats, motion, mood, seed, speed), plus:

Option	What it is
`base`	Where `fonts/` and `dist/registry.json` live; the package on jsDelivr by default.
`fps`	Frames per second.
`loop`	Play again from the start at the end; `true` by default.
`background`	A colour under the graphic; transparent by default.
`onWarnings(warnings)`	Called when the program's warnings change: text off the frame, props that do not fit.
`onError(error)`	Called when the program throws or a frame does not parse.
`onFrame(t)`	Called on every drawn frame with its time.

Fonts and packs offline

By default the player loads fonts and the registry from https://cdn.jsdelivr.net/npm/volito@0.1.0/. To stay offline or on your own CDN, serve the package's fonts/ and dist/registry.json and pass that URL as base to both loadRegistry and createPlayer.