https://github.com/drl990114/web-barrier-free
A JavaScript library that can help you quickly add accessible reading modes. Based on SpeechSynthesis API implementation.
https://github.com/drl990114/web-barrier-free
accessibility accessible-read javascript speechsynthesis typescript web-barrier-free webaccessibility
Last synced: 4 months ago
JSON representation
A JavaScript library that can help you quickly add accessible reading modes. Based on SpeechSynthesis API implementation.
- Host: GitHub
- URL: https://github.com/drl990114/web-barrier-free
- Owner: drl990114
- License: mit
- Created: 2021-10-24T15:26:17.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-18T10:52:29.000Z (over 2 years ago)
- Last Synced: 2024-05-22T23:22:20.788Z (9 months ago)
- Topics: accessibility, accessible-read, javascript, speechsynthesis, typescript, web-barrier-free, webaccessibility
- Language: TypeScript
- Homepage: https://codesandbox.io/s/loving-pasteur-ui8n0q
- Size: 453 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README-cn.md
- License: LICENSE
Awesome Lists containing this project
README
[](./LICENSE) [](https://github.com/halodong/web-barrier-free) [][npm-url] [](https://www.travis-ci.com) [](https://codecov.io/gh/halodong/web-barrier-free)
[npm-url]: https://npmjs.org/package/wbf
# web-barrier-free
一个可以帮助你快速添加无障碍阅读模式的 JavaScript 库。基于 `SpeechSynthesis` API 实现。
[English](./README.md)
## 安装
**注意：在2.0版本，包名称改为wbf**
使用 npm
```
$ npm install wbf
```
或者 yarn
```
$ yarn add wbf
```
**demo:**
- [en-demo](https://codesandbox.io/s/loving-pasteur-ui8n0q)
- [zh-CN-demo](https://halodong.github.io/)
## 使用
**示例**
Wbf 采用单例设计模式，推荐使用 getInstance 创建和获得实例。
```js
const options = {
language: 'en',
rate: 1,
pitch: 1,
readMode: 'finger'
}
const instance = Wbf.getInstance(options)
openBtn.addEventListener('click', () => {
instance.open()
})
```
**配置:**
### opening
一个表示当前是否为开启状态的 boolean 值。默认值：false 。
### readMode
```ts
type readMode = 'finger' | 'continuous'
```
continuous: 连读 `document.body.innerText`, finger: 指读，阅读鼠标指向的元素文本，`img` 标签会阅读 `alt` 属性的文本。
默认值：'finger'。
### language
```ts
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 的函数。
```typescript
open (): void;
```
### close
关闭 Wbf 的函数。
```typescript
close (): void;
```
### changeOptions
修改 Wbf 属性的函数，不能修改没有的属性和 `opening` 属性。
```typescript
changeOptions (keyName: string, value): void;
```
### changeMode
修改 Wbf 阅读模式的函数。
```typescript
type readMode = 'finger' | 'continuous';
changeMode (readMode: readMode): void;
```
### playAudio
阅读字符串的函数。
```typescript
playAudio (str: string): SpeechSynthesisUtterance | undefined
```
## 兼容性
详情请见 [MDN SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis#browser_compatibility)
## 问题
bug 或者建议，你可以通过[create an issue](https://github.com/halodong/web-barrier-free/issues/new)提交。 © 2021 GitHub, Inc.