vue实现百度语音合成的实例讲解-成都快上网建站

vue实现百度语音合成的实例讲解

这里我完全依照百度提供的语音合成api来做:https://ai.baidu.com/docs#/TTS-Online-Node-SDK/top 直接去看node.js SDK。

成都创新互联主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设公司、程序开发、网站优化、微网站、小程序定制开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都做网站、成都网站建设、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。

1.换取access_token:

参考:https://ai.baidu.com/docs#/TTS-API/top,在这里用浏览器换取token

2.下载sdk依赖:

npm install baidu-aip-sdk

完整代码(非原创,参考了一个demo,但是很久以前写的找不到了):

btts(text) {
   console.log(text);   //以下参数参考api文档,token和人的声音音色之类的参数
   var param={
      tex: text,
      tok: '24.e835483633e8680242bb042693e1c071.********.1573463462.******-16425747',//这个token要换成自己的
      spd: 5,
      pit: 5,
      vol: 15,
      per: 4
    };
   var url = 'http://tsn.baidu.com/text2audio';
   var p = param || {};
   var that = this;
   var xhr = new XMLHttpRequest();
   xhr.open('POST', url);
    // 创建form参数
     var data = {};
     for (var p in param) {
     data[p] = param[p]
   }

     // 赋值预定义参数
     data.cuid = data.cuid || data.tok;
   data.ctp = 1;
   data.lan = data.lan || 'zh';
    //以上为封装请求的参数



     // 序列化参数列表
    var fd = [];
   for(var k in data) {
     fd.push(k + '=' + encodeURIComponent(data[k]));
   }

   var frd = new FileReader();
   xhr.responseType = 'blob';
   xhr.send(fd.join('&'));

    //请求返回结果处理
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
         if (xhr.response.type == 'audio/mp3') {
             //创建audio对象进行播报
           var audio = new Audio();
           audio.setAttribute('src', URL.createObjectURL(xhr.response));
           audio.play();
           audio=null;
         }else{
            //这里如果百度语音合成的接口返回类型不是audio/mp3,是json的话,代表你的参数有问题,返回结果失败,具体可以查看api文档
        alert("调用语音合成接口token已失效!");
        }
       }else{
        alert("语音合成接口调用失败!");
       }
     }
   }
  }

以上就是本次介绍的实例代码内容,大家可以在本机测试下,感谢大家的学习和对创新互联的支持。


网站名称:vue实现百度语音合成的实例讲解
网页地址:http://kswjz.com/article/gopgip.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流