Vue语音播报,不用安装任何包和插件,直接调用。


Vue语音播报功能可以通过使用浏览器提供的Web Speech API来实现。这个API允许你的应用程序通过浏览器朗读文本,不用安装任何包和插件,直接调用。以下是一个简单的介绍,演示如何在Vue中使用语音提示功能:

一、JS版本

<template><el-button type="success" @click="playVoice">Web Speech API</el-button>
</template>
<script>
const synth = window.speechSynthesis // 启用文本
const msg = new SpeechSynthesisUtterance()
export default {data() {return {}},methods: {playVoice() {this.handleSpeak('测试111111111') // 传入需要播放的文字},// 语音播报的函数handleSpeak(text) {msg.text = text // 内容msg.lang = 'zh-CN' // 使用的语言:中文msg.volume = 1 // 声音音量:1msg.rate = 1 // 语速:1msg.pitch = 1 // 音高:1synth.speak(msg) // 播放},// 语音停止handleStop(e) {msg.text = emsg.lang = 'zh-CN'synth.cancel(msg) // 取消该次语音播放}}
}
</script>

二、TS版本

运用TS封装形式来实现语音播报功能。
创建一个VoiceAnnouncements.ts的文件,然后在应用的Vue页面进行引入该ts文件并使用。

class VoiceAnnouncements {public synth = window.speechSynthesis // 启用文本public msg: any = new SpeechSynthesisUtterance()public language: string = 'zh-CN'  // 使用的语言:中文public volume: number = 1 // 音量public speed: number = 1  // 语速public pitch: number = 1 // 音高// 开始语音提示startVoiceFunction = (content: String) => {this.msg.text = contentthis.msg.language = this.language this.msg.volume = this.volume this.msg.speed = this.speedthis.msg.pitch = this.pitchthis.synth.speak(this.msg) }// 停止语音提示stopVoiceFunction = (content: any) => {this.msg.text = contentthis.msg. language = this. languagethis.synth.cancel(this.msg) }}//传出实例,保证整个系统只存在单例的Voice
const VoiceAnnouncementsInstance = new VoiceAnnouncements()export default VoiceAnnouncementsInstance

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/187244.shtml

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

相关文章

XTU OJ 1339 Interprime 学习笔记

链接 传送门 代码 #include<bits/stdc.h> using namespace std;const int N1e610; //78498 我计算了一下&#xff0c;6个0的范围内有这么多个素数&#xff0c;所以开这么大的数组存素数 //计算的代码是一个循环 int prime[80000]; int a[N],s[N];//s数组是前缀和数组b…

高等数学上岸宝典笔记

①不单调的函数也可能有反函数 ②注意反函数与函数转换时的定义域与值域 ③收敛数列不一定有最值 收敛数列必有上界和下界&#xff0c;但不一定有最值&#xff0c;比如{An}1/n&#xff0c;下界为0&#xff0c;但永远取不到0 ④数列与其子数列的关系 例题&#xff1a; ⑤带根号…

Linux常用命令——cd命令

文章目录 1. 简介2. 命令参数3. 常见用法与实例3.1 基本用法3.2 使用绝对路径或相对路径3.3 使用特殊字符3.4 使用参数 4. 总结 1. 简介 cd命令是Linux系统中最基础且频繁使用的命令之一&#xff0c;用于改变当前工作目录。它是“change directory”的缩写&#xff0c;对于任何…

网狐类源码游戏配置数据库数据(一键配置网狐数据库)

网狐类源码游戏配置数据库数据&#xff08;一键配置网狐数据库&#xff09; 一般拿到网狐的源码或组件&#xff0c;需要先附加或配置数据库&#xff0c;以下为全部需要更改数据的地方&#xff0c;这里以荣耀系列版本数据库为例&#xff1a; 1. 数据库设置 [RYPlatformDB].…

Redis7--基础篇5(管道、发布订阅)

管道是什么 管道(pipeline)可以一次性发送多条命令给服务端&#xff0c;服务端依次处理完完毕后&#xff0c;通过一条响应一次性将结果返回&#xff0c;通过减少客户端与redis的通信次数来实现降低往返延时时间。pipeline实现的原理是队列&#xff0c;先进先出特性就保证数据的…

【驱动】SPI驱动分析(二)-SPI驱动框架

SPI驱动框架 SPI驱动属于总线-设备-驱动模型的&#xff0c;与I2C总线设备驱动模型相比&#xff0c;大体框架是一样&#xff0c;他们都是实际的总线。总体框架如下图所示&#xff1a; 从上到下&#xff0c;分为三层&#xff0c;用户空间&#xff0c;内核空间&#xff0c;和硬件…

【驱动】串口驱动分析(一)-软件架构

区分不同的终端类型 串行端口终端&#xff08;/dev/ttySn&#xff09; 串行端口终端&#xff08;Serial Port Terminal&#xff09;是使用计算机串行端口连接的终端设备。计算机把每个串行端口都看作是一个字符设备。 有段时间这些串行端口设备通常被称为终端设备&#xff0…

vue项目下npm或yarn下安装echarts多个版本

最近在大屏展示的时候&#xff0c;用到了百度的echarts图表库&#xff0c;看完效果图后&#xff0c;又浏览了一下echarts官网案例&#xff0c;大同小异。但是搬砖过程中发现实际效果和demo相差甚远&#xff0c;一番折腾发现&#xff0c;项目中安装的是echarts4.x版本&#xff0…

二进制求和

这篇文章会收录到 : 算法通关村第十三关-白银挑战数字与数学高频问题-CSDN博客 二进制求和 描述 : 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 题目 : LeetCode 67.二进制求和 : 67. 二进制求和 分析 : 这个题也是用字符串来表示数据的…

深入理解Zookeeper系列-1.初识Zoookeeper

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理&#x1f525;如果感觉博主的文章还不错的话&#xff…

设计模式-创建型模式之原型、建造者设计模式

文章目录 七、原型模式八、建造者模式 七、原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能。它提供了一种创建对象的最佳方式。 这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当直…

Python实现FA萤火虫优化算法优化循环神经网络回归模型(LSTM回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

[操作系统] 文件管理

文章目录 5.1 磁盘调度算法1. 先来先服务算法( First Come First Served, FCFS) 算法2. 最短寻道时间优先算法( Shortest Seek Time First, SSTF) 算法3. 扫描算法( SCAN ) 算法4. 循环扫描算法( Circular Scan, CSCAN ) 算法5. LOOK 与 CLOOK 算法 5.2 进程写文件时&#xff0…

禁奥义·SQL秘籍

sql secret scripts sql 语法顺序、执行顺序、执行过程、要点解析、优化技巧。 1、语法顺序 如上图所示&#xff0c;为 sql 语法顺序与执行顺序对照图。其具体含义如下&#xff1a; 0、select&#xff1a; 用于从数据库中选取数据&#xff0c;即表示从数据库中查询到的数据的…

[架构之路-255]:目标系统 - 设计方法 - 软件工程 - 软件设计 - 架构设计 - 软件架构风格

目录 前言&#xff1a; 一、建筑风格 1.1 什么是建筑风格 1.2 常见的建筑风格 1.3 如何区分不同的建筑风格 二、软件架构风格概述 2.1 什么是软件架构风格 2.2 如何区分不同的软件架构风格 2.3 软件架构风格的发展阶段 2.4 软件架构风格与软件架构的区别 2.5 常见的…

数字图像处理(实践篇)十五 基于傅里叶变换的高通滤波和低通滤波

目录 一 Numpy 实现傅里叶变换 1 涉及的函数 2 实践 二 OpenCV 实现傅里叶变换 1 涉及的函数 2 实践 为了有效地和快速地对图像进行处理和分析&#xff0c;常常需要将原定义在图像空间的图像以某种形式转换&#xff08;正变换&#xff09;到另外一些空间&#xff0c;并利…

使用gparted进行ubuntu虚拟机的磁盘扩容(解决gparted无法拖动分区的问题)

在学习内核编译下载linux内核源码的时候&#xff0c;由于源码非常大&#xff0c;下载的时候提示磁盘空间不足&#xff0c;我才意识到刚开始创建虚拟机的时候分配了20GB的空间现在已经快用光了。在VM的设置里可以进行扩容&#xff0c;我扩展到了30GB重启却发现空间并没有加到我使…

数据库应用:MongoDB 文档与索引管理

目录 一、理论 1.MongoDB文档管理 2.MongoDB索引管理 二、实验 1.MongoDB文档管理 2.MongoDB索引管理&#xff08;索引添加与删除&#xff09; 3.MongoDB索引管理&#xff08;全文索引&#xff09; 4.MongoDB索引管理&#xff08;多列索引&#xff09; 5.MongoDB索引管…

虚拟数字人有什么用?有哪些应用场景?

​​过去三年&#xff0c;元宇宙概念进入到大众视野&#xff0c;虚拟数字人备受关注。抖音达人柳夜熙、洛天依、网红虚拟偶像AYAYI等&#xff0c;随着元宇宙的流行&#xff0c;数字人也逐渐成为一种趋势。据行业预测&#xff0c;到2030年&#xff0c;中国的数字人总市场规模将达…

APITable免费开源的多维表格与可视化数据库本地部署公网远程访问

APITable免费开源的多维表格与可视化数据库公网远程访问 文章目录 APITable免费开源的多维表格与可视化数据库公网远程访问前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c…