vue实现百度语音合成的实例讲解

这里我完全依照百度提供的语音合成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("语音合成接口调用失败!");
       }
     }
   }
  }

以上就是本次介绍的实例代码内容，大家可以在本机测试下，感谢大家的学习和对我们的支持。

赞 (0)

相关推荐

  • vue实现百度语音合成的实例讲解

    这里我完全依照百度提供的语音合成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) { c

  • 基于vue.js路由参数的实例讲解——简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

  • vue引入jq插件的实例讲解

    vue引入jq插件的实例讲解

    今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个加全,比如unslider插件,(function(){})(window.jQuery) { jQuery: "jquery", "window.jQuery": "jquery&qu

  • jsp页面数据分页模仿百度分页效果(实例讲解)

    废话不多说,直接上代码 请根据自己的项目.包名修改 <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%

  • vue 多入口文件搭建 vue多页面搭建的实例讲解

    红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 中修改 var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname,'../') var glob = require('glob'); var entries = getEntry('./src/modul

  • 对vue 键盘回车事件的实例讲解

    如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下: <input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placehol

  • 对vue事件的延迟执行实例讲解

    vue事件的延迟执行: <div id="box"> <input type="text" @keyup="show | debounce 2000"> </div> <script> var vm=new Vue({ data:{ }, methods:{ show:function(){ alert(1); } } }).$mount('#box'); </script> 以上这篇对

  • vue下canvas裁剪图片实例讲解

    由于时间关系 代码没有做整理大家有什么不懂得可以留言: 代码的主题思路备注中都有 大家可以看看 我的博客中还有关于canvas绘制矩形的文章有需要的可以看一下: HTML代码: 第一行的canvas为裁剪后展示用:div中的canvas存放原有尺寸的图片 <canvas id="canvasImg1" style=" position: absolute; margin: 2px 0 0 0"></canvas> <div id=&qu

  • Vue select 绑定动态变量的实例讲解

    概述 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定.所以通过数据的id或者下标进行变量拼接.页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code <div v-for="(item, index) in tagAllDate" :key="index"> <el-form-item :label="item.name"> <el-sel

  • vue.js刷新当前页面的实例讲解

    在我们修改过页面的某些数据后,通过想要把页面刷新一下,看看修改后的结果.由于vue的存在,页面是不会自动刷新的,需要我们手动进行操作.在vue里有三种刷新方法,最推荐的就是组合控制法,另外另种方法也会分享给大家学习,下面我们一起来看看vue如何刷新页面吧. 1.强制刷新 window.location.reload() 原生 js 提供的方法: this.$router.go(0),vue 路由里面的一种方法: 这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新

随机推荐