话不多说,直接上代码!
点击查看代码
<!-- 新增随机文字容器 -->
<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);});