结语部分语音播放

src/components/Interaction.vue

@@ -25,7 +25,6 @@ const props = defineProps({
 })
 
 const current = computed(() => props.list[props.currentTimeIdx])
-console.log(current, current.value, current.info, current.value.info, current.value.info.voiceDuration);
 
 let timer = null
 const isShowDialog = ref(true)

src/components/times/conclusion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home" ref="conclusionHome$">
     <div class="conclusion">
       <SquareWord :word="info.textCn" />
       <ul class="c-ul">
@@ -20,14 +20,25 @@
       </li>
     </ul>
 
+    <audio
+      v-show="false"
+      ref="conclusionAudio$"
+      :src="getAudioUrl(`结语.mp3`)"
+      controls
+      @timeupdate="onAudioCurTimeChange"
+    />
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, watch, ref, onMounted } from 'vue'
 import SquareWord from "@/components/SquareWord.vue";
 import timeList from "@/data/index";
 
+const conclusionHome$ = ref(null)
+const conclusionAudio$ = ref(null)
+const getAudioUrl = utils.getAudioUrl
+
 const props = defineProps({
   info: Object
 })
@@ -47,7 +58,45 @@ const fixList = computed(() => {
 }
 )
 
+const intersectionRatio = ref(0)
+const intersectionObserverForAudio = new IntersectionObserver((entries) => {
+  let entry = entries[entries.length - 1]
+  intersectionRatio.value = entry.intersectionRatio
+}, {
+  root: document.getElementsByClassName('long-image')[0],
+  threshold: [
+    0.0,
+    0.1,
+    0.2,
+    0.3,
+    0.4,
+    0.5,
+    0.6,
+    0.7,
+    0.8,
+    0.9,
+    1.0
+  ]
+})
+onMounted(() => {
+  intersectionObserverForAudio.observe(conclusionHome$.value)
+})
 
+watch(intersectionRatio, (vNew, vOld) => {
+  if (vNew > 0) {
+    if (conclusionAudio$.value.paused && vOld <= 0 /* && !this.$isSafari */) { // safari里只能在用户操作回调函数中成功调用play。
+      conclusionAudio$.value.currentTime = 0
+      conclusionAudio$.value.play()
+    }
+  } else {
+    if (!conclusionAudio$.value.paused && vOld > 0 /* && !this.$isSafari */) {
+      conclusionAudio$.value.pause()
+    }
+  }
+  setTimeout(() => {
+    conclusionAudio$.value.volume = vNew
+  }, 0)
+})
 </script>
 
 <style lang="scss" scoped>

src/data/index.js

@@ -366,7 +366,7 @@ export default [
     id: 'conclusion',
     info: {
       textCn: '结语',
-      voiceDuration: 30,
+      voiceDuration: 22,
       loopAudio: false,
       leftInfo: [
         '游玩到这里就告一段落了，苏裱（岭南苏裱）装裱修复技艺让书画成为历史的记忆保存下来，而这幅“唐家湾记忆”非遗长卷，就由你我来共同守护，使其历百年而不湮，让非遗之美光彩如初。',