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 页面输出值
Nov 30 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
Vue组件实现触底判断
Jun 26 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue小白入门教程
2018/04/02 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python之文字转图片方法
2018/05/10 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
办公室主任岗位职责
2013/11/08 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
vue项目支付功能代码详解
2022/02/18 Vue.js