文本朗读遇标点停顿无法切换GIF动画问题求助

核心问题 #

1. speechSynthesis.speaking在整个朗读任务未结束前始终返回true，包括逗号/句号后的停顿阶段，导致间隔检测无法识别停顿状态。
2. 代码中重复赋值utterance.onend，覆盖了最初定义的回调逻辑，部分状态切换失效。
3. 页面初始状态未设置默认显示slientGIF，且hideLipAnimation会同时隐藏两张图，不符合需求。

修改后的完整代码 #

<div class="container">
    <textarea id="textToSpeak" rows="4" placeholder="Enter text to speak..."></textarea>
    <button id="speakButton">Speak</button>
</div>
<img id="lipGif" src="image/dux1.gif" alt="Lips animation" style="display:none;">
<img id="lipSilent" src="image/duxsilent.gif" alt="silent animation" style="display:inline;">

<script>
document.addEventListener('DOMContentLoaded', function() {
    const textToSpeakInput = document.getElementById('textToSpeak');
    const speakButton = document.getElementById('speakButton');
    const lipGif = document.getElementById('lipGif');
    const lipSilent = document.getElementById('lipSilent');

    // 兼容部分浏览器语音加载延迟问题
    let voices = [];
    function loadVoices() {
        voices = speechSynthesis.getVoices();
    }
    loadVoices();
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = loadVoices;
    }

    speakButton.addEventListener('click', function() {
        const text = textToSpeakInput.value.trim();
        if (text !== '') {
            // 按句号、逗号分割文本，过滤空片段
            const textSegments = text.split(/([.,])/).filter(seg => seg.trim() !== '');
            speakSegments(textSegments);
        } else {
            alert('Please enter some text to speak.');
        }
    });

    function speakSegments(segments) {
        if (segments.length === 0) {
            // 所有片段朗读完成，显示静默动画
            showSilentAnimation();
            return;
        }

        const currentSeg = segments.shift();
        const utterance = new SpeechSynthesisUtterance(currentSeg);
        
        utterance.onstart = function() {
            showLipAnimation();
        };

        utterance.onend = function() {
            // 遇到标点符号时，切换静默动画并延迟200ms继续
            if (currentSeg.match(/[.,]/)) {
                showSilentAnimation();
                setTimeout(() => {
                    speakSegments(segments);
                }, 200);
            } else {
                // 普通文本片段直接继续下一个
                speakSegments(segments);
            }
        };

        speechSynthesis.speak(utterance);
    }

    function showLipAnimation() {
        lipGif.style.display = 'inline';
        lipSilent.style.display = 'none';
    }

    function showSilentAnimation() {
        lipGif.style.display = 'none';
        lipSilent.style.display = 'inline';
    }
});
</script>

关键修改点 #

• 初始状态设置：在HTML中直接给两张图设置初始display属性，默认显示静默动画。
• 文本分割处理：将原文本按标点分割为多个片段，逐个朗读，精准控制每个片段前后的动画切换。
• 停顿控制：遇到标点符号时，朗读完成后切换到静默动画，延迟200ms再继续下一个片段，模拟自然停顿。
• 修复回调覆盖：每个片段的utterance单独设置回调，避免逻辑覆盖。
• 语音兼容处理：添加语音加载监听，避免部分浏览器因语音未加载导致的朗读失败。

内容的提问来源于stack exchange，提问作者monkey from Tanzania