wbf

web-barrier-free

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

简体中文

Install

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

Use

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:

opening

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

readMode

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'.

language

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

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

rate

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

pitch

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

volume

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

externalFn

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

needConsole

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

Main JavaScript API

open

open Wbf's function.

open (): void;

close

close Wbf's function.

close (): void;

changeOptions

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

changeOptions (keyName: string, value): void;

changeMode

A function to modify the Wbf reading mode.

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

playAudio

A function to read a string.

playAudio (str: string): SpeechSynthesisUtterance | undefined

Compatibility

See for details MDN SpeechSynthesis

Problem

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