easy-speech

<h1 align="center">轻松语音</h1> <div align="center"> 跨浏览器语音合成；无依赖。 </div> <p align="center"> <br /> <a href="https://github.com/leaonline/easy-speech/blob/master/API.md"><strong>API 文档 »</strong></a> <br /> </p>

npm npm 包大小

⭐️ 为什么选择 EasySpeech？

创建这个项目是因为在大多数主流浏览器上运行 Web Speech API 的合成部分总是一个挑战。

✨ 特性

🪄 用于在多个浏览器上使用 speechSynthesis 的单一API
🌈 异步API（Promises、async/await）
🚀 所有事件的钩子；全局和/或特定语音实例
🌱 易于设置和集成：自动检测并加载可用的语音
🔧 包含许多特定于浏览器的问题的修复或解决方案
📝 通过 EasySpeech.debug 钩子进行内部日志记录
📦 多个构建目标
🎮 用于测试你的浏览器的在线演示

注意： 这不是一个polyfill包，如果你的目标浏览器不支持语音合成或Web Speech API，这个包将无法使用。

🚀 在线演示

在线演示可在 https://leaonline.github.io/easy-speech/ 获取你可以用它来测试你的浏览器对 speechSynthesis 的支持和功能。

📦 安装

通过npm安装：

$ npm install easy-speech

你还可以使用针对不同目标的各种构建版本，查看 dist 文件夹：

/dist/EasySpeech.js - ESM
/dist/EasySpeech.cjs.js - CommonJs
/dist/EasySpeech.es5.js - 兼容旧版Node
/dist/EasySpeech.iife.js - 兼容旧版的构建，即使在较旧或特殊的浏览器上也能工作，只要它们支持Promises（欢迎PR来转换为回调！）
/dist/index.d.ts - TypeScript类型定义

你可以通过CDN使用它们：

<!-- esm -->
<script type="module">
  import easySpeech from 'https://cdn.jsdelivr.net/npm/easy-speech/+esm'
</script>

<!-- 经典方式 -->
<script src="https://cdn.jsdelivr.net/npm/easy-speech/dist/EasySpeech.iife.js"></script>

👨‍💻 使用

导入 EasySpeech 并首先检测你的浏览器是否支持tts（文本转语音）：

import EasySpeech from 'easy-speech'

EasySpeech.detect()

它会返回一个包含以下信息的对象：

{
  speechSynthesis: SpeechSynthesis|undefined,
  speechSynthesisUtterance: SpeechSynthesisUtterance|undefined,
  speechSynthesisVoice: SpeechSynthesisVoice|undefined,
  speechSynthesisEvent: SpeechSynthesisEvent|undefined,
  speechSynthesisErrorEvent: SpeechSynthesisErrorEvent|undefined,
  onvoiceschanged: Boolean,
  onboundary: Boolean,
  onend: Boolean,
  onerror: Boolean,
  onmark: Boolean,
  onpause: Boolean,
  onresume: Boolean,
  onstart: Boolean
}

如果至少定义了 SpeechSynthesis 和 SpeechSynthesisUtterance，那么你就可以开始使用了。

🚀 初始化

准备好所有工作并不像应该的那样清晰，尤其是在针对跨浏览器功能时。异步初始化函数将帮助你解决这种情况：

EasySpeech.init({ maxTimeout: 5000, interval: 250 })
    .then(() => console.debug('加载完成'))
    .catch(e => console.error(e))

💽 加载语音

初始化程序将经过几个阶段来设置环境：

检测并确认基本支持 SpeechSynthesis，如果不支持则失败
直接加载语音
如果未加载但 onvoiceschanged 可用：使用 onvoiceschanged
如果 onvoiceschanged 不可用：回退到超时
如果触发了 onvoiceschanged 但没有可用的语音：回退到超时
超时在给定的 interval 内重新加载语音，直到达到 maxTimeout
如果在此之前加载了语音 -> 完成
如果未找到语音 -> 失败

如果你的初始化程序仍然没有检测到/加载任何语音，尽管支持语音合成，请提交一个问题！

设置备用语音

如果找到了语音，它将按以下规则设置备用语音：

如果所有语音中有一个语音的 default 属性设置为 true，则将其用作备用语音
否则，查找与当前 navigator.language 匹配的第一个语音
否则，使用数组中的第一个语音

注意：此备用语音不会被 EasySpeech.defaults() 覆盖，你的默认语音将优先使用，但在调用 EasySpeech.speak() 时如果没有找到语音，备用语音将始终存在。

📢 播放语音

这非常简单：

await EasySpeech.speak({
  text: 'Hello, world!',
  voice: myLangVoice, // 可选，将使用默认或备用语音
  pitch: 1,
  rate: 1,
  volume: 1,
  // 还有更多事件，请查看 API 以了解支持的事件
  boundary: e => console.debug('到达边界')
})