追加自动播放

pages/newEnglish/components/useAudio.js

@@ -16,7 +16,7 @@ audioContext = uni.createInnerAudioContext(); // 单例模式[3](@ref)
 audioContext.onEnded(() => {
 	// console.log('触发播放结束')
 	// 播放结束
-	uni.$emit('danci-audio-ended')
+	uni.$emit('danci-audio-ended', code)
 })
 audioContext.onPlay(() => {
 	// 播放

pages/newEnglish/components/useYinbiao.js

@@ -0,0 +1,75 @@
+import {ref} from "vue"
+import {
+    audioPlayer,
+    useAudioCache,
+} from "./useAudio.js";
+
+export function useYinBiaoAutoPlay () {
+    const AudioP = new audioPlayer();
+    const {
+        cacheAudio,
+    } = useAudioCache();
+
+    const current = ref(0);
+    const list = ref([]);
+    let code = null;
+    const isAutoPlaying = ref(false);
+
+    async function handlePlay() {
+        isAutoPlaying.value = true;
+        code = new Date().getTime();
+        const activeYin = {
+            url: list.value[current.value].yinpin,
+            code
+        }
+        const cachedPath = await cacheAudio(activeYin.url);
+        if (cachedPath && cachedPath.includes('.mp3')) {
+            AudioP.play(cachedPath, code);
+        } else {
+            uni.showToast({
+                title: '音频加载失败',
+                icon: 'none'
+            });
+        }
+    }
+
+    function initListen() {
+        uni.$on('danci-audio-ended', (mCode) => {
+
+            if (code !== mCode) {
+                isAutoPlaying.value = false;
+                return;
+            }
+
+            if (current.value<list.value.length-1) {
+                current.value = current.value+1;
+                // 继续播放第二音频
+                handlePlay();
+            } else {
+                // 播放结束
+                isAutoPlaying.value = false;
+            }
+        })
+    }
+
+    function removeListen() {
+
+        uni.$off('danci-audio-ended')
+    }
+
+
+    function playYinbiaoAuto(clist) {
+        current.value = 0
+        list.value = clist;
+        // 执行首次播放
+        handlePlay();
+    }
+
+    // 初始化首次监听
+    initListen();
+    return {
+        playYinbiaoAuto,
+        isAutoPlaying,
+        removeListen
+    }
+}

pages/newEnglish/components/xuePage.vue

@@ -88,6 +88,7 @@
 	import {
 		reactive,
 		computed,
+    onUnmounted
 	} from 'vue';
 	import {
 		getUserIdentity,
@@ -97,7 +98,9 @@
 		audioPlayer,
 		useAudioCache
 	} from './useAudio.js';
+  import {useYinBiaoAutoPlay} from "./useYinbiao.js"
 
+  const { playYinbiaoAuto,isAutoPlaying,removeListen } = useYinBiaoAutoPlay();
 	const emits = defineEmits(['play-audio', 'goXiangjie'])
 	const userCode = getUserIdentity();
 	const {
@@ -105,6 +108,9 @@
 		clearAudioCache
 	} = useAudioCache();
 
+  onUnmounted(() => {
+    removeListen();
+  })
 
 	const data = reactive({
 		isPlaying: false,
@@ -140,11 +146,19 @@
 	}
 
 	function handlePindu() {
+    // 自动播放中不允许切换
+    if (isAutoPlaying.value) return
+    if (data.isPindu) return
 		data.isPindu = true
+    playYinbiaoAuto(props.activeWord.pindu)
 	}
 
 	function handleYinjie() {
+    // 自动播放中不允许切换
+    if (isAutoPlaying.value) return
+    if (!data.isPindu) return
 		data.isPindu = false
+    playYinbiaoAuto(props.activeWord.yinjie)
 	}
 
 	function goXiangjie() {