A text2speech implementation for HTML documents.

Install via NPM or Yarn:

npm i @chialab/speaker

yarn add @chialab/speaker

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

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

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

Highlight the active sentence and/or word:

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

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;
}

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.

Speaker is released under the MIT license.