大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么 在HTML5中实现一个语音合成功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联公司服务项目包括上饶网站建设、上饶网站制作、上饶网页制作以及上饶网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,上饶网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到上饶省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
Speech Synthesis API
通过上面的例子我们可以猜测到上面调用的两个方法的功能
SpeechSyntehesisUtteranc window.speechSynthesis.speak
当然了,语音合成不仅仅包含这两个API,but我们先从这两点入手
SpeechSyntehesisUtteranc
参考:developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 对象包含了语音服务要读取的内容和一些参数,比如语言,音高和音量
SpeechSyntehesisUtteranc() SpeechSynthesisUtterance.lang SpeechSynthesisUtterance.pitch SpeechSynthesisUtterance.rate SpeechSynthesisUtterance.voice SpeechSynthesisUtterance.volume
注意:以上属性都是 可读写 的! 可以把下面这段代码copy下来尝试一下,注释中会有说明
let msg = new SpeechSynthesisUtterance(); msg.text = "how are you" // 要合成的文本 msg.lang = "en-US" // 美式英语发音(默认自动选择) msg.rate = 2 // 二倍速(默认为 1,范围 0.1~10) msg.pitch = 2 // 高音调(数字越大越尖锐,默认为 1,范围 0~2 ) msg.volume = 0.5 // 音量 0.5 倍(默认为1,范围 0~1) window.speechSynthesis.speak(msg);
同时这个对象还可以响应一系列事件,可能会用到的:
start
end
boundary
pause
resume
借助这些事件我们可以完成一些简单的功能,比如英文句子的单词数量统计:
let count = 0; // 词语数量 let msg = new SpeechSynthesisUtterance(); let synth = window.speechSynthesis; msg.addEventListener('start',()=>{ // 开始阅读 console.log(`文本内容: ${msg.text}`); console.log("start"); }); msg.addEventListener('end',()=>{ // 阅读结束 console.log("end"); console.log(`文本单词(词语)数量:${count}`); count = 0; }); msg.addEventListener('boundary',()=>{ // 统计单词 count++; });
经过尝试,由于中文没有用空格将每个词语分开,所以会进行自动的识别,比如 欢迎读者 会被识别为 欢迎 和 读者 两个词语
SpeechSynthesis
参考: developer.mozilla.org/en-US/docs/…
说完了 SpeechSyntehesisUtteranc 我们再来看看 SpeechSynthesis
SpeechSynthesis 的主要作用是对语音进行一系列的控制,比如开始或者暂停
它有三个只读属性,表明了语音的状态:
SpeechSynthesis.paused SpeechSynthesis.pending
同时还有一系列方法用来操作语音:
•SpeechSynthesis.speak() 开始读语音,同时触发 start 事件
•SpeechSynthesis.pause() 暂停,同时触发 pause 事件
•SpeechSynthesis.resume() 继续,同时触发 resume 事件
•SpeechSynthesis.cancel() 取消阅读,同时触发 end 事件
基于这些操作方法,我们可以进一步增强我们的文字阅读器:
回到最初的起点
让我们回到最初的起点,我们可以基于上面的内容猜测一下有些网站中,文章的自动阅读是怎么实现的
如果这个网站前端采用了 MVVM 框架(以 Vue 为例),那么文章内容是也许存储在 data 中,可以用来构造我们需要的语音合成
当然,也有可能文章是通过 ajax 请求得到的,解析请求的数据,构造语音合成对象
如果文章是直接在 html 中写死的,这个时候就需要对 DOM 进行解析,经过测试,即便是下面这样的混乱的结构
1
2
- 3
- 4
9
5 6 7 8
看完上述内容,你们掌握怎么 在HTML5中实现一个语音合成功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!