☞:官方文档

☞:网页示例

具体步骤:

  1.通过 socket.io 接收后端传过来的数据。

  2.判断是否在播放声音。  如果没有则直接获取百度 token 播放声音

  3.如果有,则存入数组。声音播放结束后,播放数组中的数据并且移除将要播放的数据

项目代码(注意,代码有删减仅供参考):

<template>
<div>
<div class="app">
<div id="bdtts_div_id">
<audio ref="audio" id="tts_autio_id" :src="audioSrc" autoplay="autoplay" @canplay="playing()" @ended="ending()">
</audio>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
audioSrc: '',
orderArr: [],
isPlay: false
}
},
methods: {
playing() {
// 开始播放声音
},
ending() {
          // 声音播放结束
console.log('audio end'); var arr = this.orderArr; console.log(this.orderArr) if (arr.length > 0) {
this.isPlay = true;
var data = arr[0]; this.orderArr.splice(0,1); this.axios.get('baidu', {
params: { //请求参数
}
}).then((res) => { var str = ''
if('wx' == data.type) {
str = '微信支付'
} else if('zfb' == data.type) {
str = '支付宝支付'
} str = str + data.message + '元'; this.audioSrc = 'http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=15378723&tok=' + res.data.access_token + '&tex=' + str + '&vol=15&per=0&spd=5&pit=5&aue=3';
this.$refs.audio.play()
}) } else {
this.isPlay = false;
} }
},
created: function() { this.$options.sockets.chat = (data) => {
console.log(data);
          // data: {id: 4, message: 44, type: "wx", order: "v3TYbgt1ea1551428506775"}
if(data.id == this.$route.query.id) { /**
* 1.添加进数组中
* 2.判断是否在播报
* 3.如果没有在播报---播放提醒
* 4.如果有在播放---播放结束之后,移除已播放过的内容
*/ if(this.isPlay == false) { this.isPlay = true; this.axios.get('baidu', {
params: { //请求参数
}
}).then((res) => { var str = ''
if('wx' == data.type) {
str = '微信支付'
} else if('zfb' == data.type) {
str = '支付宝支付'
} str = str + data.message + '元'; this.audioSrc = 'http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=15378723&tok=' + res.data.access_token + '&tex=' + str + '&vol=15&per=0&spd=5&pit=5&aue=3';
this.$refs.audio.play()
}) } else { console.log('存入数据')
this.orderArr.push(data);
} }
} }
}
</script> <style scoped>
.app {
margin-top: 200px!important;
margin-left: 33px!important;
}
</style>

百度语音合成---前端vue项目的更多相关文章

  1. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  2. 前端Vue项目——登录页面实现

    一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...

  3. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  4. 前端vue项目部署到tomcat,一刷新报错404解决方法

    公司前端写的后台部署到tomcat webapps目录下后,无法进行刷新,一刷新就会报错404,自动跳的404页面.在网上查了下,官方说是HTML5 History 模式引发的问题,但是解决方案中,并 ...

  5. 前端vue项目执行npm install 报错cd() never called()

    前端我刚开始接触Vue,从GitHub上下载了代码程序,但缺少一些插件,用vscode打开并下载插件执行报错cd() never called! 解决的方式 1.执行cmd命令行不要再vscode里执 ...

  6. 前端vue项目-关于下载文件pdf/excel(三)

    最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...

  7. 前端Vue项目——购物车页面

    一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...

  8. 前端Vue项目——初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...

  9. 前端Vue项目——课程详情页面实现

    一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...

随机推荐

  1. idea Error: java: OutOfMemoryError: insufficient memory处理

    在更新项目代码或者运行项目时报错 OutOfMemoryError: insufficient memory,解决方式如下: 方式1: 点击file,选择Invalidate Caches 进行清理一 ...

  2. 【SQL server初级】SQL索引(一)

    SQL索引[一](此文章为“数据库性能优化二:数据库表优化”附属文章之一) SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭开 ...

  3. 【SQL server基础】objectproperty()函数

    SQL Server OBJECTPROPERTY使用方法   OBJECTPROPERTY 返回有关当前数据库中的模式作用域对象的信息.此函数不能用于不是模式范围的对象,例如数据定义语言(DDL)触 ...

  4. setfacl、getfacl

    当用户访问一个文件时,权限匹配的顺序为owner--->group--->other.当设置访问控制列表后,owner--->facl_user--->group---> ...

  5. RabbitMQ原理介绍

    RabbitMQ历史 RabbitMQ消息系统是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.在同步消息通讯的世界里有很多公开标准(如COBAR的IIO ...

  6. Python 对cookies的处理——urllib2

    import urllib2 import cookielib cookie = cookielib.CookieJar() opener = urllib2.build_opener(urllib2 ...

  7. 让你如绅士般基于描述编写 Python 命令行工具的开源项目:docopt

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  8. JavaSE----01.Java简介

    01.Java简介 1.java介绍     Java是于1995年由Sun公司推出的一种跨平台.面向对象的高级程序设计语言.Java最初的名字叫OAK.Java是一种通过解释方式来执行的语言,其语法 ...

  9. mac安装flask

    1.1使用虚拟环境 输入以下命令可以检查系统是否安装了 virtualenv: $ virtualenv --version 大多数 Linux 发行版都提供了 virtualenv 包.例如,Ubu ...

  10. 聊聊db和缓存一致性的5种实现方式

    数据存储在数据库中,为了加快业务访问的速度,我们将数据库中的一些数据放在缓存中,那么问题来了,如何确保db和缓存中数据的一致性呢?我们列出了5种方法,大家都了解一下,然后根据业务自己选择. 方案1 获 ...