html SpeechSynthesis文字转语音

news2024/11/23 15:43:19

web 页面使用speechSynthesis实现文字转语音

网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

属性
SpeechSynthesis 也从它的父接口继承属性,EventTarget.

SpeechSynthesis.paused 只读
当SpeechSynthesis 处于暂停状态时, Boolean (en-US) 值返回 true 。

SpeechSynthesis.pending (en-US) 只读
当语音播放队列到目前为止保持没有说完的语音时, Boolean (en-US) 值返回 true 。

SpeechSynthesis.speaking (en-US) 只读
当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, Boolean (en-US) 返回 true 。

事件操作
SpeechSynthesis.onvoiceschanged (en-US)
当由SpeechSynthesis.getVoices()方法返回的SpeechSynthesisVoice (en-US)列表改变时触发。

方法
SpeechSynthesis 也从它的父接口继承方法, EventTarget.

SpeechSynthesis.cancel() (en-US)
移除所有语音谈话队列中的谈话。

SpeechSynthesis.getVoices()
返回当前设备所有可用声音的 SpeechSynthesisVoice (en-US)列表。

SpeechSynthesis.pause() (en-US)
把 SpeechSynthesis 对象置为暂停状态。

SpeechSynthesis.resume() (en-US)
把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。

SpeechSynthesis.speak() (en-US)
添加一个 utterance 到语音谈话队列;它将会在其他语音谈话播放完之后播放。

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>网页文字转语音</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">

</script>

<style type="text/css">
</style>
</head>
    <body id="form1">
    文字:<input type="text" value="LED灯窃密演示系统是一套通过灯光传输信息的语音窃听演示设备。该窃密设备不需要专线布设,信息通过光波传输,没有无线电辐射,具有隐蔽性好、泛在性强、传输距离远等特点,演示系统监听距离可达 120 米。该设备由两部分组成:LED拾音灯泡和远距离接收解调装置。" id="inpu">
    <button onclick="sayTTS()">发声</button>
	<button onclick="esc();">最小化</button>
	<button onclick="allqm()">F11</button>
	<button onclick="exitFullscreen()">退出全屏</button>
	
    </body>
    <script>
    function sayTTS()
    {
        var content = document.getElementById('inpu');
        console.log(content.value);
        const synth = window.speechSynthesis;
        const msg = new SpeechSynthesisUtterance();
        msg.text = content.value;     // 文字内容
        msg.lang = "zh-CN";  // 使用的语言:中文
        msg.volume = 0.8;      // 声音音量:0-1
        msg.rate = 1.5;        // 语速:0-10
        msg.pitch = 0.8;       // 音高:0-1
        synth.speak(msg);    // 播放
    }
	//关闭
	function esc(){
	  //window.blur(); // 让当前窗口失去焦点
	  //window.open('', '_self', ''); // 打开一个空白页面
	  window.setTimeout(function() {window.close();}, 200); // 延迟200毫秒关闭当前窗口
	}
	// 全屏
	function allqm(){
		var docElm = document.documentElement;  
        //W3C   
        if (docElm.requestFullscreen) {  
            docElm.requestFullscreen();  
        }  
            //FireFox   
        else if (docElm.mozRequestFullScreen) {  
            docElm.mozRequestFullScreen();  
        }  
            //Chrome等   
        else if (docElm.webkitRequestFullScreen) {  
            docElm.webkitRequestFullScreen();  
        }  
            //IE11   
        else if (elem.msRequestFullscreen) {  
            elem.msRequestFullscreen();  
        }  
	}
	// 推出全屏
	function exitFullscreen() {
		var de = document;
		if (de.exitFullscreen) {
			de.exitFullscreen();
		} else if (de.mozCancelFullScreen) {
			de.mozCancelFullScreen();
		} else if (de.webkitCancelFullScreen) {
			de.webkitCancelFullScreen();
		}
	}

    </script>
</html>

浏览器兼容性
在这里插入图片描述

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

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

相关文章

腾讯云服务器选择购买流程(一步步详细配置)

