Talking Avatar

A lightweight JavaScript library that makes avatar images speak using browser Text-to-Speech with dynamic lip-sync animation.

Installation

npm install talking-avatar

Usage

<canvas id="avatarCanvas"></canvas>

2. JavaScript / TypeScript

import { TalkingAvatar } from 'talking-avatar';

// Initialize circular talking avatar
const avatar = new TalkingAvatar({
  container: 'avatarCanvas', // Canvas ID or HTMLCanvasElement
  avatar: 'emma',            // 'alex' | 'emma'
  size: 'large',             // 'small' (140px) | 'medium' (260px) | 'large' (400px) | number ( e.g. 250 )
  borderRadius: '50%',       // Circular 50% border radius
  voice: {
    rate: 1.0,
    pitch: 1.0,
    lang: 'en-US'
    }
});

avatar.speak('Hello, welcome to Talking Avatar!');
</script>

API

new TalkingAvatar(options)

| Option | Type | Default | Description | |----------------|---------------------|----------|------------------------------------------------------------| | container | string | — | Canvas element ID (required) | | avatar | string | 'alex' | Avatar name: 'alex' or 'emma' | | size | string | number | 'large'| 'small' (140px), 'medium' (260px), 'large' (400px), or a number | | borderRadius | string | '50%' | CSS border radius | | voice | object | {} | { rate, pitch, lang } for speech |

Methods

avatar.speak('text')       // Speak text (returns Promise)
avatar.pause()             // Pause speech
avatar.resume()            // Resume speech
avatar.stop()              // Stop speech
avatar.setSize('medium')   // Change size
avatar.setAvatar('emma')   // Switch avatar

Events

avatar.on('start', ({ text }) => { });
avatar.on('word', ({ word, index }) => { });
avatar.on('end', () => { });
avatar.on('pause', () => { });
avatar.on('resume', () => { });