Vue语音播报功能
使用Web Speech API的SpeechSynthesis接口来实现文本转语音
Web Speech API可能不在所有浏览器中都能完美支持 特别是旧浏览器
在生产环境中,你可能需要添加功能检测和后备方案。
<template><div><textarea v-model="text" placeholder="请输入文本"></textarea><button @click="speak">阅读文本</button><button @click="stop">停止阅读</button><button @click="listen">听我写</button></div>
</template><script>
export default {data() {return {text: '蜂鸟众包来新订单了 请及时接单 ',recognition: null,speech: null};},methods: {speak() {if ('speechSynthesis' in window) {const msg = new SpeechSynthesisUtterance();msg.text = this.text;// 内容msg.lang = 'zh-CN'; // 默认使用的语言:中文msg.volume = 1; // 默认声音音量:1msg.rate = 1; // 默认语速:1msg.pitch = 1; // 默认音高:1window.speechSynthesis.speak(msg)// 播放}else{alert('您的浏览器不支持语音合成');}},stop() {window.speechSynthesis.cancel();// 取消所有正在进行的语音播报},listen() {this.recognition = new webkitSpeechRecognition();this.recognition.onresult = (event) => {const text = event.results[0][0].transcript;this.text = text;};this.recognition.start();}}
};
</script>
speak-tts
npm install speak-tts
<template><div><button @click="speak">读出文本</button></div>
</template><script>
import Speech from 'speak-tts'export default {data () {return {speech:null,text:"语音播报测试 美团众包来新订单了 请及时接单 蜂鸟众包来新订单了 请及时接单",}
},
mounted(){this.speechInit();
},
methods:{speechInit(){this.speech = new Speech();this.speech.setLanguage('zh-CN');this.speech.init().then(()=>{console.log('语音播报初始化完成...')})},//语音播报speak(){this.speech.speak({text:this.text}).then(()=>{console.log("播报完成...")})}
}};
</script>
百度合成API
相关文章:
Vue语音播报功能
使用Web Speech API的SpeechSynthesis接口来实现文本转语音 Web Speech API可能不在所有浏览器中都能完美支持 特别是旧浏览器 在生产环境中,你可能需要添加功能检测和后备方案。<template><div><textarea v-model"text" placeholder&quo…...
【Java设计模式-4】策略模式,消灭if/else迷宫的利器
各位Java编程小伙伴们!今天咱们要一起探索一个超级厉害的Java设计模式——策略模式,它就像是一把神奇的魔法剑,专门用来斩断那些让我们代码变得乱糟糟的if/else语句迷宫! 一、if/else的烦恼 在编程的奇妙世界里,我们…...
citrix netscaler13.1 重写负载均衡响应头(基础版)
在 Citrix NetScaler 13.1 中,Rewrite Actions 用于对负载均衡响应进行修改,包括替换、删除和插入 HTTP 响应头。这些操作可以通过自定义策略来完成,帮助你根据需求调整请求内容。以下是三种常见的操作: 1. Replace (替换响应头)…...
【AI学习】地平线首席架构师苏箐关于自动驾驶的演讲
在地平线智驾科技畅想日上,地平线副总裁兼首席架构师苏箐(前华为智驾负责人)做了即兴演讲,以下是其演讲的主要内容: 对自动驾驶行业的看法 自动驾驶的难度与挑战:苏箐表示自动驾驶非常难,他做自…...
QILSTE H11-D212HRTCG/5M高亮红绿双色LED灯珠 发光二极管LED
型号:H11-D212HRTCG/5M,一款由QILSTE(HongKong)Technology Co., Ltd精心打造的高亮度红绿双色LED产品,其尺寸仅为2.01.251.1 mm,却蕴含着强大的光电特性。这款产品采用透明平面胶体封装,不仅外观…...
2️⃣java基础进阶——多线程、并发与线程池的基本使用
一、概念介绍 什么是线程,什么是进程,两者有什么关系? 进程是操作系统资源分配的独立单位;而线程是操作系统能够进行调度和分派的最小单位;线程包含于进程之中,是进程中的实际运作单位。 例如:…...
RAG多路召回
什么是多路召回? 多路召回(Multi-Route Retrieval) 是指在信息检索系统中,为了提升检索的全面性和准确性,通过多条不同的检索路径或不同的检索策略来获取信息的技术。多路召回的核心思想是,单一的检索路径…...
复杂 C++ 项目堆栈保留以及 eBPF 性能分析
在构建和维护复杂的 C 项目时,性能优化和内存管理是至关重要的。当我们面对性能瓶颈或内存泄露时,可以使用eBPF(Extended Berkeley Packet Filter)和 BCC(BPF Compiler Collection)工具来分析。如我们在Red…...
网安——计算机网络基础
一、计算机网络概述 1、Internet网相关概念及发展 网络(Network)有若干结点(Node)和连接这些结点的链路(link)所组成,在网络中的结点可以是计算机、集线器、交换机或路由器等多个网络还可以通…...
ZCC1923替代BOS1921Piezo Haptic Driver with Digital Front End
FEATURES • High-Voltage Low Power Piezo Driver o Drive 100nF at 190VPP and 250Hz with 490mW o Drives Capacitive Loads up to 1000nF o Energy Recovery o Differential Output o Small Solution Footprint, QFN & WLCSP • Low Quiescent Current: SHUTDOWN; …...
Kutools for Excel 简体中文版 - 官方正版授权
Kutools for Excel 是一款超棒的 Excel 插件,就像给你的 Excel 加了个超能助手。它有 300 多种实用功能,现在还有 AI 帮忙,能把复杂的任务变简单,重复的事儿也能自动搞定,不管是新手还是老手都能用得顺手。有了它&…...
PostgreSQL和MySQL有什么区别?
一、数据存储与管理方面 数据类型支持 PostgreSQL: 提供了非常丰富的数据类型。除了基本的整数、浮点数、字符、日期等类型外,对复杂数据类型的支持很出色。例如,它原生支持数组(Array)类型,可以方便地存储…...
比较之舞,优雅演绎排序算法的智美篇章
大家好,这里是小编的博客频道 小编的博客:就爱学编程 很高兴在CSDN这个大家庭与大家相识,希望能在这里与大家共同进步,共同收获更好的自己!!! 本文目录 引言正文一、冒泡排序:数据海…...
C语言数据结构与算法(排序)详细版
大家好,欢迎来到“干货”小仓库!! 很高兴在CSDN这个大家庭与大家相识,希望能在这里与大家共同进步,共同收获更好的自己!!无人扶我青云志,我自踏雪至山巅!!&am…...
JAVA:利用 RabbitMQ 死信队列实现支付超时场景的技术指南
1、简述 在支付系统中,订单支付的超时自动撤销是一个非常常见的业务场景。通常用户未在规定时间内完成支付,系统会自动取消订单,释放相应的资源。本文将通过利用 RabbitMQ 的 死信队列(Dead Letter Queue, DLQ)来实现…...
pytest+request+yaml+allure搭建低编码调试门槛的接口自动化框架
接口自动化非常简单,大致分为以下几步: 准备入参调用接口拿到2中response,继续组装入参,调用下一个接口重复步骤3校验结果是否符合预期 一个优秀接口自动化框架的特点: 【编码门槛低】,又【能让新手学到…...
Elasticsearch实战指南:从入门到高效使用
Elasticsearch实战指南:从入门到高效使用 1. 引言:Elasticsearch是什么? Elasticsearch是一个分布式、RESTful风格的搜索和分析引擎,广泛应用于全文搜索、日志分析、实时数据分析等场景。它的核心特点包括: 高性能&…...
Open FPV VTX开源之嵌入式OSD配置
Open FPV VTX开源之嵌入式OSD配置 1. 源由2. 安装3. 配置步骤一:备份/etc/telemetry.conf步骤二:修改/etc/telemetry.conf步骤三:配置时区步骤四:重启摄像头 4. 实测5. 参考资料 1. 源由 穿越机模拟图传延迟通常在10ms左右。 最…...
2Hive表类型
2Hive表类型 1 Hive 数据类型2 Hive 内部表3 Hive 外部表4 Hive 分区表5 Hive 分桶表6 Hive 视图 1 Hive 数据类型 Hive的基本数据类型有:TINYINT,SAMLLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBLE&a…...
计算机网络之---公钥基础设施(PKI)
公钥基础设施 公钥基础设施(PKI,Public Key Infrastructure) 是一种用于管理公钥加密的系统架构,它通过结合硬件、软件、策略和标准来确保数字通信的安全性。PKI 提供了必要的框架,用于管理密钥对(包括公钥…...
Electron 14+ 开发必看:WebContentsView 实战指南(含与 BrowserView 对比)
Electron 14 开发实战:WebContentsView 深度解析与性能优化 如果你正在使用 Electron 14 开发跨平台桌面应用,那么 WebContentsView 绝对是你需要重点掌握的核心组件。作为 Electron 团队在 14 版本引入的全新视图系统,WebContentsView 不仅解…...
AI营销SaaS榜单评测:原圈科技如何助力品牌客户破局增长?
本文深度探讨AI营销行业趋势与SaaS产品评选标准。在众多解决方案中,原圈科技的AI营销SaaS平台凭借其领先的技术底层能力、产品成熟度及客户成功案例,在市场适配度与服务落地性等多个维度下表现突出,被普遍视为企业实现精细化营销升级的有力选…...
嵌入式系统电源时序控制原理与实现
1. 电源时序控制基础概念在现代电子系统中,多电压域设计已成为常态。一个典型的嵌入式系统可能同时需要1.2V(核心逻辑)、3.3V(外设接口)和1.5V(特殊功能模块)等多种电压。这些电源的上电顺序对系…...
OpCore-Simplify:一键自动化黑苹果配置,让复杂技术变得简单
OpCore-Simplify:一键自动化黑苹果配置,让复杂技术变得简单 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore-Simplify是…...
ChatBI怎么在BI试点中用?3个低门槛落地场景亲测有效
ChatBI试点的前置门槛:先搞定最小可行数据集,不用全量建设 ChatBI是观远数据推出的自然语言分析产品,用户可以通过口语化的提问直接获取数据结果、可视化图表甚至分析结论,无需掌握复杂的报表制作或SQL查询技能。在BI试点阶段引入…...
BI 项目交付 SOP
...
seo规则中的内容创作有哪些注意事项
SEO规则中的内容创作有哪些注意事项 在当今互联网时代,搜索引擎优化(SEO)已成为网站流量和曝光度提升的关键手段。其中,内容创作是SEO的核心要素之一。仅仅创作大量内容并不能保证网站的高排名和高流量。要想在百度等搜索引擎上取…...
XiaoMusic:让小爱音箱突破音乐限制的开源解决方案
XiaoMusic:让小爱音箱突破音乐限制的开源解决方案 【免费下载链接】xiaomusic 使用小爱音箱播放音乐,音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否遇到过这样的困扰:想听的歌曲在各大…...
NXP S32K3开发日记:PIT0的RTI唤醒功能调试全记录(含时钟源配置误区)
NXP S32K3开发实战:PIT0 RTI唤醒功能深度解析与排错指南 作为一名长期深耕汽车电子领域的嵌入式工程师,最近在基于NXP S32K3系列MCU开发低功耗应用时,遇到了一个颇具挑战性的问题——如何可靠地使用PIT0的RTI(Real Time Interrupt…...
终极Windows 11系统优化指南:使用Win11Debloat让你的电脑飞起来!
终极Windows 11系统优化指南:使用Win11Debloat让你的电脑飞起来! 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other change…...
