百度在线语音合成使用方法实例,带队列播放
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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('第三个结束啦'); });