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系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
Vue scoped及deep使用方法解析
Aug 01 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue实现信息管理系统
2020/05/30 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python坐标线性插值应用实现
2019/11/13 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
文明学生事迹材料
2014/01/29 职场文书
爱之链教学反思
2014/04/30 职场文书
社区班子对照检查材料
2014/08/27 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
信访稳定工作汇报
2014/10/27 职场文书
爱国电影观后感
2015/06/19 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers