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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
js切换光标示例代码
Oct 10 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
Python实现的Excel文件读写类
2015/07/30 Python
20个常用Python运维库和模块
2018/02/12 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python编写单元测试代码实例
2020/09/10 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
公益活动策划方案
2014/01/09 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
超市店庆活动方案
2014/08/31 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL