speakTTS文字转语音播放功能

场景:
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.mzph.cn/pingmian/36283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java AWT基础—创建一个简单的应用程序

目录 背景&#xff1a; 代码展示: 代码详解: AWT和Swing的区别: 总结: 背景&#xff1a; 在Java中&#xff0c;AWT(Abstract Windows Toolkit)是最早的图形月用户界面(GUI1)工具包&#xff0c;虽然随着Swing的出现&#xff0c;AWT的使用有所减少&#xff0c;但了解AWT基…

百元蓝牙耳机哪款性价比高?盘点性价比高的百元蓝牙耳机品牌

在如今快节奏的生活中&#xff0c;蓝牙耳机已经成为人们日常生活中不可或缺的配件。然而&#xff0c;市面上百元左右性价比高的蓝牙耳机琳琅满目&#xff0c;消费者往往难以选择到一款质量好、耐用的产品。我们希望可以为广大消费者提供一些参考和建议&#xff0c;接下来&#…

基于51单片机电子称—串口显示

基于51单片机电子称设计 &#xff08;仿真&#xff0b;程序&#xff09; 功能介绍 具体功能&#xff1a; 1.矩阵键盘组成按键&#xff0c;输入价格结算、打印&#xff1b; 2.用滑动变阻器和ADC0832模拟称重&#xff1b; 3.LCD1602可以显示重量、单价和总价&#xff1b; 4.…

spring03-aop

spring aop: 只能增强方法&#xff0c;&#xff0c;spring aop 底层是动态代理&#xff0c;&#xff0c;&#xff0c;动态代理的本质是生成一个子类&#xff0c;&#xff0c;重写这个方法&#xff0c;进行增强&#xff0c;&#xff0c;所以final修饰的类和方法&#xff0c;&…

0121__线程 thread_once

线程 thread_once_thraed once-CSDN博客

QCOM 平台增加分区流程 及 注意事项

本文以qcom msm8909 为例增加carrier分区&#xff0c;留文以备后忘&#xff1a; 1、修改分区表partition.xml diff --git a/non_hlos/common/config/emmc/partition.xml b/non_hlos/common/config/emmc/partition.xml index 74ca036..11f38bc 100755 --- a/non_hlos/common/con…

家用洗地机十大品牌什么牌子好用?2024十大爆款洗地机分享

在快节奏的生活中&#xff0c;清洁家居成为了一项繁琐却必不可少的任务。而洗地机的出现&#xff0c;无疑给忙碌的都市人带来了福音。选择一款优质的洗地机可以大大提升我们清洁的效率&#xff0c;改善我们的生活品质。那么&#xff0c;哪家洗地机清洁力最强&#xff0c;更适合…

ONLYOFFICE 桌面编辑器 8.1 版发布:全面提升文档处理效率的新体验

文章目录 什么是ONLYOFFICE &#xff1f;ONLYOFFICE 桌面编辑器 8.1 发布&#xff1a;新功能和改进功能强大的 PDF 编辑器幻灯片版式功能从右至左语言支持多媒体功能增强无缝切换工作模式其他改进和优化总结 什么是ONLYOFFICE &#xff1f; https://www.onlyoffice.com/zh/off…

JavaScript的学习之图片的切换

目录 一、寻找素材 二、编写简单的静态html页面 代码示例 效果展示 三、JS功能的实现 JS代码 完整代码 效果展示 一、寻找素材 随便去网上找几张图片素材 二、编写简单的静态html页面 代码示例 <!doctype html> <html><head><meta charset"…

svn明明都在环境变量中添加了,但还是无法在cmd中生效

svn明明都在环境变量中添加了&#xff0c;但还是无法在cmd中生效 cmd显示原因问题解决 cmd显示 svn不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件 原因 安装svn一直点下一步下一步…&#xff0c;没有勾选command line client。 问题解决 1.按下winx&…

Linux CMakeLists编写之静态库

目录 1 概述2 文件命名3 实例4 代码分析 1 概述 编译工具有很多(make/cmake/BJam)。cmake是跨平台&#xff0c;使用cmake编译需要编写CMakeLists.txt。本文编写CMakeLists.txt来生成C静态库。 2 文件命名 文件命名为CMakeLists.txt,是一个文本文件,可以使用任何编辑器编辑。 …

如何加密电脑文件?电脑重要文件怎么加密?

在电脑中&#xff0c;我们会存储很多重要文件&#xff0c;包括个人隐私视频、照片&#xff0c;企业机密数据&#xff0c;工作数据等。为了避免重要文件泄露&#xff0c;我们需要加密保护电脑文件。下面我们就来了解一下电脑文件怎么加密&#xff1f; 超级加密3000 当需要加密电…

[其他]MBTI各个字母分表代表什么

一、什么是MBTI&#xff1f; MBTI&#xff08;Myers-Briggs Type Indicator&#xff09;&#xff0c;一种迫选型、自我报告式的性格评估测试&#xff0c;用以衡量和描述人们在获取信息、作出决策、对待生活等方面的心理活动规律和性格类型。 二、MBTI各字母含义 MBTI倾向显示…

赶紧收藏!2024 年最常见的操作系统面试题(六)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见的操作系统面试题&#xff08;五&#xff09;-CSDN博客 十一、什么是I/O操作&#xff1f;请解释缓冲I/O和直接I/O的区别。 I/O操作&#xff0c;即输入/输出操作&#xff0c;是计算机科学中指数据在计算机系统内部和外…

Python语法基础三

12.range()函数 python 的 range() 函数可用来创建一个整数列表&#xff0c;一般用在 for 循环中. **range()语法&#xff1a;**range(start, stop[, step])**start&#xff1a;**计数从start开始,默认是从0开始(闭区间),如:range(5)等价于range(0,5).**stop&#xff1a;**计…

vue 实现 word/excel/ppt/pdf 等文件格式预览操作

效果图&#xff1a; 问题描述&#xff1a;一般情况下使用iframe标签就可以实现文件预览&#xff0c;但是这个标签只针对于ppt和pdf是有效的。对于doc文件就需要借助第三方插件&#xff08;vue-office/docx&#xff09;来实现预览了。下面介绍使用方法。 安装插件&#xff1a;n…

Lua C API

Lua 5.4 Reference Manual - contents官方网站

力扣爆刷第155天之TOP100五连刷41-45(下一个排列、正序数组中位数、归并排序链表)

力扣爆刷第155天之TOP100五连刷41-45&#xff08;下一个排列、正序数组中位数、归并排序链表&#xff09; 文章目录 力扣爆刷第155天之TOP100五连刷41-45&#xff08;下一个排列、正序数组中位数、归并排序链表&#xff09;一、31. 下一个排列二、4. 寻找两个正序数组的中位数三…

量化交易策略:定义及其重要性

量化交易是华尔街和硅谷的秘密结合点&#xff0c;在这里数学和算法与金钱和市场相遇。虽然它曾经是金融巨头的专属领域&#xff0c;但现在它比以往任何时候都更易于接触。 但不要被愚弄&#xff0c;量化交易仍然是一种高速、高压的游戏&#xff0c;在毫秒间可以赚到或失去财富…

FlashST 短期交通预测领域的插件式创新

FlashST: A Simple and Universal Prompt-Tuning Framework for Traffic Prediction&#xff1a;一篇在短期交通预测领域的插件式创新&#xff0c;主要解决不同数据集和任务下的分布漂移问题。 方法&#xff1a;采用二阶段训练的方法&#xff0c;一阶段在PEMS03478数据集上进行…