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

来源:赵克立博客 分类: 前端开发 标签:--发布时间:2017-08-01 15:30:46最后更新:2017-08-02 17:00:30浏览:6316
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-08-02 17:00:30
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

参照下面的实例代码,部署到自己的页面中,

代码功能:

使用的是百度的语音播放地址

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=这里是要播放的文字 

另外搜狗主意播放地址也可以用

http://fanyi.sogou.com/reventondc/microsoftGetSpeakFile?from=translateweb&spokenDialect=zh-CHS&text=这里是要播放的文字 ;


打开后直接可以播放语音

里面的参数 spd=5 是语音的播放速度越大越快

如果哪条语音播放失败会继续重新加到队列中,直到播放成功,不会漏播文字

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>百度语音合成接口</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
</head>
<body>
    <script type="text/javascript">
(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&source=web&text=" + encodeURI(_cur.text);
                        _v.play();
                    } else {
                        clearInterval(_timeid);
                        _timeid = 0;
                    }
                }
            }, 2000);
        },
        initVideo: function() {
            var _t = this;
            _v = document.createElement('video');
            _v.addEventListener('ended', function() {
                _t.playEnd();
            });
            _v.addEventListener('error', function() {
                _debug(_cur);
                _v.pause();
            });
        }
    };
})(window);
//使用方法
bobao.addText('这是第一个语音播报 ', function() {
    console.log('第一个结束啦');
});
bobao.addText('本博客有帮助你解决你的问题吗?', function() {
    console.log('第二个结束啦');
});
bobao.addText('想添加更多语音请直接用本行代码添加文字', function() {
    console.log('第三个结束啦');
});
    </script>
</body>
</html>

使用方法

在用到的页面中添加下面js

(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&source=web&text=" + encodeURI(_cur.text);
                        _v.play();
                    } else {
                        clearInterval(_timeid);
                        _timeid = 0;
                    }
                }
            }, 2000);
        },
        initVideo: function() {
            var _t = this;
            _v = document.createElement('video');
            _v.addEventListener('ended', function() {
                _t.playEnd();
            });
            _v.addEventListener('error', function() {
                _debug(_cur);
                _v.pause();
            });
        }
    };
})(window);
bobao.addText('这是第一个语音播报 ');
bobao.addText('本博客有帮助你解决你的问题吗?');
bobao.addText('想添加更多语音请直接用本行代码添加文字');

需要播放语音完成后进行一些操作的,就添加一个回调

//回调使用方法
bobao.addText('这是第一个语音播报 ', function() {
    console.log('第一个结束啦');
});
bobao.addText('本博客有帮助你解决你的问题吗?', function() {
    console.log('第二个结束啦');
});
bobao.addText('想添加更多语音请直接用本行代码添加文字', function() {
    console.log('第三个结束啦');
});



微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python