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

话不多说，直接上代码！

点击查看代码

<!-- 新增随机文字容器 -->
<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-10
            utterance.pitch = 1;   // 音高 0-2
            utterance.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);
    });