原生js实现文字朗读(window.speechSynthesis)

1,101 阅读1分钟

无意中发现的一个功能,感觉挺有意思的,记录一下。在项目中有时候我们可能需要实现文字朗读的功能,这时候可能会使用第三方sdk比如百度AI之类的,但是第三方一般会收费,其实window对象提供了一个属性来实现这个功能,就是speechSynthesis。

w3c文档地址:www.w3cschool.cn/fetch_api/f…

image.png 简单的使用一下,我这里是直接在Chrome浏览器的控制台操作了一下。

第一步:

先定义一个常量保存这个speechSynthesis属性:

const synth = window.speechSynthesis;

image.png

(注意:如果我们此时直接调播放方法就会报错,我一开始就遇到这个问题)

image.png

需要先实例化一个SpeechSynthesisUtterance对象,将文本传进去

const ssu = new SpeechSynthesisUtterance('哈哈哈')

image.png

第二步:

调用播放方法,将实例化的对象(就是转换后的文本)当参数传进去:

image.png

这时候浏览器就会自动播放定义的文本

最后:这里只是一个简单的使用,具体是否适合开发项目还是需要结合实际情况为准(比如声音的音色要求,或者浏览器兼容性等等因素),感兴趣的可以去看看文档。