前端开发攻略---用原生JS在网页中也能实现文本转语音

1、原理

语音合成 (也被称作是文本转为语音,英语简写是 tts) 包括接收 app 中需要语音合成的文本,再在设备麦克风播放出来这两个过程。

Web API中对此有一个主要控制接口 SpeechSynthesis,外加一些处理如何表示要被合成的文本 (也被称为 utterances),用什么声音来播出 utterances 等工作的相关接口。同样的,许多操作系统都有自己的某种语音合成系统,在这个任务中我们调用可用的 API 来使用语音合成系统。

2、示例

d65ab8eadbc84da4a92319af46ec66d3.png 您可以直接复制下面代码运行在浏览器中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script></head><body><div><input type="text" /><button>开始播放语音</button></div></body><script>const btn = document.querySelector('button')const ipt = document.querySelector('input')function speak({ text, speechRate, lang, volume, pitch }, endEvent, startEvent) {if (!window.SpeechSynthesisUtterance) {console.warn('当前浏览器不支持文字转语音服务')return}if (!text) {return}const speechUtterance = new SpeechSynthesisUtterance()speechUtterance.text = textspeechUtterance.rate = speechRate || 1speechUtterance.lang = lang || 'zh-CN'speechUtterance.volume = volume || 1speechUtterance.pitch = pitch || 1speechUtterance.onstart = function (e) {startEvent && startEvent()}speechUtterance.onend = function (e) {endEvent && endEvent()}speechSynthesis.speak(speechUtterance)return speechUtterance}btn.addEventListener('click', function () {if (!ipt.value) returnspeak({text: ipt.value,},function () {console.log('语音播放结束')},function () {console.log('语音开始播放')})})</script>
</html>

支持的浏览器

  • Firefox 桌面版和移动版。
  • Firefox OS 2.5+。
  • Chrome 桌面版和安卓版。

注意:如果效果演示失败,大概是由于您当前使用的浏览器不支持语音转文字这个API,请更换浏览器后重试!

3、解析speak函数

接受参数

  • text:要转换为语音的文本内容。
  • speechRate:语音播放速率。
  • lang:语音的语言代码。
  • volume:语音的音量。
  • pitch:语音的音调。

1、另外,它还接受两个回调函数作为参数:endEvent 和 startEventendEvent 在语音播放结束时触发,而 startEvent 在语音播放开始时触发。

2、函数首先检查浏览器是否支持语音合成服务,如果不支持则输出警告信息并返回。然后它检查是否传入了要转换的文本内容,如果没有则直接返回。

3、接着,函数创建了一个 SpeechSynthesisUtterance 对象,该对象表示一段要朗读的文本。

4、然后将传入的参数赋值给这个对象的相应属性,如文本内容、语速、语言、音量和音调。

在设置好 SpeechSynthesisUtterance 对象的属性后,

5、函数设置了两个事件处理程序:onstart 和 onendonstart 事件处理程序在语音播放开始时触发 startEvent 回调函数,onend 事件处理程序在语音播放结束时触发 endEvent 回调函数。

6、最后,函数通过 speechSynthesis.speak() 方法来开始语音合成,将 SpeechSynthesisUtterance 对象传递给该方法以开始朗读文本,并返回这个 SpeechSynthesisUtterance 对象。

 

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

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

相关文章

Idea:通义千问插件

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、通义千问大模型 二、程序编写助手 三、Idea安装通义千问插件 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、通义千问大模型…

数据结构——二叉树的操作 (层序遍历)(C++实现)

数据结构——二叉树的操作&#xff08;2&#xff09;&#xff08;C实现&#xff09; 统计叶子结点个数统计结点个数层序遍历非递归方式递归方式 我们今天接着来看二叉树的操作&#xff0c;如果还没有看过上一篇的可以点击这里&#xff1a; https://blog.csdn.net/qq_67693066/a…

来自异国的客人 - 华为OD统一考试(D卷)

OD统一考试(D卷) 分值: 100分 题解: Java / Python / C++ 题目描述 有位客人来自异国,在该国使用m进制计数。 该客人有个幸运数字n(n<m),每次购物时,其总是喜欢计算本次支付的花费(折算为异国的价格后)中存在多少幸运数字。 问: 当其购买一个在我国价值k的产品时,…

【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 子集(难度⭐⭐)(65)

1. 题目解析 题目链接&#xff1a;78. 子集 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 算法思路详解&#xff1a; 为了生成数组 nums 的所有子集&#xff0c;我们需要对数组中的每个元素进行“选择”或“不选择…

JavaScript-Vue入门

本文主要测分享Vue的一些基础 Vue简介 Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。它的主要目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 下是一些 Vue 的主要特点和概念&#xff1a; 1. 响应式数据绑定&#xff1a;Vue 使用基于 HTML 的模板语法…

Visual Studio安装MFC开发组件

MFC由于比较古老了&#xff0c;Visual Studio默认没有这个开发组件。最近由于一些原因&#xff0c;需要使用这个库&#xff0c;这就需要另外安装。 参考了网上的一些资料&#xff0c;根据实际使用&#xff0c;其实很多步骤不是必须的。 https://zhuanlan.zhihu.com/p/68117276…

Neo-reGeorg(webshell代理)-php

https://github.com/L-codes/Neo-reGeorg python加载需要的库 pip install requests 生成webshell代理文件 python .\neoreg.py generate -k 123456 其中&#xff0c;123456为密码&#xff0c;可以修改 生成后的文件路径&#xff1a; > neoreg_servers/tunnel.ashx …

Java后台开发的前置说明

1.知识点逻辑 一个部分 都是先挑重点知识点讲解 然后根据这些重点知识点去完成一个项目的开发 然后在到返回来解决这个部分其他细枝末节的知识点 2.软件开发的分工 我们大致可以将软件开发分成四块&#xff1a; 1.前端开发(比如开发电脑中的京东 htmlcssjavascript) 2.移动开…

什么是主数据管理?合理管理主数据,奠定企业数据战略基石

主数据&#xff08;Master Data&#xff09;是指在企业多个业务系统中重复使用、共享的、具有高价值的核心业务实体数据&#xff0c;如客户、产品、供应商、员工等&#xff0c;它们是企业运营和决策的基础&#xff0c;需要保持高度的准确性、一致性和完整性&#xff0c;以确保业…

Scala 05 —— 函数式编程底层逻辑

Scala 05 —— 函数式编程底层逻辑 该文章来自2023/1/14的清华大学交叉信息学院助理教授——袁洋演讲。 文章目录 Scala 05 —— 函数式编程底层逻辑函数式编程假如...副作用是必须的&#xff1f;函数的定义函数是数据的函数&#xff0c;不是数字的函数如何把业务逻辑做成纯函…

贪吃蛇详解

Win32 API介绍&#xff1a; 在写贪吃蛇这款游戏时需要用到一些有关Win32 API的知识&#xff0c; 接下来我会将设计到的知识点列举并讲解&#xff1a; 首先我们先了解一下Win32 API是什么&#xff0c;Windows这个多作业系统除了协调应⽤程序的执⾏、分配内存、管理资源之外&am…

普乐蛙VR航天航空体验馆VR双人旋转座椅元宇宙VR飞船

多长假来袭&#xff01;&#xff01;想为门店寻找更多新鲜有趣的吸粉体验&#xff1f;想丰富景区体验&#xff1f;别着急&#xff0c;小编为你准备了一款爆款设备——时光穿梭机&#xff0c;720无死角旋转&#xff01;&#xff01;吸睛、刺激体验&#xff0c;将亲子、闺蜜、情侣…

Java对象不再使用时,为什么要赋值为 null

相信大家在面试Java开发的时候,会遇到比较多的问题是Java的内存管理,这里面涉及到Java垃圾回收机制,以及JVM调优等等,那么今天跟大家讨论一个问题:Java对象不再使用时,为什么要赋值为 null ? 1、Java内存管理 在Java中,对象是在堆内存中分配的。 这部分内存用于存储…

科技论文网站:中国科技论文在线

文章目录 1. Intro2. Main3. Cons Evaluation彩蛋&#xff1a;科学素质 这是作者最后一次发 这种类型的宣传 科普文章 1. Intro 中国科技论文在线是经教育部批准&#xff0c;由教育部科技发展中心主办&#xff0c; 利用现代信息技术手段&#xff0c;打破传统出版物的概念&…

Scrapy爬虫框架入门(豆瓣电影Top 250)

文章目录 Scrapy 官网Scrapy 文档GithubScrapy 简介项目结构爬虫实现XPath 教程创建 Scrapy 项目配置用户代理网页 dom 元素 IP 代理池IP代理池作用配置IP代理池申请IP代理池 Scrapy 官网 https://scrapy.org/ Scrapy 文档 https://docs.scrapy.org/en/latest/ Github htt…

在windows上安装MySQL数据库全过程

1.首先在MySQL的官网找到其安装包 在下图中点击MySQL Community(gpl) 找到MySQL Community Server 选择版本进行安装包的下载 2.安装包&#xff08;Windows (x86, 64-bit), MSI Installer&#xff09;安装步骤 继续点击下一步 继续进行下一步&#xff0c;直到出现此界面&#…

Vue3+vite优化基础架构(1)--- 使用unplugin-vue-components

Vue3vite优化基础架构&#xff08;1&#xff09;--- 使用unplugin-vue-components 说明安装unplugin-vue-componentsvite.config.js中使用unplugin-vue-components/vite 说明 这里记录下自己在Vue3vite的项目使用unplugin-vue-components/vite来自定义组件自动全局引入svg雪碧…

【八股】Spring Boot

SpringBoot是如何实现自动装配的&#xff1f; 首先&#xff0c;SpringBoot的核心注解SpringBootApplication里面包含了三个注解&#xff0c;SpringBootConfigurationEnableAutoConfigurationComponentScan&#xff0c;其中EnableAutoConfiguration是实现自动装配的注解&#x…

用自然语言连接系统的认知,用Function Calling 连接大模型和业务

前言 本篇文章&#xff0c;我们重点介绍Function Calling的机制和应用&#xff0c;在其原理上&#xff0c;也讲解了为什么会有plugin、GPTs出现等等。 核心要点&#xff1a; 1.大模型应用的一切&#xff0c;是自然语言连接系统的认知 2.在Function Calling的应用中&#xff0…

重要文件怕丢失怎么办?汇帮数据备份软件帮你解决文件丢失的烦恼 帮你实现文件实时备份的好方法

随着数字时代的来临&#xff0c;电脑文件已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;无论是个人用户还是企业用户&#xff0c;都可能面临数据丢失的风险&#xff0c;如硬盘故障、病毒攻击、误删除等。为了确保数据安全&#xff0c;实现电脑文件的实时备份变…