TalkingAvatar

import { TalkingAvatar, DEFAULT_MODEL_URL } from "@interviewflowai/talking-avatar";

new TalkingAvatar(options)

const avatar = new TalkingAvatar({
  container: document.getElementById("avatar"),
  avatarUrl: "https://example.com/avatar.glb",
});

HTMLElement

required

The element the avatar fills. It needs a width and height; the canvas follows its size.

string

required

Your .glb avatar. See 3D avatars.

Record<string, string | string[]>

Your avatar’s morph names, if they aren’t the standard ones. See Other morph names.

string

default:"DEFAULT_MODEL_URL"

Where to load viseme-model.bin from. See Self-host the model.

number

default:"150"

Delay before an attached stream plays. Lower means less latency and rougher lip sync.

(error: Error) => void

default:"console.error"

Errors from background work (avatar loading, stream analysis).

Members

Member	Returns	Description
`ready`	`Promise<void>`	Resolves when the first avatar is on screen; rejects if it fails to load.
`setAvatar(url, morphTargets?)`	`Promise<void>`	Loads a different avatar. Resolves when it’s on screen.
`attachStream(stream)`	`Promise<void>`	Plays and lip syncs a `MediaStream`. Replaces any attached stream. Rejects if it has no audio track.
`detachStream()`	`void`	Stops the attached stream. It doesn’t stop the source track.
`speak(audio)`	`Promise<void>`	Plays and lip syncs a clip (a URL string, `ArrayBuffer` or `Blob`). Resolves when it ends or is stopped.
`stopSpeaking()`	`void`	Stops the current clip.
`setStatus(status)`	`void`	Behaviour while not speaking: `"listening"` (default) or `"thinking"`. Speaking is detected from the audio.
`dispose()`	`void`	Releases the canvas, WebGL resources and audio. The instance can’t be reused.

DEFAULT_MODEL_URL

string: this package version’s copy of the model on jsDelivr.

Example

const avatar = new TalkingAvatar({
  container: document.getElementById("avatar"),
  avatarUrl: "/avatar.glb",
  modelUrl: "/sdk/viseme-model.bin",
  onError: console.error,
});

await avatar.ready;

document.getElementById("play").onclick = async () => {
  avatar.setStatus("thinking");
  const audio = await fetch("/api/tts?text=Hello").then((r) => r.blob());
  await avatar.speak(audio);
  avatar.setStatus("listening");
};

// When you remove this view:
// avatar.dispose();

Package

Realistic Avatars

Open Source

new TalkingAvatar(options)

Members

DEFAULT_MODEL_URL

Example

​new TalkingAvatar(options)

​Members

​DEFAULT_MODEL_URL

​Example

new TalkingAvatar(options)

Members

DEFAULT_MODEL_URL

Example