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


Posted in Javascript onOctober 14, 2019

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

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("语音合成接口调用失败!");
       }
     }
   }
  }

以上就是本次介绍的实例代码内容,大家可以在本机测试下,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
javascript修改图片src的方法
Jan 27 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 #Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 #Javascript
vue的路由映射问题及解决方案
Oct 14 #Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 #Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 #Javascript
You might like
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP实现小偷程序实例
2016/10/31 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
python实现定时播放mp3
2015/03/29 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python生成器与迭代器详解
2019/01/01 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
python清空命令行方式
2020/01/13 Python
python 模拟登陆github的示例
2020/12/04 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
投标邀请书范文
2014/01/31 职场文书
制作部班长职位说明书
2014/02/26 职场文书
论文指导教师评语
2014/04/28 职场文书
运动员口号
2014/06/09 职场文书
小学生安全责任书
2014/07/25 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
八年级历史教学反思
2016/02/19 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS