关于HTML5语音Web Speech

最新推荐文章于 2024-08-16 10:59:26 发布

管她是人是狐还是萨摩耶

最新推荐文章于 2024-08-16 10:59:26 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_41839179/article/details/89850288

版权

公司用了挺久的，简单记下。百分之九十拷贝，百分之十小辣鸡属于自己，就标原创，嘿嘿。

HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”

我公司业务主要用的是语音合成这个类，这玩意就是把要读的内容拼接成html,然后speak就ok了。

// 全局语音控件
var player = window.speechSynthesis;
// 需要讲的话
var speckThis = new SpeechSynthesisUtterance();

代码很简单，，嗯，就搞定了

先从最简单的例子说起，如果想让浏览器读出“你好，世界！”的声音，可以下面的JS代码：

var utterThis = new window.SpeechSynthesisUtterance('你好，世界！');
window.speechSynthesis.speak(utterThis);

没错，只需要这么一点代码就足够了，大家可以在自己浏览器的控制台里面运行上面两行代码，看看有没有读出声音。

上面代码出现了两个长长的对象，SpeechSynthesisUtterance和speechSynthesis，就是语音合成Speech Synthesis API的核心。

首先是SpeechSynthesisUtterance对象，主要用来构建语音合成实例，例如上面代码中的实例对象utterThis。我们可以直接在构建的时候就把要读的文字内容写进去：

var utterThis = new window.SpeechSynthesisUtterance('你好，世界！');

又或者是使用实例对象的一些属性，包括：

因此上面的代码也可以写作：

var utterThis = new window.SpeechSynthesisUtterance();
utterThis.text = '你好，世界！';

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

接下来是speechSynthesis对象，主要作用是触发行为，例如读，停，还原等：

2. 自己遇到的小问题

除了浏览器兼容问题，遇到的问题就是读取数字时，若数字是6位之内，他就读几万几千啥的。。很智能但业务冲突了就很烦

解决起来也很简单，给待读字符串拼接空格就解决了，亲测有效。

//获取相关字符串
var strElectronTaxNo = row.electronTaxNo.toString();
//分割并字符间都加上空格
var strElectronTaxNoSplit = strElectronTaxNo.split("").join(" ");

关注