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入门之基本函数详解
Oct 21 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
JavaScript实现简单的计算器
Jan 16 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
汉字转化为拼音(php版)
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
《孔子游春》教学反思
2014/02/25 职场文书
保护环境建议书
2014/03/12 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
优秀班组申报材料
2014/12/25 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript