feat: 添加音频资源和更新引导对话,提升学习体验
- 在多个场景中引入音频文件,增强互动性和沉浸感。 - 更新引导对话文本,确保信息准确性和一致性。 - 调整组件结构,清理冗余代码,提升可维护性。 - 引入结束窗口,鼓励用户深入了解黄炎培的教育理念。
This commit is contained in:
1 parent
6e106032fd
commit
a8723ab4aa
12 files changed
+158
-36
No files matched your search
@@ -36,7 +36,7 @@ export const EndingOverlay = ({
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
|
||||
// 结语音频:默认自动播放,支持按 channel 分组互斥
|
||||
const { currentSrc, play, stop } = useAudioManager(
|
||||
const { currentSrc, isPlaying, play, stop } = useAudioManager(
|
||||
audioChannelId
|
||||
? {
|
||||
mode: "channel",
|
||||
@@ -83,18 +83,42 @@ export const EndingOverlay = ({
|
||||
play(audioSrc);
|
||||
}, [visible, autoPlayAudio, audioSrc, play]);
|
||||
|
||||
// 全部文字出现后 1 秒自动关闭
|
||||
// 全部文字出现后自动关闭(如果有音频,需等待音频播放完成)
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
if (isAnimating) return;
|
||||
if (!text || displayedText !== text) return;
|
||||
|
||||
// 如果有音频,需要等待音频播放完成
|
||||
if (audioSrc) {
|
||||
// 检查当前播放的音频是否是我们期望的音频,且已播放完成
|
||||
if (currentSrc === audioSrc && !isPlaying) {
|
||||
// 音频播放完成后,等待 800ms 再关闭
|
||||
const timer = setTimeout(() => {
|
||||
onContinue();
|
||||
}, 800);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
// 音频还在播放,等待播放完成
|
||||
return;
|
||||
}
|
||||
|
||||
// 没有音频,文字动画完成后等待 800ms 关闭
|
||||
const timer = setTimeout(() => {
|
||||
onContinue();
|
||||
}, 800);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [visible, isAnimating, displayedText, text, onContinue]);
|
||||
}, [
|
||||
visible,
|
||||
isAnimating,
|
||||
displayedText,
|
||||
text,
|
||||
audioSrc,
|
||||
currentSrc,
|
||||
isPlaying,
|
||||
onContinue,
|
||||
]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
|
||||
Reference in new issue
Block a user