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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
前台js调用后台方法示例
Dec 02 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
BootStrap selectpicker
Jun 20 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
es6数值的扩展方法
2019/03/11 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
python 基于opencv去除图片阴影
2021/01/26 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
生物学学生自我评价
2014/01/17 职场文书
经管应届生求职信范文
2014/05/18 职场文书
材料物理专业求职信
2014/09/01 职场文书
任命书格式范文
2015/09/22 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers