百度语音合成---前端vue项目
☞:官方文档
☞:网页示例
具体步骤:
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项目的更多相关文章
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- 前端Vue项目——登录页面实现
一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
- 前端vue项目部署到tomcat,一刷新报错404解决方法
公司前端写的后台部署到tomcat webapps目录下后,无法进行刷新,一刷新就会报错404,自动跳的404页面.在网上查了下,官方说是HTML5 History 模式引发的问题,但是解决方案中,并 ...
- 前端vue项目执行npm install 报错cd() never called()
前端我刚开始接触Vue,从GitHub上下载了代码程序,但缺少一些插件,用vscode打开并下载插件执行报错cd() never called! 解决的方式 1.执行cmd命令行不要再vscode里执 ...
- 前端vue项目-关于下载文件pdf/excel(三)
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...
- 前端Vue项目——购物车页面
一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...
- 前端Vue项目——初始化及导航栏
一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...
- 前端Vue项目——课程详情页面实现
一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...
随机推荐
- idea Error: java: OutOfMemoryError: insufficient memory处理
在更新项目代码或者运行项目时报错 OutOfMemoryError: insufficient memory,解决方式如下: 方式1: 点击file,选择Invalidate Caches 进行清理一 ...
- 【SQL server初级】SQL索引(一)
SQL索引[一](此文章为“数据库性能优化二:数据库表优化”附属文章之一) SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭开 ...
- 【SQL server基础】objectproperty()函数
SQL Server OBJECTPROPERTY使用方法 OBJECTPROPERTY 返回有关当前数据库中的模式作用域对象的信息.此函数不能用于不是模式范围的对象,例如数据定义语言(DDL)触 ...
- setfacl、getfacl
当用户访问一个文件时,权限匹配的顺序为owner--->group--->other.当设置访问控制列表后,owner--->facl_user--->group---> ...
- RabbitMQ原理介绍
RabbitMQ历史 RabbitMQ消息系统是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.在同步消息通讯的世界里有很多公开标准(如COBAR的IIO ...
- Python 对cookies的处理——urllib2
import urllib2 import cookielib cookie = cookielib.CookieJar() opener = urllib2.build_opener(urllib2 ...
- 让你如绅士般基于描述编写 Python 命令行工具的开源项目:docopt
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- JavaSE----01.Java简介
01.Java简介 1.java介绍 Java是于1995年由Sun公司推出的一种跨平台.面向对象的高级程序设计语言.Java最初的名字叫OAK.Java是一种通过解释方式来执行的语言,其语法 ...
- mac安装flask
1.1使用虚拟环境 输入以下命令可以检查系统是否安装了 virtualenv: $ virtualenv --version 大多数 Linux 发行版都提供了 virtualenv 包.例如,Ubu ...
- 聊聊db和缓存一致性的5种实现方式
数据存储在数据库中,为了加快业务访问的速度,我们将数据库中的一些数据放在缓存中,那么问题来了,如何确保db和缓存中数据的一致性呢?我们列出了5种方法,大家都了解一下,然后根据业务自己选择. 方案1 获 ...