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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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与javascript的两种交互方式
2006/10/09 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
使用Python对Excel进行读写操作
2017/03/30 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
护理自我鉴定范文
2013/10/06 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
员工薪酬福利制度
2014/01/17 职场文书
实验教师岗位职责
2014/02/13 职场文书
保密承诺书范文
2014/03/27 职场文书
三方合作协议书范本
2014/04/18 职场文书
小学教代会开幕词
2016/03/04 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python