腾讯云服务器购买流程直接在官方活动上选择比较合适&#xff0c;在云服务器CVM或轻量应用服务器页面自定义购买费用比较贵&#xff0c;但是自定义购买云服务器CPU内存带宽配置选择范围广&#xff0c;活动上购买只能选择固定的活动机&#xff0c;选择范围窄&#xff0c;但是云服…

数据结构 -- 队列

1、Queue队列 先进先出 2、双端队列 --- Deque Deque的实现类是LinkedList,ArrayDeque,LinkedBlockingDeque。 ArrayDeque底层实现是数组&#xff0c;LinkedList底层实现是链表。 双端队列可以作为普通队列使用&#xff0c;也可以作为栈使用。Java官方推荐使用Deque替代Stac…

【flask + sqlalchemy】连接clickhouse数据库的踩的坑,在这里记录一下

文章目录 前言1. 发现问题2. 复盘2.1 上面试一次错误的问题记录2.2 flask使用clickhouse2.2.1 配置2.2.2 orm2.3 如何插入数据 前言 使用clickhouse有一段时间了&#xff0c;现在要重构一个项目&#xff0c;重度依赖clickhouse&#xff0c;现在终于理顺了&#xff0c;记录一下…

数据库管理-第七十七期 再探分布式(20230523)

数据库管理 2023-05-23 第七十七期 再探分布式1 单机分布式2 分布式改造3 尝试改造一个订单系统3.1 表类型和分片键选择3.2 扩展分片3.3 业务扩展 总结 第七十七期 再探分布式 上一次系统探讨分布式数据库还是在第三十六期&#xff0c;经过大半年的“进步”加上中间参加了不少…

Linux启动过程的问题解决

文章目录 Linux启动过程的问题解决忘记root密码的解决因文件系统错误而无法启动 Linux启动过程的问题解决 当我们在使用Linux时&#xff0c;可能会因为某些设置或突然断电等原因导致文件系统出现错误&#xff0c;从而导致Linux无法正常启动。但这并不意味着我们需要重新安装系…

ASEMI代理长电可控硅MAC97A8图片,MAC97A8大小

编辑-Z 长电可控硅MAC97A8参数&#xff1a; 型号&#xff1a;MAC97A8 VDRM/VRRM&#xff1a;600V IT(RMS)&#xff1a;1A ITSM&#xff1a;8A 栅极电流&#xff08;峰值&#xff09;&#xff1a;1A 栅极电压&#xff08;峰值&#xff09;&#xff1a;5V 栅极功率&#…

翼辉+飞腾全国产实时操作系统与全国产主板工控方案在电力产品的应用

SylixOS&#xff08;MS-RTOS&#xff09;电力产品应用简介 一、电网传统装置&#xff1a; 继电保护、测控、稳控、PMU、时间同步、故障录波等装置&#xff08;输变电&#xff09; 一般使用AMP方案&#xff0c;少数客户使用SMP方案。2019年11月使用SylixOS的国内首台100%全国…

centos8 安装mysql8

1、下载mysql8软件库 wget https://repo.mysql.com//mysql80-community-release-el8-3.noarch.rpm 2、安装软件库 rpm -ivh mysql80-community-release-el8-3.noarch.rpm 3、安装mysql yum install mysql-server 4、启动mysql systemctl start mysqld systemctl enable…

【非集中申请期】国家自然科学基金最新申请指南情况汇总

2023年国自然集中申请期函评季临近尾声。当下&#xff0c;申请人除了在日常的科研工作中也要合理、及时的关注一些非集中申请期的项目动态&#xff0c;恰如2023年各类非集中期申请项目指南正在陆续发布中&#xff0c;这些仍然是非常好的申请机会。近期的项目指南名称与申请截止…

快速上手MATLAB:科研、工程、数据分析,MATLAB入门(下)教你基础知识!分享《MATLAB初学者教程 MATLAB编程-菜鸟入门(清晰版)》

快速上手MATLAB&#xff1a;科研、工程、数据分析&#xff0c;MATLAB入门&#xff08;上&#xff09;教你基础知识&#xff01; 福利&#xff1a;文末有资料分享&#xff01;&#xff01;前言一、文件读取1. 工作空间数据读取2. 文本文件读取3. 常用的数据导入和导出函数4. 图像…

不吹不黑,安利5个网工必备工具包

