LipsyncClient - Vanilla JavaScript Lip Sync Core API

import { LipsyncClient } from "@mascotbot/core";

const client = await LipsyncClient.init({
  apiKey: "mascot_pub_…",
  userId: "user_42",          // optional — stable id for MAU attribution
  // licenseEndpoint, devMode, logger, fingerprintHash also accepted
});

const { timeline, durationMs, speechMs } = await client.processAudio(audio16kMono);
// timeline   — VisemeTimeline (the serializable artifact)
// durationMs — total audio duration
// speechMs   — non-silent ms detected

const at16k = client.resample(decoded.getChannelData(0), decoded.sampleRate, 16000);

const session = client.createStreamingSession();
const frame = await session.pushWindow(audioWindow); // Promise — must await
console.log(frame.visemeId, frame.silenceDetected, frame.frameIndex);
session.close();

const off = client.on("refused", (err) => showBilling(err.code, err.message));
// later: off();

const d = await client.diagnostics();
// { pendingSpeechMs, classifierEpoch, riskBand, installId, variantId }

client.stop();  // stop active work, keep the instance reusable
client.close(); // release everything; the instance is done

import { Rive, EventType } from "@rive-app/webgl2";
import { MascotPlayback, getRiveInputs, STATE_MACHINE_NAMES } from "@mascotbot/core/rive";

const rive = new Rive({
  src: "/mascot-fox.riv",
  canvas: document.querySelector("canvas")!,
  autoplay: true,
  stateMachines: STATE_MACHINE_NAMES[0], // "mascotStateMachine" — pass only this
});

rive.on(EventType.Load, () => {
  const riveInputs = getRiveInputs(rive);
  const playback = new MascotPlayback({ riveInputs, stream: true, enableNaturalLipSync: true });

  // Offline: replay a whole timeline (from processAudio or parseTimeline).
  playback.setTimeline(timeline);
  // Streaming alternative: playback.pushVisemes([{ offset: 0, visemeId: 7 }]);
  playback.play();
});