这篇文章主要介绍了HTML5语音合成功能的实现代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
可将该代码复制到chrome控制台中体验
let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客");
window.speechSynthesis.speak(msg);
SpeechSyntehesisUtteranc
这个语音合成功能是HTML5的特性,其中也有一些属性是可配置的
let msg = new SpeechSynthesisUtterance();
msg.text = "how are you" // 要合成的文本
msg.lang = "en-US" // 美式英语发音(默认自动选择) 中文zh-CN
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
SpeechSynthesis 的主要作用是对语音进行一系列的控制,比如开始或者暂停
它有三个只读属性,表明了语音的状态:
SpeechSynthesis.paused
SpeechSynthesis.pending
同时还有一系列方法用来操作语音:
•SpeechSynthesis.speak() 开始读语音,同时触发 start 事件
•SpeechSynthesis.pause() 暂停,同时触发 pause 事件
•SpeechSynthesis.resume() 继续,同时触发 resume 事件
•SpeechSynthesis.cancel() 取消阅读,同时触发 end 事件
备注:
这个特性,是一个还在草案中的特性,没有被广泛支持
再次强调,这个 API 暂时还不能应用到生产环境中
目前比较通用的做法是在后端构造将文本合成成语音文件的 API(也许是第三方 API),然后在前端作为媒体播放