文字转语音播报,兼容多种浏览器

   业务场景：当存在某些今日待办事项的时候，需要进行语音播报通知。并兼容常见的一些浏览器，目前兼容谷歌、IE、火狐、360浏览器、QQ浏览器、搜狗浏览器。

1、实例

HTML

<iframe style="display:none;" allow="autoplay" id="ifr-video"></iframe>

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
var isChrome = userAgent.indexOf('Chrome')!=-1;
var is360Nomal = userAgent.indexOf('compatible') != -1;
/*** 文字转语音播报*/function textToVideo (txt,timeOut) {if (isIE || isIE11 || is360Nomal) {// IE浏览器,360兼容模式if(audio.src && audio.src != baiduApi +  encodeURI(txt)){setTimeout(function(){audio.src = baiduApi +  encodeURI(txt);audio.play();},timeOut);}else{audio.src = baiduApi +  encodeURI(txt);audio.play();}}else if(isChrome){//  360极速模式,Chromeif($("#ifr-video").attr('src') && $("#ifr-video").attr('src') != baiduApi +  encodeURI(txt)){setTimeout(function(){$("#ifr-video").attr('src',baiduApi +  encodeURI(txt));},timeOut);}else{$("#ifr-video").attr('src',baiduApi +  encodeURI(txt));}} else { // 火狐window.speechSynthesis.speak(new SpeechSynthesisUtterance(txt));}}

只有HTML5自带的API在调用多次speak方法后，语音会按顺序播放。由于setTimeout是异步的，多次调用文字转语音播报，通过替换src的方式很容易就会被覆盖。所以，我在调用此方法时加了自定义延时。如果src中有内容且不是自己的话，可以延时播放。不过这种方法只适用同一时间播报语句在3条左右的，太多的话就不好控制了。

我考虑过，在调用播放方法（如 audio.play()）时，加个睡眠时间，类似于java sleep 。(可通过js计时器不断计算时间差实现 ) 沉睡10s 左右，一句话也差不多播报完了。但这也有一个致命的问题，会阻塞其他的脚本代码，这就很不友好了，只好放弃这种思路。

后来，想到可以把所有的需要播报的文字，全部放在一个数组里。再用定时器定时去刷（每分钟一次），判断数组是否为空。不为空就给数组里的文字添加不同延时的语音播报。第一个语音播报也加了10s 延时，是为了避免同一时刻调用 videoPlay 造成的播报语句覆盖。

 // 语音播放文字数组var audioArr = [];audioArr.push("您有新的订单，请及时处理。");audioArr.push("您有新的订单，请及时处理。");audioArr.push("您有新的订单，请及时处理。");
/***  语音播报触发事件*/function videoPlay(){if(audioArr.length>0){var len = audioArr.length;for(var i=0;i<len;i++){setTimeout(function(){if(audioArr.length>0){textToVideo(audioArr.shift());}},10000 * (i+1));}}}/*** 文字转语音播报具体实现*/function textToVideo (txt){if (isIE || isEdge || isIE11 || is360Nomal) {// IE浏览器,edge,360兼容模式audio.src = baiduApi +  encodeURI(txt);audio.play();console.log(mini.formatDate( new Date(),'yyyy-MM-dd HH:mm:ss') + "  " + txt);}else if(isChrome){// 360极速模式,Chrome$("#ifr-video").attr('src',baiduApi +  encodeURI(txt));console.log(mini.formatDate( new Date(),'yyyy-MM-dd HH:mm:ss') + "  " + txt);} else { // 火狐window.speechSynthesis.speak(new SpeechSynthesisUtterance(txt));console.log(mini.formatDate( new Date(),'yyyy-MM-dd HH:mm:ss') + "  " + txt);}}/**定时触发查询是否有语音播报*/setInterval(function () {videoPlay();},60000);

2、判断浏览器类型

    function getBrowserType() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("Opera") > -1; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器var isFF = userAgent.indexOf("Firefox") > -1; var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;if (isIE) {var reIE = new RegExp("MSIE (\\d+\\.\\d+);");reIE.test(userAgent);var fIEVersion = parseFloat(RegExp["$1"]);if (fIEVersion == 7) {return "IE7";} else if (fIEVersion == 8) {return "IE8";} else if (fIEVersion == 9) {return "IE9";} else if (fIEVersion == 10) {return "IE10";}  else {return "0"} } if (isIE11) {return "isIE11";}if (isFF) {return "FF";}if (isOpera) {return "Opera";}if (isSafari) {return "Safari";}if (isChrome) {return "Chrome";}if (isEdge) {return "Edge";}}

3、使用SpeechSynthesisUtterance (支持Firefox与360)

SpeechSynthesisUtterance 是 HTML5的新特性，可以实现将文字转换成语音播放。

 var msg = new SpeechSynthesisUtterance(txt);window.speechSynthesis.speak(msg);

常见属性：

SpeechSynthesisUtterance.lang 获取并设置话语的语言
SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
SpeechSynthesisUtterance.text 获取并设置说话时的文本
SpeechSynthesisUtterance.voice 获取并设置说话的声音
SpeechSynthesisUtterance.volume 获取并设置说话的音量

demo：

 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);

常见方法：

SpeechSynthesis.speak()    //开始读
SpeechSynthesis.pause()   //暂停
SpeechSynthesis.resume() //继续
SpeechSynthesis.cancel()  //取消阅读

4、使用百度开发的API (支持IE)

    var url = "https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&vol=9&rate=32&per=0&tex=" + encodeURI(txt);// baidu文字转语音var  audio = new Audio(url);audio.src = url;audio.play();

注意：必须在外网条件下才能使用。

5、引用iframe (支持Chrome)

HTML

<iframe style="display:none;" allow="autoplay" id="ifr-video"></iframe>

JS

var url = "https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&vol=9&rate=32&per=0&tex=" + encodeURI(txt);// baidu文字转语音
$("#ifr-video").attr('src',url);

注意：此src地址受限且不稳定
1、src 必须是绝对地址
2、src 不能是localhost，可以使用ip、域名、也可以是127.0.0.1
3、当前页面的域名，不可以和引入的iframe 的 src 域名相等，会出现不稳定，时而不能播放的现象。

参考文献：
JS浏览器(谷歌浏览器)网页实现音频(提示音)自动播放
web文字转语音