H5 语音朗读 API
码上世界 / Dec 06, 2020 / 3 min read / 217
前段时间有同学问我 h5 有没有朗读 api ,一开始他找了 云服务的 api ,其实 h5 本身自带朗读

h5 中相关的 API 有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthesis)”,这两个名词听上去很高大上其实就是 “语音转文字”,和“文字变语音”,这次我们看看我们要使用的“文字变语音”(SpeechSynthesisUtterance) 。

兼容性

用之前我先来看看兼容性

SpeechSynthesisUtterance 兼容性

可以看到 IE 不支持 ,部分移动端不支持,其他的都还好!

简单用法

先来个最简单的使用例子 读出 "羽叶风雨 Nice"

var utterThis = new SpeechSynthesisUtterance("羽叶风雨 Nice");
speechSynthesis.speak(utterThis);

浏览器 使用一下,(真~不~错~)。

支持属性

当然还有其他玩法 ,api 还支持 语言 音量 语速 音高

根据这些属性我来封装成语音函数

function speak(textToSpeak) {
  var u = new SpeechSynthesisUtterance();
  u.text = textToSpeak;
  //汉语
  u.lang = "zh-CN";
  //速度
  u.rate = 1;
  //  其他属性
  speechSynthesis.speak(u);
}
speak("支付宝到账,100万,元");

😄 😁 😆

试试别的语言

function speak(textToSpeak) {
  var u = new SpeechSynthesisUtterance();
  u.text = textToSpeak;
  //汉语
  u.lang = "ja-JP";
  //速度
  u.rate = 1;
  speechSynthesis.speak(u);
}
speak("雨の降る夜は"); //雨下的夜

😛 😝 😜

回调方法

不仅如此,该实例对象还暴露了一些方法:

示例 在语音读完打印 "真的到账了!!!"

function speak(textToSpeak, fun) {
  var u = new SpeechSynthesisUtterance();
  u.text = textToSpeak;
  //汉语
  u.lang = "zh-CN";
  //速度
  u.rate = 1;
  //  其他属性
  speechSynthesis.speak(u);
  u.onend = function () {
    fun && fun();
  };
}
speak("支付宝到账,100万,元", function () {
  console.log("真的到账了!!!");
});

speechSynthesis

我们看到上面例子还是用了 speechSynthesis 对象,它是是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

我来看看我的浏览器支持哪些语音包列表 ,运行 speechSynthesis.getVoices()

语音包列表

总结

语音API还不太成熟,可以当成彩蛋类来用!比如消息提醒,或者可能为以后无障碍提供帮助!