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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
vue.js项目打包上线的图文教程
Nov 16 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中cookie的使用方法
2014/03/29 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
写JQuery插件的基本知识
2013/11/25 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
小小聊天室Python代码实现
2016/08/17 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python进阶之自定义可迭代的类
2019/08/20 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python pip使用超时问题解决方案
2020/08/03 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
预备党员思想汇报
2014/01/08 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
作文评语集锦大全
2014/04/23 职场文书
运动会班级口号
2014/06/09 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
义诊活动通知
2015/04/24 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle