A JavaScript library that can help you quickly add accessible reading modes. Based on SpeechSynthesis API implementation.

简体中文

Note: In version 2.0, the package name was changed to wbf

Use npm

$ npm install wbf

or yarn

$ yarn add wbf

demo:

• en-demo
• zh-CN-demo

Example:

Wbf adopts the singleton design pattern, and it is recommended to use getInstance to create and obtain instances.

const options = {
  language: 'en',
  rate: 1,
  pitch: 1,
  readMode: 'finger'
}
const instance = Wbf.getInstance(options)
openBtn.addEventListener('click', () => {
  instance.open()
})

Options:

A boolean value indicating whether the current state is on. defaults：false.

type readMode = 'finger' | 'continuous'

continuous: Continuous reading document.body.innerText. finger: Point to read, read the text of the element pointed by the mouse, the img tag will read the text of the alt attribute.

defaults：'finger'.

type language = 'en' | 'zh-CN'

Use language, the default value is'zh-CN'.

Speaking rate, range 0.1 (lowest) ~ 10 (highest), default value: 1.

Intonation, range 0 (lowest) ~ 2 (highest), default value: 1.

Volume, range 0 (lowest) and 1 (highest), default value: 1.

You can provide an external reading text method externalFn instead of using the playAudio method provided by class Wbf.

Whether the default console element is required, the default value is true.

open Wbf's function.

open (): void;

close Wbf's function.

close (): void;

The function of modifying the Wbf attribute cannot modify the non-existing attribute and the opening attribute.

changeOptions (keyName: string, value): void;

A function to modify the Wbf reading mode.

type readMode = 'finger' | 'continuous';
changeMode (readMode: readMode): void;

A function to read a string.

playAudio (str: string): SpeechSynthesisUtterance | undefined

See for details MDN SpeechSynthesis

For bugs or suggestions, you can submit via create an issue. © 2021 GitHub, Inc.