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 相关文章推荐
DOM精简教程
Oct 03 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
Vue动态获取width的方法
Aug 22 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
JS中的一些常用的函数式编程术语
Jun 15 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 301转向实现代码
2008/09/18 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php车辆违章查询数据示例
2016/10/14 PHP
laravel自定义分页效果
2017/07/23 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
js中的this关键字详解
2013/09/25 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
解决Django连接db遇到的问题
2019/08/29 Python
python数据化运营的重要意义
2019/11/25 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
幼儿园教师岗位职责
2014/03/17 职场文书
2014年团队工作总结
2014/11/24 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
家庭经济困难证明
2015/06/23 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python