纯前端实现语音合成并输出提示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语音合成</title><style>body {max-width: 500px;margin: 20px auto;padding: 20px;font-family: Arial, sans-serif;}textarea {width: 100%;height: 100px;margin: 10px 0;padding: 10px;}button {padding: 8px 16px;margin-right: 10px;background: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background: #45a049;}</style>
</head>
<body><h2>语音合成</h2><textarea id="text" placeholder="请输入要转换成语音的文字...">这是一个测试语音。</textarea><div><button onclick="speak()">播放</button><button onclick="stop()">停止</button></div><script>const synth = window.speechSynthesis;function speak() {if (synth.speaking) {synth.cancel();}const text = document.getElementById('text').value;const utterance = new SpeechSynthesisUtterance(text);utterance.lang = 'zh-CN';  // 设置为中文synth.speak(utterance);}function stop() {synth.cancel();}</script>
</body>
</html>

在这里插入图片描述

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

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

相关文章

配置nginx服务通过ip访问多网站

配置nginx服务通过ip访问多网站

1.关闭防火墙 [rootlocalhost wzj]# systemctl stop firewalld [rootlocalhost wzj]# sstenforce 0 bash: sstenforce: command not found... [rootlocalhost wzj]# setenforce 0 2&#xff0c;挂mnt [rootlocalhost wzj]# mount/dev/sr0/mnt bash: mount/dev/sr0/mnt: No suc…
阅读更多...
Excel常用操作培训

Excel常用操作培训

1 Excel基本操作 1.1 常用快捷键 1.1.1快捷键操作工作簿、工作表 1.1.2快捷键操作 1.1.3单元格操作 1.1.4输入操作 2.1 常见功能描述 2.1.1 窗口功能栏 excel有很多功能可以用&#xff0c;新建文档后&#xff0c;可以最上方&#xff0c;可以看到所有的功能栏目 2.1.2 剪切板…
阅读更多...
双链表的增删改查

双链表的增删改查

目录 一、主程序&#xff08;test.c&#xff09; 二、自定义头文件&#xff08;DList.h&#xff09; 三、函数程序&#xff08;DList.c&#xff09; 一、主程序&#xff08;test.c&#xff09; #define _CRT_SECURE_NO_WARNINGS 1 #include "DList.h"int main() {…
阅读更多...
思想是花 嘴是大地

思想是花 嘴是大地

思想是花 嘴是大地 作者&#xff1a;楚旺群 把最美丽的花 播种于嘴的田野 ——舌底生华 思想就会展现灿烂之花 做个比喻 思想是花 嘴是田野 世界上最美的是心灵之花 生成心灵之花的是舌底生灿 最慰藉心田的是话语 产生语言的沃土是嘴把思想来展现 语言交流 它就是产生思…
阅读更多...
Spring中导致事务传播失效的情况(自调用、方法访问权限、异常处理不当、传播类型选择错误等。在实际开发中，务必确保事务方法正确配置)

Spring中导致事务传播失效的情况(自调用、方法访问权限、异常处理不当、传播类型选择错误等。在实际开发中，务必确保事务方法正确配置)

文章目录 1. 自调用&#xff08;内部调用&#xff09;导致事务失效示例&#xff1a;解决办法&#xff1a; 2. 事务方法不是 public 修饰示例&#xff1a;解决办法&#xff1a; 3. 未被 Spring 管理的对象示例&#xff1a;解决办法&#xff1a; 4. 异常类型不匹配导致事务回滚失…
阅读更多...
Flutter中使用Cookies

Flutter中使用Cookies

Cookie Cookie 是一种在用户的浏览器中存储的小型文本文件&#xff0c;用于保存有关用户和他们的访问信息。它们通常用于以下目的&#xff1a; 主要功能 会话管理&#xff1a;保持用户登录状态&#xff0c;例如识别已登录的用户。个性化设置&#xff1a;保存用户的偏好设置&a…
阅读更多...
Xcode真机运行正常，打包报错

Xcode真机运行正常，打包报错

1.问题&#xff1a; 老项目Xcode真机运行没问题&#xff0c;但但打包的时候却报了以下错误&#xff1a; some files could not be transferred (code 23) at /AppleInternal/Library/BuildRoots/4ff29661-3588-11ef-9513-e2437461156c/Library/Caches/com.apple.xbs/Sources/r…
阅读更多...
基于python智能推荐的丢失物品招领网站的制作，前端vue+django框架，协同过滤算法实现推荐功能

基于python智能推荐的丢失物品招领网站的制作，前端vue+django框架，协同过滤算法实现推荐功能

背景 基于 Python 智能推荐的丢失物品招领网站&#xff0c;通过前端 Vue 和后端 Django 框架的结合&#xff0c;为用户提供便捷、个性化的服务。该系统的核心在于实现智能推荐功能&#xff0c;采用协同过滤算法来提高用户体验&#xff0c;帮助用户更快找到合适的失物或招领信息…
阅读更多...
爬虫日常实战

爬虫日常实战

爬取美团新闻信息&#xff0c;此处采用两种方法实现&#xff1a; 注意点&#xff1a;因为此处的数据都是动态数据&#xff0c;所以一定要考虑好向下滑动数据包会更新的情况&#xff0c;不然就只能读取当前页即第一页数据&#xff0c;方法一通过更新ajax数据包网址页数&#xf…
阅读更多...
代码随想录算法训练营第51天｜101. 孤岛的总面积、102. 沉没孤岛、103. 水流问题、104.建造最大岛屿

代码随想录算法训练营第51天｜101. 孤岛的总面积、102. 沉没孤岛、103. 水流问题、104.建造最大岛屿

文章目录 101. 孤岛的总面积102. 沉没孤岛103. 水流问题104.建造最大岛屿 101. 孤岛的总面积 卡码网 101. 孤岛的总面积 代码随想录 from collections import deque n, m map(int, input().split())matrix []for i in range(n):matrix.append(list(map(int, input().split(…
阅读更多...
二叉树展开为链表

二叉树展开为链表

二叉树展开为链表 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同…
阅读更多...
07 实战：视频捕获

07 实战：视频捕获

代码如下： import tkinter as tk # 导入tkinter库，用于创建图形用户界面 from tkinter import ttk, filedialog, messagebox # 导入tkinter的额外部件、文件对话框和消息框 import cv2 # 导入OpenCV库，用于图像处理 import numpy as np # 导入NumPy库，用于数值计算 from P…
阅读更多...
Redis 数据类型Streams

Redis 数据类型Streams

目录 1 基本特性 2 主要操作命令 2.1 XADD key ID field value [field value ...] 2.2 XREAD [COUNT count] [BLOCK milliseconds] STREAMS key [key ...] ID [ID ...] 2.3 XRANGE key start end [COUNT count] 2.4 XREVRANGE key end start [COUNT count] 2.5 XGROUP …
阅读更多...
文件处理新纪元：微信小程序的‘快递员’与‘整理师’

文件处理新纪元：微信小程序的‘快递员’与‘整理师’

嗨&#xff0c;我是中二青年阿佑&#xff0c;今天阿佑将带领大家如何通过巧妙的文件处理功能&#xff0c;让用户体验从‘杂乱无章’到‘井井有条’的转变&#xff01; 文章目录 微信小程序的文件处理文件上传&#xff1a;小程序的“快递服务”文件下载&#xff1a;小程序的“超…
阅读更多...
ubuntu安装golang并设置goproxy

ubuntu安装golang并设置goproxy

在Ubuntu上安装Go语言&#xff08;Golang&#xff09;通常有几种方法&#xff0c;以下是一些常见的安装步骤&#xff1a; 方法一&#xff1a;使用包管理器安装 更新包列表&#xff1a; sudo apt update安装Go&#xff1a; sudo apt install golang-go验证安装&#xff1a; go …
阅读更多...
中电金信重磅发布《金融数据安全治理白皮书》

中电金信重磅发布《金融数据安全治理白皮书》

金融行业作为数据密集型行业&#xff0c;对数据的依赖日益加深&#xff0c;但数据价值的提升也带来了严峻的数据安全挑战。面对频繁的网络攻击、数据泄露事件以及日益严格的监管法规&#xff0c;金融机构在追求数据价值创造的同时&#xff0c;愈加重视数据安全问题&#xff0c;…
阅读更多...
Sigrity Power SI Model Extraction模式如何提取电源网络的S参数和阻抗操作指导(一)

Sigrity Power SI Model Extraction模式如何提取电源网络的S参数和阻抗操作指导(一)

Sigrity Power SI Model Extraction模式如何提取电源网络的S参数和阻抗操作指导(一) Sigrity PowerSI是频域电磁场仿真工具，以下图为例介绍如果用它观测电源的网络的S参数以及阻抗的频域曲线. 观测IC端电源网络的自阻抗 1. 用powerSi.exe打开该SPD文件
阅读更多...
7-1 大写字母转换为小写字母(C++；cin；cout)

7-1 大写字母转换为小写字母(C++；cin；cout)

7-1 大写字母转换为小写字母 分数 30 作者 王群芳 单位 合肥师范学院 编程从键盘输入一个大写英文字母&#xff0c;将其转换为小写英文字母&#xff0c;将转换后的小写英文字母及其十进制的ASCII码值显示到屏幕上。如果输入的不是大写英文字母&#xff0c;则输出Input Data er…
阅读更多...
MySQL数据库中存储图片和读取图片的操作

MySQL数据库中存储图片和读取图片的操作

文章目录 方法一&#xff1a;将图片以 BLOB 类型存储在数据库中MySQL 语句实现Python 实现 方法二&#xff1a;将图片存储在文件系统中&#xff0c;并在数据库中存储路径MySQL 语句实现Python 实现 总结 在MySQL数据库中存储图片通常有两种主要方式&#xff1a;将图片以二进制数…
阅读更多...
AWD入门

AWD入门

一、简介 AWD(Attack With Defense&#xff0c;攻防兼备)模式。你需要在一场比赛里要扮演攻击方和防守方&#xff0c;攻者得分&#xff0c;失守者会被扣分。也就是说攻击别人的靶机可以获取 Flag 分数时&#xff0c;别人会被扣分&#xff0c;同时你也要保护自己的主机不被别人…
阅读更多...
最新文章

Copyright @ 2022~2023