当前位置: 首页 > news >正文

vue使用Web Speech API实现语音播报

SpeechSynthesisUtterance对象用于表示要播放的语音内容,SpeechSynthesis对象则用于控制语音的播放、暂停、停止等操作。

const synth = window.speechSynthesis
const msg = new SpeechSynthesisUtterance()
// 语音播放
const playVoice = (text) => {synth.cancel()msg.text = textmsg.lang = "zh-CN"msg.volume = 1msg.rate = 1msg.pitch = 1msg.onend = () => {// 语音播放结束调用的方法,可以在里面写一些逻辑}synth.speak(msg)
}
// 停止播放
const stopVoice = (e) => {msg.text = emsg.lang = "zh-CN"synth.cancel(msg)
}

问题点:

       不兼容chrome。

解决方法:

       先调用下window.speechSynthesis.cancel()方法。

参考文献:

webspeech api - speechSynthesis.speak not working in chrome - Stack Overflow

javascript - SpeechSynthesis - Onend 在语音结束前触发 - IT工具网

        

相关文章:

vue使用Web Speech API实现语音播报

SpeechSynthesisUtterance对象用于表示要播放的语音内容,SpeechSynthesis对象则用于控制语音的播放、暂停、停止等操作。 const synth window.speechSynthesis const msg new SpeechSynthesisUtterance() // 语音播放 const playVoice (text) > {synth.canc…...

MVC5_Day1(Razor视图引擎)

MVC提供了两种不同的视图引擎&#xff1a;Razor视图引擎、Web Forms视图引擎。 1.代码表达式 1.1 转换字符&#xff1a;核心转换字符&#xff0c;用作标记<>代码之间相互转换的字符。 1.2 两种基本转换&#xff1a;代码表达式、代码块。都是求出值&#xff0c;再写入响…...

超全整理,Jmeter性能测试-脚本error报错排查/分布式压测(详全)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能脚本error报错…...

vscode开启emmet语法

需要在setting.json中添加配置 首先进入设置&#xff0c;然后点击右上角 Vue项目添加如下配置 "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" },React项目添加如下配置 "emmet.includeLanguages&quo…...

07、vue : 无法加载文件 C:\Users\JH\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

目录 问题解决&#xff1a; 问题 vue : 无法加载文件 C:\Users\JH\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。 在使用 VSCode 时&#xff0c;创建 Vue 项目报的错 创建不了 Vue 项目 解决&#xff1a; 因为在此系统上禁止运行该脚本&#xff0…...

利用移动互联、物联网、智能算法、地理信息系统、大数据分析等信息技术开发的智慧工地云平台源码

智慧工地是指利用移动互联、物联网、智能算法、地理信息系统、大数据挖掘分析等信息技术&#xff0c;提高项目现场的“人•机•料•法•环•安”等施工要素信息化管理水平&#xff0c;实现工程施工可视化智能管理&#xff0c;并逐步实现绿色生态建造。 技术架构&#xff1a;微…...

海康多相机同步取流保存图片

话不多说&#xff0c;直接上代码。代码里包含了多窗口显示图像和保存图片。 #"rtsp://admin:123456qq192.168.10.192/stream1" # rtsp://admin:Admin123192.168.100.103:554/Streaming/Channels/101 #rtsp://admin:Admin123192.168.100.103:554/cam/realmonitor?ch…...

win10 + vs2017 + cmake3.17编译OSG-3.4.1

参考教程&#xff1a;https://blog.csdn.net/bailang_zhizun/article/details/120992244 1. 下载与解压 2. 修改configure 1&#xff09;Ungrouped Entries -- 》ACTUAL_3RDPARTY_DIR: 设置为&#xff1a; D:/Depend_3rd_party/OSG341/3rdParty 2&#xff09; Ungrouped E…...

Excel VBA开发基本语句说明

前言 VBA&#xff08;Visual Basic for Applications&#xff09;是一种用于编写宏的编程语言&#xff0c;它广泛应用于Microsoft Office套件中的各种应用程序&#xff0c;如Excel、Word、Access和PowerPoint等。在这些应用程序中&#xff0c;VBA可用于自动化任务、定制功能、…...

应用在智能空调中的数字温度传感芯片

智能空调是具有自动调节功能的空调。智能空调系统能根据外界气候条件&#xff0c;按照预先设定的指标对温度、湿度、空气清洁度传感器所传来的信号进行分析、判断、及时自动打开制冷、加热、去湿及空气净化等功能的空调。适合放在卧室&#xff0c;客厅等地方。 在中央控制系统…...

Qt界面美化之Qt Style Sheets

Qt style sheet 简称QSS style sheet可以在代码中单独对某个控件使用&#xff0c;例如&#xff1a; labelLEDLIN new QLabel("",this); labelLEDLIN->setFixedSize(36,36); labelLEDLIN->setStyleSheet("background-color:red;border-radius:18px;colo…...

prometheus监控告警部署(k8s内部)

一、部署prometheus 先来说明一下需要用到的组件&#xff0c;需要使用pv、pvc存放prometheus的数据,使用pvc存放数据即使pod挂了删除重建也不会丢失数据&#xff0c;使用configmap挂载prometheus的配置文件和告警规则文件&#xff0c;使用service开放对外访问prometheus服务的端…...

数字孪生特高压电网三维可视化平台实现能源智能管理

电力是现代社会不可或缺的基础能源&#xff0c;而有效管理电力资源对于实现可持续发展至关重要。近年来&#xff0c;随着物联网、大数据、人工智能等技术的快速发展&#xff0c;电网领域的数字化转型已经成为一种趋势。而其中关键的一环便是电网三维数字孪生技术&#xff0c;它…...

12.JavaScript(WebAPI) - JS api文献精解

文章目录 1.WebAPI 背景知识1.1什么是 WebAPI1.2什么是 API1.3API 参考文档 2.DOM 基本概念2.1什么是 DOM2.2DOM 树 3.获取元素3.1querySelector3.2querySelectorAll 4.事件初识4.1基本概念4.2事件三要素4.3简单示例 5.操作元素5.1获取/修改元素内容5.1.1innerText5.1.2innerHT…...

亚马逊云科技:让生成式AI真正走向普惠

伴随着ChatGPT的横空出世&#xff0c;生成式AI&#xff08;Artificial Intelligence Generated Content&#xff0c;也称AIGC&#xff09;大潮也以锐不可当之势席卷全球。从各行各业的商业领袖&#xff0c;到千千万万的程序员和开发者&#xff0c;都在思考如何借助生成式AI技术…...

Java web(四):JSP

文章目录 一、JSP1.1 概述1.2 JSP入门1.3 JSP脚本1.4 缺点 二、EI表达式三、JSTL3.1 标签3.2 JSTL使用3.3 代码演示 四、MVC模式和三层架构五、项目实战【完成增删改查】 一、JSP 1.1 概述 JSP&#xff08;全称&#xff1a;Java Server Pages&#xff09;&#xff1a;Java 服…...

HarmonyOS(二)—— 初识ArkTS开发语言(中)之ArkTS的由来和演进

前言 在上一篇文章HarmonyOS&#xff08;二&#xff09;—— 初识ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门&#xff0c;我初识了TypeScript相关知识点&#xff0c;也知道ArkTS是华为基于TypeScript发展演化而来。 从最初的基础的逻辑交互能力&#xff0c;到…...

电子产品上架Temu平台需要做什么认证?UL测试报告

2022年8月17日报道&#xff0c;TEMU正在筹备跨境电商平台。9月1日&#xff0c;TEMU跨境电商平台正式在海外上线&#xff0c;首站将面向北美市场&#xff0c;该平台命名为TEMU&#xff0c;App Store应用详情页显示意为“Team Up&#xff0c;Price Down”&#xff0c;即买得人越多…...

热点报告 | 健身人群抵抗入冬肥,Dirtyfit引领23秋冬潮流?

您是否曾有以下困惑&#xff1f;打开小红书首页推荐&#xff0c;似乎已经被算法教育成了成熟的信息茧房&#xff0c;想要找到下一个热点&#xff0c;又忧虑一叶以障目&#xff1b;看着搜索框热词&#xff0c;又担心无法掌握热词背后的话题命脉&#xff0c;难以在浮光掠影中寻找…...

C++变参模板的使用

C17 1. 使用编译器if常量表达式 template<typename T, typename U, typename... Ts> void syszuxPrint(T arg1, Ts... arg_left) {std::cout << arg1 << ", ";if constexpr (sizeof...(arg_left) > 0){syszuxPrint(arg_left...);} } 但是这…...

FastAPI状态管理:FastAPI 全局状态管理的 3 种最佳实践

更多内容请见: 《Python Web项目集锦》 - 专栏介绍和目录 在构建生产级FastAPI应用时,全局状态管理是确保资源高效利用和系统稳定性的关键。不当的状态管理可能导致资源泄漏、线程安全问题和不可预测的行为。本文将深入分析FastAPI中实现全局状态的三种最佳实践,揭示其底层机…...

Python爬虫赋能丹青识画:自动化构建艺术图像数据集

Python爬虫赋能丹青识画&#xff1a;自动化构建艺术图像数据集 每次看到那些能精准识别画作风格、作者甚至创作年代的AI应用&#xff0c;你是不是也好奇它们是怎么“学”出来的&#xff1f;答案很简单&#xff1a;喂给它海量的、高质量的“教材”——也就是艺术图像数据集。但…...

实测!用DeepSeek R1和通义千问Max分别写代码、解数学题,结果有点意外

DeepSeek R1与通义千问Max实战对比&#xff1a;当代码遇上数学题 上周我在开发一个需要同时处理算法优化和复杂数学计算的个人项目时&#xff0c;突然萌生了一个想法&#xff1a;为什么不把市面上最火的两个AI编程助手——DeepSeek R1和通义千问Max拉出来比一比&#xff1f;作…...

Face3D.ai Pro多场景落地:VR会议、元宇宙社交、AI主播协同方案

Face3D.ai Pro多场景落地&#xff1a;VR会议、元宇宙社交、AI主播协同方案 1. 引言&#xff1a;从2D照片到3D数字人的技术突破 想象一下&#xff0c;你只需要上传一张普通的自拍照&#xff0c;就能瞬间获得一个精细的3D数字人形象。这个数字人不仅外形逼真&#xff0c;还能在…...

保姆级避坑指南:在Ubuntu 20.04上搞定Carla 0.9.15与ROS Noetic的联合仿真环境

保姆级避坑指南&#xff1a;Ubuntu 20.04下Carla 0.9.15与ROS Noetic联合仿真环境搭建全攻略 搭建自动驾驶仿真环境就像在雷区跳舞——稍有不慎就会触发依赖冲突、版本不兼容或环境变量错误。本文将带你用最短时间穿越这片雷区&#xff0c;特别针对那些官方文档没写、论坛讨论含…...

工业质检新革命:无需标注数据,用ChatGPT式对话完成目标定位

工业质检新革命&#xff1a;无需标注数据&#xff0c;用ChatGPT式对话完成目标定位 1. 传统工业质检的痛点与挑战 在制造业的质检环节中&#xff0c;目标定位一直是个技术难题。传统方法通常需要&#xff1a; 大量标注数据训练专用模型针对每种产品定制算法频繁调整参数适应…...

OFA模型处理C语言文件读写操作生成的流程图描述

OFA模型处理C语言文件读写操作生成的流程图描述 最近在整理编程教学资料时&#xff0c;我遇到了一个挺有意思的需求&#xff1a;手头有一堆描述C语言文件读写操作的流程图&#xff0c;需要为每一张图配上清晰、准确的文字说明。这活儿听起来简单&#xff0c;做起来却挺费神&am…...

Windows下OpenClaw安装详解:GLM-4.7-Flash模型联调全流程

Windows下OpenClaw安装详解&#xff1a;GLM-4.7-Flash模型联调全流程 1. 为什么选择OpenClawGLM-4.7-Flash组合 去年我在处理个人知识管理时&#xff0c;发现每天要重复执行大量机械操作&#xff1a;整理网页摘录、归类PDF文档、生成日报摘要。尝试过各种自动化工具后&#x…...

Transformer解码器实战:用PyTorch手写Masked Self-Attention(附避坑指南)

Transformer解码器实战&#xff1a;用PyTorch手写Masked Self-Attention&#xff08;附避坑指南&#xff09; 1. 为什么需要Masked Self-Attention 在文本生成任务中&#xff0c;模型需要遵循自回归特性——即生成当前词时只能依赖已生成的词。想象你正在玩文字接龙游戏&#x…...

终极指南:LitmusChaos从混沌测试到智能韧性工程的完整演进路径

终极指南&#xff1a;LitmusChaos从混沌测试到智能韧性工程的完整演进路径 【免费下载链接】litmus 一个用于Kubernetes的云原生Chaos Engineering框架&#xff0c;用于测试系统的健壮性和弹性。 - 功能&#xff1a;Chaos Engineering&#xff1b;系统测试&#xff1b;Kubernet…...