js解决浏览器,SpeechSynthesis不能正常合成中文语音

工作中遇到,浏览器不能合成语音;
解决思路,合成失败时, 循环合成列表, 找到能正常合成的为止;
对于一直不能合成的浏览器, 设置开关, 关闭循环功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head><body><div id="app" style="position:relative;top:350px;"><button @click="getMessage()">开始</button><button @click="overPlay()">停止</button></div><script>const synth = window.speechSynthesis;const utterThis = new SpeechSynthesisUtterance();var voiceInd = 0var voicesconst appData = {data() {return {voiceInd: 0,playSate:false}},methods: {getMessage() {var text = "测试中文语音";// msgutterThis.text = text; // 文字内容 utterThis.lang = "zh-CN"; // 使用的语言:中文utterThis.volume = 1; // 声音音量：1utterThis.rate = 1; // 语速：1utterThis.pitch = 1; // 音高：1utterThis.onerror = (event) => {console.log(`An error has occurred with the speech synthesis: ${event.error}`, this.voiceInd);// 继续找var voices = synth.getVoices()if (this.voiceInd + 1 >= voices.length) {console.log(`error times`, this.voiceInd);} else {this.playVoice(this.voiceInd + 1);}}utterThis.onstart = (event) => {console.log('onstart', event);this.playSate = true}utterThis.onend = (event) => {//console.log(`onend `, event);if(playSate){this.playVoice(this.voiceInd);}}},playVoice(vInd) {var voice;console.log('pBTN', vInd, voices)// console.log(JSON.stringify(voices, ["voiceURI", "lang", "localService"]));if (voices == undefined || voices.length == 0) {voices = synth.getVoices();//  console.log(`赋值voices:aaa`, voices, voices.length)} else {// console.log(`voices.length:${voices.length}`)}if (voice == undefined || voice == null) {console.log(`赋值voices:aaa`, voices)for (var i = vInd; i < voices.length; i++) {if (voices[i]['localService'] && voices[i]['lang'] == "zh-CN") {console.log(`i==`, i)voice = voices[i];break;}this.voiceInd = i}console.log(`33333:`, this.voiceInd)utterThis.voice = voice;// console.log(utterThis.voice);synth.speak(utterThis); // 播放this.playState = true} else {// console.log("开始播放")utterThis.voice = voice;// console.log(utterThis.voice);synth.speak(utterThis); // 播放}},replay(utterThis) {console.log("重复播放")synth.speak(utterThis); // 播放},overPlay() {this.playState = falsesynth.cancel()}}}Vue.createApp(appData).mount('#app')</script>
</body></html>

js解决浏览器,SpeechSynthesis不能正常合成中文语音相关推荐

js解决浏览器打印自动分页的问题
js解决浏览器打印自动分页的问题参考文章: (1)js解决浏览器打印自动分页的问题 (2)https://www.cnblogs.com/dakini/p/7053159.html 备忘一下.
给js加版本号解决浏览器缓存问题
给js加版本号解决浏览器缓存问题参考文章: (1)给js加版本号解决浏览器缓存问题 (2)https://www.cnblogs.com/wblx/p/11050498.html 备忘一下.
解决浏览器下载文件时中文文件名乱码的问题
解决浏览器下载文件时中文文件名乱码的问题很多时候我们需要在后台为前端提供文件下载的功能,但是当文件名中有中文时我们不能直接将文件名返回,需要对中文的文件名进行处理后再返回. 一.文件下载contro ...
html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总，常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾本文主要介绍JS的跨浏览器兼容性 ...
JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题
一.概述描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行事件是由三部分组成的:事件源事件类型事件处理程序事件源:事件被触发的对象–谁事件类型:如何触发什么事 ...
用JS解决多行溢出文本的省略问题
前言在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支 ...
ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题
一.问题描述使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...
这样解决浏览器不兼容问题
原文出处:http://blog.csdn.net/qq1355541448/article/details/9833147 浏览器兼容性问题怎么解决? 如果想解决浏览器的兼容性问题,你首先要明白在一 ...
html js 浏览器语言,js 判断浏览器语言的方法
今天遇到一个要根据浏览器设置语言的类型,来展示网站的字体.比如,浏览器的语言是中文简体,那么网站也要显示中文简体字,如果是繁体或是英文都要根据浏览器当前设置的语言进行显示.那么,飞鸟慕鱼博客来和大家说 ...

js解决浏览器,SpeechSynthesis不能正常合成中文语音

js解决浏览器,SpeechSynthesis不能正常合成中文语音相关推荐

最新文章

热门文章