Vue文字转语音实现

在开发流程中,面对语音支持的需求,小规模语音内容或许可以通过预处理后播放来轻松应对,但当涉及大量语音时,这一方法就显得繁琐低效了。为此,智慧的开发者们总能找到便捷的解决方案——利用Web技术实现语音播放,既高效又省力。那么该怎么实现呢,请跟随我的脚步看看吧。

一、安装

借助 speak-tts插件,实现语音播放。

二、使用

  1. 在需要使用的地方引入speak-tts
  2. 初始化speak-tts
  3. 调用speak()方法将文字转语音并输出
// 第一步
import Speech from "speak-tts";//第二步 我是全局注册的speechInit() {window.speech = new Speech();speech.setLanguage("zh-CN");speech.setPitch(1.5);speech.init().then(() => {});},// 第三步 播放方法playVoice(text) {speech.speak({text: text,listeners: {//开始播放onstart: () => {console.log("播放开始");},//判断播放是否完毕onend: () => {console.log("播放结束");},//恢复播放onresume: () => {},},}).then(() => {// console.log("读取成功");});},

 三、注意事项

  • 如果需要取消播放,可调用 speech.cancel()
  • setLanguage()可设置语言类型,输入文本需与之对应【中文 有 zh-CN、zh-TW、zh-HK ,自行按需设置】
  • 想过更改音色,但没成功,望成功的伙伴们告知一声。

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

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

相关文章

AD软件如何快速切换三维视图,由2D切换至3D,以及如何恢复

在Altium Designer软件中,切换三维视图以及恢复二维视图的操作相对简单。以下是具体的步骤: 切换三维视图 在PCB设计界面中,2D切换3D,快捷键按住数字键盘中的“3”即可切换; 快捷键ctrlf(或者vb快捷键也…

人工智能-卷积神经网络(学习向)

一.概述; 卷积神经网络(Convolutional Neural Network, CNN)是一种专门用于处理具有类似网格结构的数据(如图像)的深度学习模型。 主要用于处理机器视觉任务。 主要功能; 1.图像分类 2.目标检测 3.图像分割…

ABE 中的隐藏属性:DIPPE(去中心化内积谓词加密)

1. 引言 相关论文有: Yan Michalevsky 和 Marc Joye 2018年论文 Decentralized policy-hiding ABE with receiver privacy,发表于23rd European Symposium on Research in Computer Security, ESORICS 2018。Amit Sahai 和 Brent Waters 2005年论文 Fu…

深入了解阿里云 OSS:强大的云存储解决方案

在现代互联网应用中,数据存储是一个不可忽视的环节。随着数据量的不断增长,传统的存储方式已经无法满足高速、低成本、大容量的需求。阿里云 OSS(对象存储服务)作为一种高性能、低成本且具备高度扩展性的云存储服务,已…

vue和react的diff算法区别?

Vue和React都使用了虚拟DOM和diff算法来优化渲染性能。但是它们在diff算法的实现上有一些区别。 Vue的patch过程: Vue的diff算法是基于snabbdom修改而来,但Vue进行了优化,例如使用了一个队列来批处理节点的更新,并对不同类型的节…

书生浦语·第四期作业合集

目录 1. Linux基础知识 1.1-Linux基础知识 1.在终端通过ssh 端口映射连接开发机 2. 创建helloworld.py 3.安装相关包并运行 4.端口映射并访问相关网页

小程序-基于java+SpringBoot+Vue的校园快递平台系统设计与实现

项目运行 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

【智商检测——DP】

题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e510, M 110; int f[N][M]; int main() {int n, k;cin >> n >> k;for(int i 1; i < n; i){int x;cin >> x;f[i][0] __gcd(f[i-1][0], x);for(int j 1; j < min(i, k)…

鸿蒙面试 --- 1202 下

1、什么是层叠布局&#xff1f; 层叠布局&#xff08;StackLayout&#xff09;用于在屏幕上预留一块区域来显示组件中的元素&#xff0c;提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠&#xff0c;容器中的子元素依次入栈&#xff0c;后一个子元…

MYSQL 什么是内连接 外连接 左连接 右连接?及适用场景

在 SQL 中&#xff0c;连接&#xff08;JOIN&#xff09;是用于组合来自两个或更多表的行的一种方法。根据连接的方式不同&#xff0c;可以分为几种类型的连接&#xff1a;内连接&#xff08;INNER JOIN&#xff09;、外连接&#xff08;OUTER JOIN&#xff09;、左连接&#x…

CTF-PWN: 全保护下格式化字符串利用 [第一届“吾杯”网络安全技能大赛 如果能重来] 赛后学习(没思路了)

通过网盘分享的文件&#xff1a;如果能重来.zip 链接: https://pan.baidu.com/s/1XKIJx32nWVcSpKiWFQGpYA?pwd1111 提取码: 1111 --来自百度网盘超级会员v2的分享漏洞分析 格式化字符串漏洞,在printf(format); __int64 sub_13D7() {char format[56]; // [rsp10h] [rbp-40h]…

速盾:高防cdn支持自定义缓存KEY前缀吗?

速盾是一家专业的高防CDN&#xff08;Content Delivery Network&#xff09;服务提供商&#xff0c;为客户提供安全可靠的内容分发服务。在讨论高防CDN支持自定义缓存KEY前缀之前&#xff0c;我们先来了解一下CDN和缓存的概念。 CDN是一种通过将内容分布到全球多个节点上&…

使用flex布局实现一行固定展示n个元素

前言&#xff1a; 最近在公司中完成小程序的UI设计稿时&#xff0c;遇到了布局一个问题&#xff1a;UI设计稿想实现的布局是这样的&#xff1a; 笔者第一反应就是使用flex中的justify-content: space-between;属性&#xff0c;但是使用之后发现&#xff0c;justify-content: …

node.js基础学习-querystring模块-查询字符串处理(三)

一、前言 querystring是 Node.js 中的一个内置模块&#xff0c;主要用于处理 URL 查询字符串。它提供了一些实用的方法来解析和格式化查询字符串&#xff0c;使得在处理 HTTP 请求中的查询参数等场景时非常方便。 还可以防止sql注入 二、解析查询字符串&#xff08;parse方法&a…

AntFlow 0.20.0版发布,增加多数据源多租户支持,进一步助力企业信息化,SAAS化

传统老牌工作流引擎比如activiti,flowable或者camunda等虽然功能强大&#xff0c;也被企业广泛采用&#xff0c;然后也存着在诸如学习曲线陡峭&#xff0c;上手难度大&#xff0c;流程设计操作需要专业人员&#xff0c;普通人无从下手等问题。。。引入工作流引擎往往需要企业储…

IDL学习笔记(一)数据类型、基础运算、控制语句

近期&#xff0c;需要用到modis数据批量预处理&#xff0c;于是重新学习idl,感谢郭师兄推荐&#xff0c;以及张洋老师的详细教导。特以此为学习笔记&#xff0c;望学有所成。 IDL学习笔记&#xff08;一&#xff09; 数据类型数据类型创建数组类型转换函数代码输出print往文件…

【实体配置】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

vue3 基本使用

Vue 3 提供了多种方式来构建用户界面&#xff0c;包括选项式 API 和 Composition API。下面我将详细介绍 Vue 3 的基本使用和语法&#xff0c;主要集中在选项式 API 上&#xff0c;因为这对于初学者来说更容易上手。 1. 创建 Vue 项目 如果你还没有一个 Vue 项目&#xff0c;…

使用 Pytorch 构建 Vanilla GAN

文章目录 一、说明二、什么是 GAN&#xff1f;三、使用 PyTorch 的简单 GAN&#xff08;完整解释的代码示例&#xff09;3.1 配置变量3.2 、PyTorch 加速3.3 构建生成器3.4 构建鉴别器 四、准备数据集五、初始化函数六、前向和后向传递七、执行训练步骤八、结果 一、说明 使用…

Python酷库之旅-第三方库Pandas(251)

目录 一、用法精讲 1186、pandas.tseries.offsets.BusinessMonthEnd.is_year_start方法 1186-1、语法 1186-2、参数 1186-3、功能 1186-4、返回值 1186-5、说明 1186-6、用法 1186-6-1、数据准备 1186-6-2、代码示例 1186-6-3、结果输出 1187、pandas.tseries.offs…