撸三发
撸三发
  • 发布:2018-11-13 14:36
  • 更新:2019-06-24 12:42
  • 阅读:3448

mui使用百度语音合成来制作文字转语音来播放

分类:HTML5+

百度语音合成中有对应的webapi可以使用,这个相对比较简单,废话不多说直接上代码吧。代码比较简单,老规矩不懂的在下方评论留言,觉得好就点个赞,转发请注明出处:https://blog.csdn.net/baidu_21919557;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   
</head>
<body>
    <div id="">
        <textarea id="content" name="" rows="3" cols="20" style="top: 20px;height: 600px;"></textarea>
        <input id="play" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="播放"></input>
        <input id="puase" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="暂停"></input>
    </div>
     <script type="text/javascript" charset="utf-8">
          var tokenUrl = "https://openapi.baidu.com/oauth/2.0/token";
        var client_id = "client_id ";//此处为申请的client_id;
        var client_secret = "client_secret ";/此处为申请的client_secret ;
        var access_token;
        var data = "grant_type=client_credentials&client_id="+client_id+"&client_secret="+client_secret;
        var p = document.createElement("audio");//创建一个潜在的audio播放器
          mui("body").on("tap","#play",function(){
              var tex = document.getElementById("content").value.replace(/[\r\n]/g,"").replace(/\ +/g,"").replace(/-/g, '').trim();//对文本进行去空格和换行;
            var a=0,b=0,c=0;
            var contentArray = new Array();
            if(tex.length/500>=0){//接口上传限制字数,避免出现接口腻出,限制上传字数
                for (var i = 0; i < tex.length/500; i++) {
                    a = a + 500;
                    splitTex = tex.slice(b,a);
                    b=a;
                    contentArray.push(splitTex);
                }
            }
              mui.ajax({
                type:"get",
                url:tokenUrl,
                data:data,
                async:true,
                success:function(resp){
                    if(resp.access_token){
                        access_token = resp.access_token;
                        var shibieUrl = "http://tsn.baidu.com/text2audio";
                        tex = encodeURI(encodeURI(contentArray[0]));
                        var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
                          p.controls="controls";
                        p.src = shibieUrl+"?"+data;
                        p.play();
                        c++;
                    }else{
                    }
                },
                error:function(error){
                }
            });
            setTimeout(function(){
                p.addEventListener('ended', function () {  
                    if(contentArray.length>0&&c<=contentArray.length){
                        var shibieUrl = "http://tsn.baidu.com/text2audio";
                        tex = encodeURI(encodeURI(contentArray[c]));
                        var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
                        p.src = shibieUrl+"?"+data;
                        p.play();
                        c++;
                    }else{
                        c=0;
                    }
                });
            },500);
          });
          mui("body").on("tap","#puase",function(){
               if(p.paused)                     {                 
                  p.play();
              }else{
               p.pause();
              }
              
          });
    </script>
</body>
</html>

2 关注 分享
9***@qq.com 我的地盘

要回复文章请先登录注册

6***@qq.com

6***@qq.com

有了问题也不修正,佩服
2019-06-24 12:42
l***@163.com

l***@163.com

回复 3***@qq.com :
不知道能贴一下代码吗 我调试 没反应
2019-05-29 18:31
撸三发

撸三发 (作者)

回复 3***@qq.com :
被你发现了亮点了,这个我听小说时发现了后面会出现underfind,后面改了,没更新上。哈哈
2018-12-13 14:09
3***@qq.com

3***@qq.com

还有一点
if(contentArray.length>0&&c<=contentArray.length){
这里 最后会取到contentArray[contentArray.length],下标溢出。会造成最后读的一个字段是 'undefined'
需要修改为 if(contentArray.length>0&&c<=contentArray.length-1){
2018-12-13 13:42
3***@qq.com

3***@qq.com

非常感谢,按照大神的方法,调试成功了。
有一点要注意一下: var client_id = "client_id ";//此处为申请的client_id;
对应是的 百度接口里的 API Key, 而不是 AppID。本菜鸟因为写的是ApppID,一直没调通,直到看了百度文档。
2018-12-13 13:39