JS实现文本转语音 续
发布时间:2024年4月4日 作者:未知 查看次数:479
js文字转语音 相关回调函数 实例对象的一些属性,包括: text – 要合成的文字内容,字符串。 lang – 使用的语言,字符串, 例如:"zh-cn" voiceURI – 指定希望使用的声音和服务,字符串。 volume – 声音的音量,区间范围是0到1,默认是1。 rate – 语速,数值,默认值是1,范围是0.1到10,表示语速的倍数,例如2表示正常语速的两倍。 pitch – 表示说话的音高,数值,范围从0(最小)到2(最大)。默认值为1。 代码: var utterThis = new window.SpeechSynthesisUtterance('中文转语音播放'); window.speechSynthesis.speak(utterThis); 可以为: var utterThis = new window.SpeechSynthesisUtterance(); utterThis.text = '中文转语音播放'; window.speechSynthesis.speak(utterThis); 基础方法: //播放 window.speechSynthesis.speak(); //暂停 window.speechSynthesis.pause(); //继续 window.speechSynthesis.resume(); //停止 window.speechSynthesis.cancel(); 自:https://blog.csdn.net/Ljwen_/article/details/132641226 const synth = window.speechSynthesis; synth.speak(); //只能接收SpeechSynthesisUtterance作为唯一的参数,作用是读合成的话语。 synth.stop(); //立即终止合成过程 synth.pause(); //暂停合成过程。将当前语音对象置为暂停状态,这里需要注意一下,当调用这个方法时,整个浏览器的语音播放会处于一个暂停状态,如果没有调用 cancel 或 resume 方法,则不会继续播放,包括其他标签页添加进语音播放列表的语音合成对象; synth.resume(); //重新开始合成过程。将当前语音对象置为非暂停状态,如果是暂停状态,则继续播放剩下的语音; synth.cancel(); //取消。移除所有语音队列中的语音,相当于清空的功能; synth.getVoices(); //获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效(getVoices的获取是个异步的过程,因此,你可以直接在控制台输入,speechSynthesis.getVoices()返回的是一个空数组,没关系,多试几次,或者搞个定时器之类的。) pending:表示当前播放列表是否有未播完的语音,即播放列表长度是否大于 2; speaking:表示当前是否有语音正在进行播放,无论是播放还是暂停的状态, 也就是播放列表是否为空; onvoiceschanged:监听事件,当 SpeechSynthesisVoice 列表发生改变的时候触发,通常也是在这个事件中通过 ========================================= 自:https://www.jianshu.com/p/b9b51db8b71a 千万注意的一点:因为 getVoice 方法里面返回的值有国家,所以做多语言的语音挺有用的,但是如果这样使用,getVoice 方法会直接返回空数组。 function populateVoiceList() { const synth = window.speechSynthesis; const voices = synth.getVoices(); console.log(voices); }; populateVoiceList(); 原因如下: 因为Firefox不支持SpeechSynthesis.onvoiceschanged ,所以很常规地只是返回语音对象列表当SpeechSynthesis.getVoices() 被触发。但是 Chrome 就有点不同了,在SpeechSynthesis.getVoices() 被触发时,先要等待事件触发(有点绕~按照下面代码,populateVoiceList 函数在Firefox运行一次,在Chrome中运行两次): 现修改如下 function populateVoiceList() { const synth = window.speechSynthesis; const voices = synth.getVoices(); console.log(voices); }; populateVoiceList(); // onvoiceschanged===null; if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; } //经测,仅仅这样有的情况下是不行的。 ========================================= SpeechSynthesisUtterance属性用法主要包括:text 属性、lang属性、voice属性(指定话语的说话音量。它的范围是0到1(含0和1))、rate属性(指定话语的语速。这是相对于此语音的默认速率。严格禁止小于0.1或大于10的值)、pitch属性(指定发声的说话音调。范围在0到2之间(含0和2)。 const msg = new SpeechSynthesisUtterance(); msg.lang:使用语言 msg.onboundary:语音达到单词或句子边界时触发 msg.onend: 语音说完后触发(这是一个函数) msg.onerror: 错误时触发 msg.onmark: 语音到达指定的 SSML “标记” 标签时触发 msg.onpause: 暂停 msg.onresume: 恢复暂停 msg.onstart: 开始 msg.pitch: 音高 msg.rate: 语速 msg.text: 文本 msg.voice: 语音 msg.volume: 音量 在Google Chrome浏览器下却出现错误:speechSynthesis.speak() without user activation is deprecated and will be removed. 经查找,这是由于谷歌浏览器针对垃圾广告和诈骗网页的滥用谷歌浏览器开发团队已经决定自下个版本开始限制语音合成接口的自动播放。自新版本开始用户必须手动点击播放按钮才能播放语音合成内容,用户不主动操作那么直接禁止音频的播放。 试了几种模拟点击,都无效。只能在用户交互(点击播放)下播放了。 代码: <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <meta name='Keywords' content=''> <meta name='Description' content=''> <title>查找Web Speech API中文支持情况</title> <body> <button id="myButton" onclick="mstart()">播放声音</button> <div id="showInf"></div> <script> var voices=[]; var langInx=-1; function populateVoiceList() { const synth = window.speechSynthesis; voices = synth.getVoices(); for(let i=0;i<voices.length;i++){ if(voices[i].lang=="zh-CN"){ langInx=i; break; } } if(langInx!=-1){ // 创建一个新的SpeechSynthesisUtterance对象 const msg = new SpeechSynthesisUtterance(); document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + voices[langInx].lang + " 第" + langInx + "个; " + voices[langInx].name + "<br>"; msg.voice=voices[langInx]; // 设置要转换的文本 msg.text = '支持中文转换'; // 设置语音的语言 msg.lang = 'zh-CN'; // 设置语音的音量 msg.volume = 1; // 0到1之间 // 设置语音的语速 msg.rate = 1; // 0.5到2之间 // 设置语音的音调 msg.pitch = 1; // 0到2之间 //msg.方法 自:http://www.manongjc.com/detail/27-mhlwttuvwzoijsh.html msg.onend = (event) => { //语音合成结束时候的回调(语音读完后触发) document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + "<br>合成结束"; } msg.onstart = (event) => { document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + "<br>合成开始"; } msg.onerror = (event) => { document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + "<br>onerror"; } msg.onpause = (event) => { document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + "<br>暂停"; } msg.onresume = (event) => { document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + "<br>恢复"; } msg.onboundary = (event) => { document.getElementById("showInf").innerHTML = document.getElementById("showInf").innerHTML + "<br>在单词或句子边界"; } // 使用window.speechSynthesis.speak方法来播放语音 window.speechSynthesis.speak(msg); }else{ alert('无中文语音库'); } } function mstart(){ // 检查浏览器是否支持Web Speech API if ('speechSynthesis' in window) { // var utterThis = new window.SpeechSynthesisUtterance('中文转语音播放'); // window.speechSynthesis.speak(utterThis); var voices = speechSynthesis.getVoices(); //populateVoiceList(); if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = (event) => {populateVoiceList();} } } else { alert('浏览器不支持 Web Speech API'); } } </script> </body> </html> |
|
|