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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
使用express来代理服务的方法
Jun 21 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python regex库实例用法总结
2021/01/03 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
12岁生日感言
2014/01/21 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android