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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php中使用url传递数组的方法
2015/02/11 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
详解php中 === 的使用
2016/10/24 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python打印“菱形”星号代码方法
2018/02/05 Python
python实现简单五子棋游戏
2019/06/18 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
postman和python mock测试过程图解
2020/02/22 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
幼儿运动会邀请函
2014/01/17 职场文书
个人自我剖析材料
2014/09/30 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers