|
@@ -67,13 +67,13 @@
|
|
|
<div class="poem-text" v-html="formatPoemContent(currentPoemContent)" ></div>
|
|
<div class="poem-text" v-html="formatPoemContent(currentPoemContent)" ></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- 视频显示区域 -->
|
|
<!-- 视频显示区域 -->
|
|
|
<div v-if="currentDialogue && currentDialogue.type === 'video'" class="video-display">
|
|
<div v-if="currentDialogue && currentDialogue.type === 'video'" class="video-display">
|
|
|
- <video
|
|
|
|
|
- :src="currentDialogue.videoUrl"
|
|
|
|
|
- class="dialogue-video"
|
|
|
|
|
- controls
|
|
|
|
|
|
|
+ <video
|
|
|
|
|
+ :src="currentDialogue.videoUrl"
|
|
|
|
|
+ class="dialogue-video"
|
|
|
|
|
+ controls
|
|
|
autoplay
|
|
autoplay
|
|
|
@ended="handleVideoEnded"
|
|
@ended="handleVideoEnded"
|
|
|
>
|
|
>
|
|
@@ -350,7 +350,7 @@ const playBackgroundAudio = () => {
|
|
|
backgroundAudio.value.volume = 1
|
|
backgroundAudio.value.volume = 1
|
|
|
backgroundAudio.value.play().catch(e => console.error('背景音播放失败:', e))
|
|
backgroundAudio.value.play().catch(e => console.error('背景音播放失败:', e))
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 处理背景视频
|
|
// 处理背景视频
|
|
|
if (currentBackgroundType.value === 'video' && isPlaybackStarted.value && isPlaying.value) {
|
|
if (currentBackgroundType.value === 'video' && isPlaybackStarted.value && isPlaying.value) {
|
|
|
// 视频已经在模板中渲染,这里只需要确保它在播放状态
|
|
// 视频已经在模板中渲染,这里只需要确保它在播放状态
|
|
@@ -370,11 +370,6 @@ const playDialogueAudio = (isAutoPlay = false) => {
|
|
|
dialogueAudio.value.currentTime = 0
|
|
dialogueAudio.value.currentTime = 0
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 如果是诗词类型,不播放音频
|
|
|
|
|
- if (currentDialogue.value?.type === 'poem') {
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
// 播放当前对话的语音
|
|
// 播放当前对话的语音
|
|
|
if (currentDialogue.value?.voiceoverUrl) {
|
|
if (currentDialogue.value?.voiceoverUrl) {
|
|
|
const audio = new Audio(currentDialogue.value.voiceoverUrl)
|
|
const audio = new Audio(currentDialogue.value.voiceoverUrl)
|
|
@@ -505,22 +500,26 @@ const playSequence = () => {
|
|
|
// 显示诗词并替换内容为最新的诗词
|
|
// 显示诗词并替换内容为最新的诗词
|
|
|
showPoem.value = true
|
|
showPoem.value = true
|
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
|
- // 自动切换到下一条对话
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- if (!playNext(true)) {
|
|
|
|
|
- // 播放完毕,检查是否是最后一个对话
|
|
|
|
|
- if (isAtLastDialogue()) {
|
|
|
|
|
- console.log('诗词序列:已到达最后一个对话,触发 dialogueEnded 事件');
|
|
|
|
|
- emit('dialogueEnded', props.isLastCourse);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否有语音
|
|
|
|
|
+ if (currentDialogue.value?.voiceoverUrl) {
|
|
|
|
|
+ // 播放诗词语音
|
|
|
|
|
+ playDialogueAudio(true)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 没有语音,直接切换到下一条对话
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ if (!playNext(true)) {
|
|
|
|
|
+ // 播放完毕,检查是否是最后一个对话
|
|
|
|
|
+ if (isAtLastDialogue()) {
|
|
|
|
|
+ console.log('诗词序列:已到达最后一个对话,触发 dialogueEnded 事件');
|
|
|
|
|
+ emit('dialogueEnded', props.isLastCourse);
|
|
|
|
|
+ }
|
|
|
|
|
+ // 播放完毕
|
|
|
|
|
+ isPlaying.value = false
|
|
|
|
|
+ stopAllAudio()
|
|
|
}
|
|
}
|
|
|
- isPlaying.value = false
|
|
|
|
|
- stopAllAudio()
|
|
|
|
|
- }
|
|
|
|
|
- }, 500)
|
|
|
|
|
- } else if (currentDialogue.value?.type === 'video') {
|
|
|
|
|
- // 视频类型对话,不自动播放下一条,等待视频播放完毕
|
|
|
|
|
- showPoem.value = false
|
|
|
|
|
- currentPoemContent.value = ''
|
|
|
|
|
|
|
+ }, 500)
|
|
|
|
|
+ }
|
|
|
} else {
|
|
} else {
|
|
|
// 播放当前对话语音,传递isAutoPlay参数
|
|
// 播放当前对话语音,传递isAutoPlay参数
|
|
|
playDialogueAudio(true)
|
|
playDialogueAudio(true)
|
|
@@ -579,13 +578,11 @@ const playPrevious = () => {
|
|
|
|
|
|
|
|
// 播放背景音
|
|
// 播放背景音
|
|
|
playBackgroundAudio()
|
|
playBackgroundAudio()
|
|
|
- // 播放当前对话语音(非诗词类型)
|
|
|
|
|
- if (currentDialogue.value?.type !== 'poem') {
|
|
|
|
|
- if (isPlaying.value) {
|
|
|
|
|
- playDialogueAudio(true)
|
|
|
|
|
- } else {
|
|
|
|
|
- playDialogueAudio()
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // 播放当前对话语音
|
|
|
|
|
+ if (isPlaying.value) {
|
|
|
|
|
+ playDialogueAudio(true)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ playDialogueAudio()
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -616,10 +613,21 @@ const playNext = (isAutoPlay = false) => {
|
|
|
// 显示诗词并替换内容为最新的诗词
|
|
// 显示诗词并替换内容为最新的诗词
|
|
|
showPoem.value = true
|
|
showPoem.value = true
|
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
|
- // 自动切换到下一条对话,不需要播放音频
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- playNext(isAutoPlay)
|
|
|
|
|
- }, 500)
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否有语音
|
|
|
|
|
+ if (currentDialogue.value?.voiceoverUrl) {
|
|
|
|
|
+ // 播放诗词语音
|
|
|
|
|
+ if (isPlaying.value) {
|
|
|
|
|
+ playDialogueAudio(true)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ playDialogueAudio()
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 没有语音,直接切换到下一条对话
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ playNext(isAutoPlay)
|
|
|
|
|
+ }, 500)
|
|
|
|
|
+ }
|
|
|
return true
|
|
return true
|
|
|
} else if (currentDialogue.value?.type === 'video') {
|
|
} else if (currentDialogue.value?.type === 'video') {
|
|
|
// 视频类型对话,隐藏诗词,不自动播放下一条
|
|
// 视频类型对话,隐藏诗词,不自动播放下一条
|
|
@@ -648,10 +656,21 @@ const playNext = (isAutoPlay = false) => {
|
|
|
// 显示诗词
|
|
// 显示诗词
|
|
|
showPoem.value = true
|
|
showPoem.value = true
|
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
|
- // 自动切换到下一条对话,不需要播放音频
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- playNext(isAutoPlay)
|
|
|
|
|
- }, 500)
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否有语音
|
|
|
|
|
+ if (currentDialogue.value?.voiceoverUrl) {
|
|
|
|
|
+ // 播放诗词语音
|
|
|
|
|
+ if (isPlaying.value) {
|
|
|
|
|
+ playDialogueAudio(true)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ playDialogueAudio()
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 没有语音,直接切换到下一条对话
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ playNext(isAutoPlay)
|
|
|
|
|
+ }, 500)
|
|
|
|
|
+ }
|
|
|
} else if (currentDialogue.value?.type === 'video') {
|
|
} else if (currentDialogue.value?.type === 'video') {
|
|
|
// 视频类型对话,隐藏诗词
|
|
// 视频类型对话,隐藏诗词
|
|
|
showPoem.value = false
|
|
showPoem.value = false
|
|
@@ -682,12 +701,12 @@ const maskLayer = ref(null)
|
|
|
const startPlayback = () => {
|
|
const startPlayback = () => {
|
|
|
// 设置开始播放状态
|
|
// 设置开始播放状态
|
|
|
isPlaybackStarted.value = true
|
|
isPlaybackStarted.value = true
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 开始播放背景视频
|
|
// 开始播放背景视频
|
|
|
if (backgroundVideoRef.value) {
|
|
if (backgroundVideoRef.value) {
|
|
|
backgroundVideoRef.value.play().catch(e => console.error('背景视频播放失败:', e))
|
|
backgroundVideoRef.value.play().catch(e => console.error('背景视频播放失败:', e))
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 消失动画
|
|
// 消失动画
|
|
|
if (maskLayer.value) {
|
|
if (maskLayer.value) {
|
|
|
maskLayer.value.classList.add('fade-out')
|
|
maskLayer.value.classList.add('fade-out')
|
|
@@ -702,10 +721,17 @@ const startPlayback = () => {
|
|
|
// 显示诗词
|
|
// 显示诗词
|
|
|
showPoem.value = true
|
|
showPoem.value = true
|
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
currentPoemContent.value = currentDialogue.value.content
|
|
|
- // 自动切换到下一条对话
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- playNext()
|
|
|
|
|
- }, 500)
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否有语音
|
|
|
|
|
+ if (currentDialogue.value?.voiceoverUrl) {
|
|
|
|
|
+ // 播放诗词语音
|
|
|
|
|
+ playDialogueAudio()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 没有语音,直接切换到下一条对话
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ playNext()
|
|
|
|
|
+ }, 500)
|
|
|
|
|
+ }
|
|
|
} else if (currentDialogue.value?.type === 'video') {
|
|
} else if (currentDialogue.value?.type === 'video') {
|
|
|
// 视频类型对话,隐藏诗词
|
|
// 视频类型对话,隐藏诗词
|
|
|
showPoem.value = false
|
|
showPoem.value = false
|