2025.3.11 关于页面上传音频与视频和文字延时显示以模拟AI回复

news/2025/3/12 0:32:34/文章来源:https://www.cnblogs.com/MoonbeamsC/p/18766563

话不多说,直接上代码!

点击查看代码

<!-- 新增随机文字容器 -->
<div id="random-text"></div>
<!-- 评级按钮 -->
<button class="trigger-btn" id="showCommentBtn" disabled>点击获取评价</button><!-- 上传按钮 -->
<label class="upload-btn" for="fileInput">上传视频/音频</label>
<input type="file" id="fileInput" accept="video/*,audio/*"><!-- 媒体预览容器 -->
<div class="media-container"></div>// 随机文本库const textGroups = [];
const fileInput = document.getElementById('fileInput');const mediaContainer = document.querySelector('.media-container');const randomTextElement = document.getElementById('random-text');let timeoutId = null;const showCommentBtn = document.getElementById('showCommentBtn');let mediaFile = null;  // 用于存储上传的文件fileInput.addEventListener('change', function(e) {mediaFile = e.target.files[0];if (!mediaFile) return;// 启用提示按钮showCommentBtn.disabled = false;// 清除之前的定时器和媒体if(timeoutId) clearTimeout(timeoutId);mediaContainer.innerHTML = '';randomTextElement.style.display = 'none';const file = e.target.files[0];if (!file) return;// 创建媒体预览const url = URL.createObjectURL(file);const mediaElement = createMediaElement(file, url);mediaContainer.appendChild(mediaElement);});// 创建媒体元素函数function createMediaElement(file, url) {const mediaElement = file.type.startsWith('video/') ?document.createElement('video') :document.createElement('audio');mediaElement.className = 'media-preview';mediaElement.controls = true;mediaElement.src = url;if (mediaElement.tagName === 'VIDEO') {// mediaElement.autoplay = true;mediaElement.playsInline = true;}mediaElement.onloadedmetadata = () => {URL.revokeObjectURL(url);};return mediaElement;}// 显示随机文本函数function showRandomText() {const randomIndex = Math.floor(Math.random() * textGroups.length);const selectedText = textGroups[randomIndex];randomTextElement.textContent = textGroups[randomIndex];randomTextElement.textContent = selectedText;randomTextElement.style.display = 'block';// 语音朗读功能if ('speechSynthesis' in window) {const synth = window.speechSynthesis;const cleanText = selectedText.replace(/等级[A-E]:?/, '') // 去除等级前缀const utterance = new SpeechSynthesisUtterance(cleanText);// 配置语音参数utterance.lang = 'zh-CN';utterance.rate = 0.9;  // 语速 0.1-10utterance.pitch = 1;   // 音高 0-2utterance.volume = 1;  // 音量 0-1// 尝试使用中文语音const voices = synth.getVoices().filter(v => v.lang === 'zh-CN');if (voices.length > 0) {utterance.voice = voices[Math.floor(Math.random() * voices.length)];}// 错误处理utterance.onerror = (event) => {console.error('语音朗读失败:', event.error);};// 立即停止当前正在播放的语音synth.cancel();// 开始朗读setTimeout(() => {synth.speak(utterance);}, 300);  // 延迟300ms确保文本显示完成} else {console.warn('当前浏览器不支持文本朗读功能');}
}// 新增按钮点击事件showCommentBtn.addEventListener('click', function() {if (!mediaFile) {alert('请先上传作品!');return;}if(timeoutId) clearTimeout(timeoutId);randomTextElement.style.display = 'none';timeoutId = setTimeout(() => {showRandomText();}, 3000);});

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

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

相关文章

vitest遇到的一个小问题:scrollTo is not a function

给tdesign-mobile-vue提了一个pr,验收通过了但是单测流水线报错了看报错是组件里的错误,scrollTo is not a function 组件代码的大概逻辑如下 const navScroll = ref<HTMLElement>(); // ... if (navScroll.value) {const tab = navScroll.value.querySelector < HT…

《Python极客编程 : 用代码探索世界》 | PDF免费下载

16个有趣的编程项目,项目式的学习方法,有趣案例提升Python编程技能,培养解决现实问题的思维,附赠源代码,适合零基础计算机小白入门学习。点击下载书籍信息 作者: [美]李沃恩(Lee Vaughan) 出版社: 人民邮电出版社 副标题: 用代码探索世界 译者: 王海鹏 出版年: 2022-8-1…

密度大于0.9408

题目: from Crypto.Util.number import * import random from Crypto.Cipher import AES import hashlib from Crypto.Util.Padding import pad from secrets import flaglist = [] bag = [] p=random.getrandbits(64) assert len(bin(p)[2:])==64 for i in range(4):t = pa=[g…

背包密码密度的作用(LLL算法的实现)

背包问题通解: 当密度d满足以下条件时,LLL算法能有效地解决这类背包问题![](https://cdn.nlark.com/yuque/0/2025/png/49294098/1739349426771-401f2fa7-aefe-422b-b642-5d8f664c415d.png)其中:len(M)是向量M的长度,即向量中元素的数量 max(Mi)是向量M中的最大元素计算: import…

Elliptic(椭圆)曲线

题目: from Crypto.Util.number import getPrime from libnum import s2n from secret import flagp = getPrime(256) a = getPrime(256) b = getPrime(256) E = EllipticCurve(GF(p),[a,b]) m = E.random_point() G = E.random_point() k = getPrime(256) K = k * G r = getPr…

Twisted Hessian曲线(求a)

题目: from Crypto.Util.number import * from Crypto.Cipher import AES from Crypto.Util.Padding import pad from random import randint import hashlib from secrets import flagdef add_THCurve(P, Q):if P == (0, 0):return Qif Q == (0, 0):return Px1, y1 = Px2, y2 …

基于双PI控制器结构的六步逆变器供电无刷直流电机调速simulink仿真

1.课题概述基于双PI控制器结构的六步逆变器供电无刷直流电机调速simulink仿真。双PI控制器是一种结合了两个独立的PI控制器的控制策略,用于提高系统的稳定性和动态性能。2.系统仿真结果 (完整程序运行后无水印) 3.核心程序与模型 版本:MATLAB2022a 4.系统原理简介 4.1 无…

第十课 从人类反馈中引导强化学习

GPT-1GPT-2(至少要三个支持是因为网络上的垃圾信息很多,有了支持能够显著减少垃圾信息的量)GPT-2首次实现了零样本学习。零样本学习是指模型在从未接触过特定任务的训练数据 、无需额外示例 、无需调整参数(梯度更新)的情况下,直接完成任务的能力。例如,用户只需给模型一…

Olive直播管理系统

在校园教学与在线教育场景中,师生对实时音视频传输的需求日益增长。传统直播工具往往缺乏定制化功能,且难以满足多平台流分发、低延迟交互等教育场景的特殊需求。因此,本软件旨在打造一款轻量级、高稳定性的直播管理工具,专注于解决以下问题:简化直播流程:教师可快速搭建…

Redis--Lesson05--Redis进阶

一.Redis中的事务 在Redis中,单条命令依旧保持原子性,但是对于事务来说(命令集)不保证原子性 Redis事务的本质:一组命令的集合,一个事务中所有的命令都会被序列化,在事务的执行过程中,会按照顺序执行,一次性,顺序性,排他性!执行一些命令 如:--- 队列 set1,set2,…

基于入侵野草算法的KNN分类优化matlab仿真

1.程序功能描述 基于入侵野草算法的KNN分类优化。其中,入侵野草算法是一种启发式优化算法,它模拟了自然界中野草的扩散与竞争过程。该算法通过一系列的步骤来寻找样板的最优特征,参与KNN的分类训练和测试。 2.测试软件版本以及运行结果展示MATLAB2022A版本运行 (完…

PowerShell实现全屏七彩渐变 呼吸 屏保

引言 想做一下屏幕保护程序的效果-----全屏颜色渐变,类似呼吸灯的效果。就用Windows自带的PowerShell脚本。脚本预设好了七彩颜色,然后循环变化。首先 我们先实现七彩循环切换的全屏效果,也就是不带渐变。 要想实现全屏颜色填充,必须借助"窗口"。对于PowerShell而…