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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
JSONP跨域请求
Mar 02 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
Js类的构建与继承案例详解
Sep 15 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 柱状图实现代码
2009/12/04 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python logging模块学习笔记
2014/05/24 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python生成式的send()方法(详解)
2017/05/08 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python操作redis数据库的三种方法
2020/09/10 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
双十佳事迹材料
2014/01/29 职场文书
店长职务说明书
2014/02/04 职场文书
六查六看六改心得体会
2014/10/14 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书