语音合成（tts）的初体验

背景

最近无意中脑子闪过一个想法：一些场景需要将文字转换成语音进行播报，有没有什么办法，可以实现

直接在 mdn 上进行搜索，全新的知识又增加了。大多数的浏览器实现了两种语音能力-语音识别和语音合成

使用 Web Speech API - Web API 接口参考 | MDN (mozilla.org)

楼主的需求也就是属于的语音合成范畴，简称为：tts

使用

使用浏览器的语音合成能力，很简单，参考 API 文档，只需要以下两步

// 创建语句
const uttr = new SpeechSynthesisUtterance('hello world');
// 语句转语音
window.speechSynthesis.speak(uttr);

当然，SpeechSynthesisUtterance还支持配置多个属性，例如：音色、音量、速率等等

// 创建语句
const uttr = new SpeechSynthesisUtterance('hello world');

// 配置属性
uttr.voice = speechSynthesis.getVoices()[0];
uttr.volume = 2;
uttr.pitch = 2;
uttr.rate = 2;

// 语句转语音
window.speechSynthesis.speak(uttr);

SpeechSynthesisUtterance - Web APIs | MDN (mozilla.org)

Promise 封装

语音合成是一个同步执行的过程，但是楼主的实际的使用场景中，需要支持异步：等待语音合并并播报完毕之后，才进行后续的操作。

因此需要将方法封装成一个 Promise。

封装成 Promise 需要知道语音播报的两个状态：播报完成和播报失败，分别对应 resolve 状态和 reject 状态

查看 API 文档，发现SpeechSynthesisUtterance对外暴露了onend和onerror两个属性，那就可以对应上 resolve 和 reject 状态，于是开始编码

// main.ts

export function speck(text: string) {
  const uttr = new SpeechSynthesisUtterance(text);

  return new Promise<boolean>((resolve, reject) => {
    uttr.onend = () => {
      resolve(true);
    };

    uttr.onerror = () => {
      reject(false);
    };
    window.speechSynthesis?.speak(uttr);
  });
}

核心的代码已完成

楼主在这基础上，补充了入参配置、入参校验、单元测试和 demo。并发布了一个 npm 包

项目 Github 地址：

AFine970/ttspeech: A Promise tts api, it depend on browser api window.speechSynthesis (github.com)

对语音合成的朋友，不妨可以来看看，如何可以给个star，那更感谢了~

最后