Speaker

A text2speech implementation for HTML documents.

Get the library

Install via NPM or Yarn:

npm i @chialab/speaker

yarn add @chialab/speaker

pnpm add @chialab/speaker

Usage

Initialize

import { Speaker } from '@chialab/speaker';

const article = document.querySelector('article');
const speaker = new Speaker(article);

Playback

speaker.play(); // Play or resume playback
speaker.pause(); // Pause
speaker.stop(); // Stop

Highlight

Highlight the active sentence and/or word:

speaker.setupHighlighter({
    boundaries: true,
    sentences: true,
});

[!WARNING]
The client must support CSS Highlights API to enable highlighting. (caniuse.com)

Highlights colors

You can stylize highlighted words, sentences and blocks via CSS:

::highlight(speaker-blocks-highlight) {
    background-color: #ffc80080;
}

::highlight(speaker-sentences-highlight) {
    background-color: #ffc800;
}

::highlight(speaker-boundaries-highlight) {
    background-color: #ff9300;
}

Development

Build

Install the dependencies

yarn

and run the build script:

yarn build

This will generate the ESM and CJS bundles in the dist folder and declaration files in the types folder.

License

Speaker is released under the MIT license.