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

最新推荐文章于 2024-08-16 08:57:32 发布

冰凌辰夏

最新推荐文章于 2024-08-16 08:57:32 发布

阅读量2.4k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_40359932/article/details/118606679

版权

本文介绍了如何在不同浏览器中实现文字转语音播报，包括HTML5的SpeechSynthesisUtterance特性，适用于Firefox和360浏览器，以及使用百度API支持IE浏览器的方法。此外，还提到了通过iframe在Chrome中的应用，但需要注意src地址的限制和稳定性问题。

摘要由CSDN通过智能技术生成

   业务场景：当存在某些今日待办事项的时候，需要进行语音播报通知。
   并兼容常见的一些浏览器，目前兼容谷歌、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){