大家好&#xff0c;我是老杨。 要说网工的好用工具&#xff0c;你心里肯定有不少选项。工具常用常新&#xff0c;与时俱进&#xff0c;但你的思维却不一定。 研究一个新工具&#xff0c;除了能提升你的工作效率&#xff0c;也能对你的认知有所开拓和提升。 所以&#xff0c;…

《程序员面试金典(第6版)》面试题 02.01. 移除重复节点(哈希映射,多指针暴力破解,链表)

题目描述 编写代码&#xff0c;移除未排序链表中的重复节点。保留最开始出现的节点。 题目传输门&#xff1a;面试题 02.01. 移除重复节点 示例1: 输入&#xff1a;[1, 2, 3, 3, 2, 1]输出&#xff1a;[1, 2, 3]示例2: 输入&#xff1a;[1, 1, 1, 1, 2]输出&#xff1a;[1, 2]…

Hive---拉链表设计与实现

1 数据同步问题 Hive在实际工作中主要用于构建离线数据仓库&#xff0c;定期的从各种数据源中同步采集数据到Hive中&#xff0c;经过分层转换提供数据应用。比如每天需要从MySQL中同步最新的订单信息、用户信息、店铺信息等到数据仓库中&#xff0c;进行订单分析、用户分析。 …

【C++修炼之路】定位new(项目记录)

————————————每一个不曾起舞的日子都是对生命的辜负。 C之定位new 1. 什么是定位new2. 定位new的语法3. 具体实例 1. 什么是定位new 一般的new运算符负责在heap堆中找到一个足以能够满足要求的内存块。 而定位new&#xff08;Placement new&#xff09;是C中的一…

运行100万个并发任务,不同语言各需要多少内存

作者&#xff1a;DataStax 公司&#xff08;美国的一家数据库系统开发商&#xff09;Piotr Kołaczkowski 原文见&#xff1a; https://pkolaczk.github.io/memory-consumption-of-async/ 在这篇博客文章中&#xff0c;探讨了处理大量网络连接时候的Rust、Go、Java、C#、Pyth…

企企通“码上顺”清洗工具 | 让数据更有价值,让业务更出色

数据清理工作是企业数据管理、数据治理中的最基础的工作之一&#xff0c;不仅是一项苦活、累活&#xff0c;也是一个既考验业务又检验技术的活。 物料主数据作为企业核心的数据资产&#xff0c;在智慧供应链、业财一体化等数字化建设中发挥着重要作用。在当今高速发展的商业环…

《汇编语言》- 读书笔记 - 实验2 用机器指令和汇编指令编程

《汇编语言》- 读书笔记 - 实验2 用机器指令和汇编指令编程 1. 预备知识: Debug 的使用2 .实验任务 1. 预备知识: Debug 的使用 统一完善到&#xff1a;实验 1 查看 CPU 和内存&#xff0c;用机器指令和汇编指令编程。不在这拆开写了。 2 .实验任务 使用 Debug&#xff0c;将…

功率放大器在压电驱动器中的作用及应用

功率放大器在压电驱动器中的作用是将低功率信号放大为足够大的电力信号&#xff0c;以驱动压电陶瓷材料产生相应的机械振动。 压电陶瓷材料是一种特殊的陶瓷材料&#xff0c;能够将机械能转换为电能&#xff0c;因此被广泛应用于各种类型的振动器件和传感器中。这些器件通常需要…

Combiner

概述 Conbiner在MapReduce的Shuffle阶段起作用&#xff0c;它负责局部数据的聚合&#xff0c;我们可以看到&#xff0c;对于大数据量&#xff0c;如果没有Combiner&#xff0c;将会在磁盘上写入多个文件等待ReduceTask来拉取&#xff0c;但是如果有Combiner组件&#xff0c;我们…

5 个章节、25 条规范,全方位 Get 数据集选择与创建的「百科全书」

By 超神经 内容一览&#xff1a;如果你正在学习如何创建或选择一个合适的数据集&#xff0c;那么这篇文章会给你一些实用的建议&#xff0c;帮助你在选择和创建数据集时做出明智的决策。 关键词&#xff1a;机器学习 数据集 本文首发自 HyperAI 超神经微信公众平台~ 作者 |…