您现在的位置是：网站首页> 编程资料编程资料

鲜为人知的HTML5语音合成功能HTML5实时语音通话聊天MP3压缩传输3KB每秒使用Html5多媒体实现微信语音功能基于Html5实现的语音搜索功能HTML5为输入框添加语音输入功能的实现方法Jquery+html5可设置闹钟并且会语音提醒的时钟特效源码用html5实现语音搜索框的方法HTML5语音识别标签写法附图html5的新玩法——语音搜索HTML5 语音搜索只需一句代码HTML5 语音搜索(淘宝店语音搜素)

2023-10-16 424人已围观

简介这篇文章主要介绍了HTML5语音合成功能的实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

听一下就会发现，播放出来的声音并不是预先录制好的音频资料，而是通过文字识别后合成的语音

请先戴上耳机，然后将下面的代码复制到chrome控制台中体验～

 let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客"); window.speechSynthesis.speak(msg);

看，前端实现语音合成并不难

今天的主角 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 事件

基于这些操作方法，我们可以进一步增强我们的文字阅读器：