web-barrier-free

一个可以帮助你快速添加无障碍阅读模式的 JavaScript 库。基于 SpeechSynthesis API 实现。

English

安装

注意：在2.0版本，包名称改为wbf

使用 npm

$ npm install wbf

或者 yarn

$ yarn add wbf

demo:

• en-demo
• zh-CN-demo

使用

示例

Wbf 采用单例设计模式，推荐使用 getInstance 创建和获得实例。

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

配置:

opening

一个表示当前是否为开启状态的 boolean 值。默认值：false 。

readMode

type readMode = 'finger' | 'continuous'

continuous: 连读 document.body.innerText, finger: 指读，阅读鼠标指向的元素文本，img 标签会阅读 alt 属性的文本。

默认值：'finger'。

language

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

使用语言，默认值 'zh-CN'。

rate

语速，范围 2 ~ 0.1，默认值：1。

pitch

语调，范围 2 ~ 0.1，默认值：1。

volume

音量，范围 2 ~ 0.1，默认值：1。

externalFn

你可以提供一个外部的阅读文字方法 externalFn，而不使用 class Wbf 提供的 playAudio 方法。

needConsole

是否需要默认的控制台元素, 默认值 true。

核心的 JavaScript API

open

开启 Wbf 的函数。

open (): void;

close

关闭 Wbf 的函数。

close (): void;

changeOptions

修改 Wbf 属性的函数，不能修改没有的属性和 opening 属性。

changeOptions (keyName: string, value): void;

changeMode

修改 Wbf 阅读模式的函数。

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

playAudio

阅读字符串的函数。

playAudio (str: string): SpeechSynthesisUtterance | undefined

兼容性

详情请见 MDN SpeechSynthesis

问题

bug 或者建议，你可以通过create an issue提交。 © 2021 GitHub, Inc.