speakTTS文字转语音播放功能

embedded/2024/12/21 19:31:06/

场景:
speak-tts 文字转换语音的使用播放、暂停、恢复
安装
npm install speak-tts
引入
import Speech from ‘speak-tts
需求:
1.多条播报内容需要一条一条的播报 一进入页面就开始播报(数组的形式 后台返回)
2.暂停之后 在点击播放从头开始播放
3.可以选择是否重复播放

<template><i class="el-icon-video-pause" @click="paused()">暂停</i> <i class="el-icon-video-play" @click="goahead()" >播放</i><i class="el-icon-video-play" @click="isLoopPlay()" >是否重复播放</i>
</template>
<script>
import Speech from 'speak-tts'
data () {return {speech:null,dataList:['播报内容1',.......],//需要播报的内容isStopPlay:false,//是否停止播放currentIndex:0,//默认当前播放的是第一条isLoop:true,//是否循环播放 默认循环播放}
},
mounted(){this.SpeechInit()},
methods:{init(){this.play(this.dataList[this.currentIndex])},SpeechInit(){this.speech = new Speech()  this.speech.setLanguage('zh-CN')this.speech.init().then(()=>{this.init()})},//播放按钮play(word){this.speech.speak({text:word,listeners: {//开始播放onstart: () => { console.log("Start utterance")},//判断播放是否完毕onend: () => { //没有点击暂停播放if(!isStopPlay){this.currentIndex++//如果播放结束了 并且是最后一条的时候 判断是否需要循环播放 if(this.currentIndex> this.dataList.lenght && this.isLoop) {this.currentIndex=0}this.play(this.dataList(this.currentIndex)}},//恢复播放onresume: () => { console.log("Resume utterance") },},}).then(()=>{console.log("读取成功")})},//暂停paused() {this.isStopPlay=truethis.speech.pause();//初始化为第一条 删除speech 并赋值为nullthis.currenIndex=0this.speech.cancel()this.speech=null},//暂停之后 在点击播放goahead() {this.isStopPlay=falsethis.SpeechInit()},isLoopPlay(){	this.isLoop=!this.isLoop}
},
//离开页面取消语音destroyed() {this.speech.cancel();},
</script>

http://www.ppmy.cn/embedded/53870.html

相关文章

基于Python+Flask+MySQL+HTML的B站数据可视化分析系统

FlaskMySQLVue 基于PythonFlaskMySQLHTML的B站数据可视化分析系统 项目采用前后端分离技术&#xff0c;项目包含完整的前端HTML&#xff0c;以及Flask构成完整的前后端分离系统 爬虫文件基于selenium&#xff0c;需要配合登录账号 简介 主页 登录页面&#xff0c;用户打开浏…

Kubernetes面试整理-不同CNI插件的作用和区别

容器网络接口(Container Network Interface,CNI)插件在 Kubernetes 中负责管理 Pod 的网络连接。CNI 插件提供了 Pod 之间以及 Pod 与外部世界之间的网络通信能力。以下是一些常见的 CNI 插件及其作用和区别: 1. Flannel 作用: ● Flannel 是一种简单的网络层实现,专注于…

C# 初始化的代码是放在Form的构造函数还是放在Form_Load

构造函数Form_Load事件以下是一个简单的例子来说明两者的使用总的来说 在 C#中使用 Windows Forms应用程序开发时&#xff0c;初始化代码通常可以放在两个地方&#xff1a; Form的构造函数或 Form的 Load事件。 构造函数 当你创建一个Form对象时&#xff0c;构造函数会被…

人力资源招聘社会校企类型招聘系统校园招聘小程序

校企社会人力资源招聘小程序&#xff1a;开启高效招聘新时代 &#x1f680;开篇&#xff1a;打破传统&#xff0c;开启招聘新篇章 在快速发展的现代社会&#xff0c;人力资源招聘已经成为企业和学校共同关注的重要议题。为了更高效、便捷地满足双方的招聘需求&#xff0c;一款…

【ai】tx2 nx:ubuntu18.04 yolov4-triton-tensorrt 成功部署server 运行

isarsoft / yolov4-triton-tensorrt运行发现插件未注册? 【ai】tx2 nx: jetson Triton Inference Server 部署YOLOv4 【ai】tx2 nx: jetson Triton Inference Server 运行YOLOv4 对main 进行了重新构建 【ai】tx2 nx :ubuntu查找NvInfer.h 路径及哪个包、查找符号【ai】tx2…

机器学习基础:与Python关系和未来发展

目录 初识Python Python的由来 自由软件运动 编译方式的演进 Python语言的特点 语法简单&#xff0c;易于理解 语法结构清晰&#xff0c;快速上手 丰富的第三方库 机器学习 监督学习 无监督学习 半监督学习 欢迎回到我们的神经网络与深度学习Tensorflow实战学习&am…

第29讲:Ceph集群使用RBD块存储设备与K8S的PV集成

文章目录 1.Ceph集群使用RBD块存储与K8S集成简介2.Ceph集群RBD块存储与K8S PV存储卷集成2.1.创建K8S集群PV使用的块存储2.2.创建K8S集群访问RBD块存储设备的认证用户2.3.将认证用户的Key存储在K8S Secret资源中2.4.在K8S集群的所有节点中安装Ceph命令2.5.创建PV及PVC资源使用RB…

旅游管理系统源码小程序

便捷旅行&#xff0c;尽在掌握 旅游管理系统是一款基于FastAdminElementUNIAPP开发的多端&#xff08;微信小程序、公众号、H5&#xff09;旅游管理系统&#xff0c;拥有丰富的装修组件、多端分享、模板消息、电子合同、旅游攻略、旅游线路及相关保险预订等功能&#xff0c;提…