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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 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中的加密功能
2006/10/09 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
pyramid配置session的方法教程
2013/11/27 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Python实现异步IO的示例
2020/11/05 Python
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
大学生演讲稿
2014/04/25 职场文书
书香家庭事迹材料
2014/05/09 职场文书
责任书格式
2015/01/29 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
辩护意见书
2015/06/04 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书