前端js语音朗读文本

news/2024/9/23 5:17:49/
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语音朗读</title></head><body><textarea id="textarea" rows="20" cols="70"></textarea><button onclick="reading()">朗读</button><script>function reading() {const value = document.querySelector("#textarea").value;if (!value) {return alert("填入朗读文本");}const speech = new SpeechSynthesisUtterance(value);speechSynthesis.speak(speech);speech.onstart = (e) => {console.log("开始读");}speech.onend = (e) => {console.log("读完了");}}</script></body>
</html>

在这里插入图片描述

打开你的声音听听

SpeechSynthesis实例对象属性

lang 获取并设置话语的语言
pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
text 获取并设置说话时的文本
voice 获取并设置说话的声音
volume 获取并设置说话的音量

SpeechSynthesis方法

speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
pause()暂停语音
resume() 恢复暂停的语音
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

实例对象中的方法

onstart – 语音合成开始时候的回调
onpause – 语音合成暂停时候的回调
onresume – 语音合成重新开始时候的回调
onend – 语音合成结束时候的回调


http://www.ppmy.cn/news/1235414.html

相关文章

Windows更换主板后一直提示,你的pin码不可再用解决办法

最近惠普电脑主板坏了&#xff0c;到售后去维修电脑更换了个主板。 在经过了一系列的重新开机后&#xff0c;就直接卡在了“你的pin码不可再用”那里。 主要症状就是&#xff0c;一直点一直连不上windows的 microsoft账户&#xff0c;点完一会儿黑屏。然后就回到了一开头的“你…

QT5 MSVC2017 64bit配置OpenCV4.5无需编译与示范程序

环境&#xff1a;Windows 10 64位 Opencv版本&#xff1a;4.5 QT&#xff1a;5.14 QT5 MSVC2017配置OpenCV 版本参考&#xff1a; opencv msvc c对应版本 1.安装MSVC2017&#xff08;vs2017&#xff09; 打开Visual Studio Installer&#xff0c;点击修改 选择vs2017生成工…

设计模式-Adapter

定义 适配器设计模式是一种结构型设计模式&#xff0c;用于将一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。 适配器模式包括三种形式&#xff1a;类适配器模式、对象适配器模式、接口适配器模式&a…

设计模式——行为型模式(二)

6.8 迭代器模式 6.8.1 概述 定义:提供一个对象来顺序访问聚合对象中的一系列数据,而不暴露聚合对象的内部表示。 6.8.2 结构 迭代器模式主要包含以下角色: 抽象聚合(Aggregate)角色:定义存储、添加、删除聚合元素以及创建迭代器对象的接口。具体聚合(ConcreteAggreg…

露营管理系统预约小程序效果如何

旅游经济已经复苏&#xff0c;并且市场规模增速加快&#xff0c;近一年来远途/周边游客户增多&#xff0c;不少旅游景区在节假日常常面对客流爆满现象。同时露营作为近几年突然火热的项目&#xff0c;其需求也是日渐上升。 然而在高需求的同时&#xff0c;我们也看到露营经营痛…

没有PDF密码,如何解密?

PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。忘记了PDF密码该如何解密&#xff1f; PDF和office一样&#xff0c;可以对文件进行加密&#xff0c;但是没有提供恢复密码的功…

rabbit MQ的延迟队列处理模型示例(基于SpringBoot延时插件实现)

rabbitMQ安装插件rabbitmq-delayed-message-exchange 交换机由此type 表示组件安装成功 生产者发送消息时设置延迟值 消息在交换机滞纳至指定延迟后&#xff0c;进入队列&#xff0c;被消费者消费。 组件注解类&#xff1a; package com.esint.configs;import org.springfra…

Vue生成二维码并进行二维码图片下载

1、安包 npm install vue-qr --save2、引入 // vue2.0 import VueQr from vue-qr // vue3.0 import VueQr from vue-qr/src/packages/vue-qr.vue new Vue({components: {VueQr} })<!-- 设备二维码 对话框 270px--><el-dialog title"点位二维码" :visible.…