小狮子说话 适配各个课程

src/assets/lionSpeach.json

@@ -0,0 +1,178 @@
+{
+  "1": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "2": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "3": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "4": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "5": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "6": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "7": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "8": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "9": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "10": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "11": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "12": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "13": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "14": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "15": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ],
+  "16": [
+    {
+      "开始时间": 0,
+      "结束时间": 6,
+      "语句": "徽州是一个山清水秀的地方，独特的地理环境与历史背景，孕育了内涵丰富、极具特色的徽文化。"
+    },
+    {
+      "开始时间": 6,
+      "语句": "它体现在了徽州人衣、食、住、行的方方面面。"
+    }
+  ]
+}

src/store/index.js

@@ -13,6 +13,7 @@ function resetGameProgress() {
             name: innerItem.name,
             watchVideoProgress: [true, true, true, true, true, true, true, true, true, true, ],
             learnVideoProgress: [true, true, true, true, true, true, true, true, true, true, ],
+            hasLionSpoke: false,
           }
         })
       }
@@ -27,7 +28,6 @@ export default createStore({
   state: {
     hasPlayedStartupVideo: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
     hasPlayedGameRule: true, // 新需求：不显示弹窗
-    hasLionSpoke: false,
     gameProgress: localStorage.getItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`) ? JSON.parse(localStorage.getItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`)) : resetGameProgress()
   },
   getters: {
@@ -39,8 +39,8 @@ export default createStore({
     recordGameRulePlayed(state) {
       state.hasPlayedGameRule = true
     },
-    recordLionSpoke(state) {
-      state.hasLionSpoke = true
+    recordLionSpoke(state, { sceneL2Id, sceneL3Id }) {
+      state.gameProgress.jigsawProgress[sceneL2Id].children[sceneL3Id].hasLionSpoke = true
     },
     recordWatchProgress(state, { sceneL2Id, sceneL3Id, timeIdx }) {
       try {

src/views/Level3.vue

@@ -83,7 +83,7 @@
     <audio
       v-if="lionSpeachTextList"
       ref="lionSpeachAudio"
-      :src="require(`@/assets/audios/lionSpeach-${$route.query.sceneIdxLevel2}-${$route.query.sceneIdxLevel3}.mp3`)"
+      :src="require(`@/assets/audios/第${lessonNumber}课.mp3`)"
       @ended="onAudioEnd"
       @timeupdate="onAudioTimeUpdate"
     />
@@ -102,6 +102,7 @@ import {
 } from 'vue'
 import { useStore } from "vuex"
 import { useRoute, useRouter } from "vue-router"
+import lionSpeachInfo from "@/assets/lionSpeach.json"
 
 export default {
   name: 'Level3View',
@@ -112,64 +113,75 @@ export default {
     const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
 
     /**
-     * 狮子说话相关
+     * 狮子相关
      */
+    // 是否显示狮子
     const isShowLion = ref(false)
+    // 进入页面一秒后显示狮子
     setTimeout(() => {
       isShowLion.value = true
     }, 1000)
 
+    // 狮子是否说过话
+    const isLionSpoken = ref(store.state.gameProgress.jigsawProgress[Number(route.query.sceneIdxLevel2)].children[Number(route.query.sceneIdxLevel3)].hasLionSpoke)
+
+    // 狮子是否在说话
     const isLionSpeeking = ref(false)
-    if (!store.state.hasLionSpoke) {
+    // // 如果之前没说过话，则显示狮子后开始说话。todo: 每个具体level3场景对应一条记录
+    if (!isLionSpoken.value) {
       watch(isShowLion, (vNew) => {
         if (vNew) {
           // setTimeout(() => {
           isLionSpeeking.value = true
-          store.commit('recordLionSpoke')
+          store.commit('recordLionSpoke', {
+            sceneL2Id: Number(route.query.sceneIdxLevel2),
+            sceneL3Id: Number(route.query.sceneIdxLevel3),
+          })
           // }, 100)
         }
       })
     }
 
+    // 点击狮子后，酌情让狮子说话
     function onClickLion() {
-      if (store.state.hasLionSpoke && !isLionSpeeking.value) {
+      if (isLionSpoken.value && !isLionSpeeking.value) {
         isLionSpeeking.value = true
       }
     }
 
+    // 狮子语音audio元素及对其的操控
     const lionSpeachAudio = ref(null)
     watch(isLionSpeeking, (vNew) => {
       if (vNew) {
         lionSpeachAudio.value && lionSpeachAudio.value.play()
       }
     })
+    function onAudioEnd() {
+      isLionSpeeking.value = false
+    }
     onBeforeUnmount(() => {
       lionSpeachAudio.value && lionSpeachAudio.value.pause()
     })
 
-    const lionSpeachTextList = reactive([
-      {
-        startTime: 0,
-        endTime: 9,
-        content: '当我们来到徽州，总能看见许许多多门洞形状的建筑物，它就是“徽州三绝”之一的牌坊。',
-      },
-      {
-        startTime: 9,
-        endTime: Infinity,
-        content: '徽州因为拥有的牌坊数量众多，样式精美，也被誉为“牌坊之乡”。',
-      },
-    ])
-    const currentSpeachTextIdx = ref(null)
-    function onAudioEnd() {
-      isLionSpeeking.value = false
+    // 对应第几课
+    let lessonNumber = 0
+    for (let index = 0; index < Number(route.query.sceneIdxLevel2); index++) {
+      lessonNumber += config.sceneTree[index].children.length
     }
-    const isSpeachTextChanging = ref(false)
-    watch(currentSpeachTextIdx, (vNew) => {
-      isSpeachTextChanging.value = true
-      setTimeout(() => {
-        isSpeachTextChanging.value = false
-      }, 3000, { immediate: true })
+    lessonNumber += (Number(route.query.sceneIdxLevel3) + 1)
+
+    // 狮子说话的文本
+    const lionSpeachTextList = lionSpeachInfo[lessonNumber].map((item) => {
+      return {
+        startTime: item['开始时间'] || 0,
+        endTime: item['结束时间'] || Infinity,
+        content: item['语句'],
+      }
     })
+
+    // 当前在说哪一句
+    const currentSpeachTextIdx = ref(null)
+    // 根据音频播放进度判断当前在说哪一句
     const onAudioTimeUpdate = utils.throttle(() => {
       console.log(lionSpeachAudio.value.currentTime)
       for (let index = 0; index < lionSpeachTextList.length; index++) {
@@ -180,18 +192,28 @@ export default {
       }
     }, 1000)
 
+    // 是否在切换语句
+    const isSpeachTextChanging = ref(false)
+    watch(currentSpeachTextIdx, (vNew) => {
+      isSpeachTextChanging.value = true
+      setTimeout(() => {
+        isSpeachTextChanging.value = false
+      }, 3000, { immediate: true })
+    })
+
     return {
+      currentSpeachTextIdx,
       isLionSpeeking,
       isShowLion,
+      isSpeachTextChanging,
       lionSpeachAudio,
       lionSpeachTextList,
+      onAudioEnd,
+      onAudioTimeUpdate,
       onClickLion,
       unit,
       windowSizeWhenDesign,
-      onAudioEnd,
-      onAudioTimeUpdate,
-      currentSpeachTextIdx,
-      isSpeachTextChanging,
+      lessonNumber,
     }
   },
   data() {
@@ -200,7 +222,6 @@ export default {
   },
   computed: {
     ...mapState([
-      'hasLionSpoke',
     ]),
     sceneInfo() {
       return config.sceneTree[Number(this.$route.query.sceneIdxLevel2)].children[Number(this.$route.query.sceneIdxLevel3)]
@@ -225,9 +246,6 @@ export default {
     getMenuBgImgUrl() {
       return require(`@/assets/images/bg-menu-level3-length${this.sceneInfo.name.split(' ').join('').length}.png`)
     },
-    onclickRecord() {
-
-    },
   },
 }
 </script>