前端开发攻略---用原生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的产品时,…

市政行业乙级资质改革对公共交通工程的影响

资质门槛调整&#xff1a;改革可能会调整乙级资质的申请条件&#xff0c;例如注册资本、技术人员配置、业绩要求等&#xff0c;这直接影响到新企业和中小企业进入市场的难易程度。门槛的调整旨在提高行业整体的专业水平和服务质量。 业务范围变化&#xff1a;改革可能会重新定…

HCIP-Datacom-ARST必选题库_IPsec【3道题】

1.在IPsec中&#xff0c;能够用哪一个协议来实现数据的完整性? AES 3DES MD5 DES 2.以下关于IPsec密钥交换的描述&#xff0c;正确的是哪一项? IKE主模式支持NAT转换 IKE协商使用Bellham-Ford算法分发密钥 使用IKE协议主模式需要经历三个阶段:SA交换、密钥交换和ID交…

【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 …

alert() 函数功能

基本的 alert() 函数用法&#xff1a; 最基本的用法是通过 alert() 函数显示一条简单的文本消息&#xff0c;如下所示&#xff1a; alert("Hello, World!");这将在浏览器中显示一个消息框&#xff0c;其中包含文本 “Hello, World!”。 显示变量的值&#xff1a; a…

Java后台开发的前置说明

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

若依框架学习-springboot-gateway笔记

版本&#xff1a;若依框架微服务版本 学习内容&#xff1a;springboot-gateway 熔断降级踩坑 文档上使用的hystrix在springcloud3.1.8不再支持&#xff0c;建议改为使用CircuitBreaker&#xff0c;使用方式和hystrix几乎无差别&#xff0c;只是需要修改pom引用&#xff1a; …

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

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

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

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

什么是 DNS?DNS设定时常见的问题都有哪些?

DNS&#xff08;Domain Name System&#xff09;即域名系统&#xff0c;它是互联网的一项服务。 它主要的作用是将域名转换为对应的 IP 地址&#xff0c;以便计算机能够识别和访问互联网上的各种资源。当我们在浏览器中输入域名时&#xff0c;DNS 会帮助我们找到与之对应的服务…

分布式与微服务区别?

1、概念角度&#xff1a; 分布式&#xff1a;把多个应用部署到多台服务器&#xff08;云&#xff09;上&#xff0c;多个应用之间相互协作&#xff0c;提高系统的扩展性和稳定性。 微服务&#xff1a;是分布式的一种实现方式。 2、粒度划分&#xff1a; 分布式&#x…

贪吃蛇详解

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.冒泡排序法 原理如下&#xff1a;每次比较数组中相邻的两个数组元素的值&#xff0c;将较小的数排在较大的数前面&#xff0c;可实现数组元素的从小到大排序&#xff1b;每次将较大的数排在较小的数前面&#xff0c;可实现数组元素从大到小排序。 /**每次比较数组相邻的两个…