结合百度语音合成兼容IE7的语音播报功能

作者：方雷
个人博客：http://blog.chargingbunk.cn/
微信公众号：rayson_666(Rayson开发分享)
个人专研技术方向：

• 微服务方向：springboot, springCloud,Dubbo
• 分布式/高并发： 分布式锁， 消息队列RabbitMQ
• 大数据处理： Hadoop, spark, HBase等

基于百度语音合成接口来实现， 已经有一个版本的实现，在参考文章中， 我在此基础上是有做兼容性，来满足项目中的需求，以下是兼容后的代码。

/**
 * 兼容IE及所有浏览器的语音播报功能
 * 这是基于
 */
(function(a) {
    var _debug = function(s) {
        console.log(s);
    };
    var _v = null;
    var playarr = [];
    var _cur = null;
    var _timeid = 0;
    a.bobao = {
        /**
         * 添加播放文本
         * @param {[type]} t    文本
         * @param {[type]} func 播放完成后的回调
         */
        addText: function(t, func) {
            playarr.push({
                text: t,
                callback: func
            });
            _timeid || this.start();
        },
        playEnd: function() {
            if (_cur) {
                'function' == typeof(_cur.callback) && _cur.callback();
                _cur = null;
            }
        },
        start: function() {
            var _t = this;
            _timeid = setInterval(function() {
                _v || _t.initVideo();
                if (_v.paused) {
                    _cur || (_cur = playarr.shift());
                    if (_cur) {
                        _v.src = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&source=web&text=" + encodeURI(_cur.text);
                        _v.play();
                    } else {
                        clearInterval(_timeid);
                        _timeid = 0;
                    }
                }else{
                // 判断IE
                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
                var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
                var flag = false;
                if(isIE){
                     var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                     reIE.test(userAgent);
                     var fIEVersion = parseFloat(RegExp["$1"]);
                     if(fIEVersion < 9){ // 小于ie9
                         flag = true;
                     }
                }
                
                if(flag){ // 小于ie9
                    _v = document.createElement("bgsound"); // 使用ie中独特的播放背景音乐的标签
                    _cur || (_cur = playarr.shift());
                    if (_cur) {
                        _v.src = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&source=web&text=" + encodeURI(_cur.text);
                        document.appendChild(_v);  
            clearInterval(_timeid);
                        _timeid = 0;
                    } else {
                        clearInterval(_timeid);
                        _timeid = 0;
                    }
                }
                
                }
            
            }, 1000);
        },
        initVideo: function() {
            var _t = this;
            _v = document.createElement('audio');
            if(_v.addEventListener){
               _v.addEventListener('ended', function() {
                    _t.playEnd();
               });
                _v.addEventListener('error', function() {
                  _debug(_cur);
                  _v.pause();
                });
            }else{ // 兼容ie浏览器
                _v.attachEvent('ended', function() {
                   _t.playEnd();
                });
                _v.attachEvent('error', function() {
                    _debug(_cur);
                    _v.pause();
                });
            }
        }
    };
})(window);

如下是执行代码

<script type="javascript">
 bobao.addText("我是第一段语音播报"，function(){
  // 执行完成后的回调函数， 回调函数不支持ie9以下
 // 如果有兼容的方法希望可以留言告知，谢谢
 console.log("第一段已经执行完了");
});
</script>

参考文章

1. 百度在线语音合成使用方法实例,带队列播放
2. 百度语音合成文档