uniProject/pages/newEnglish/components/learnContent.vue

<template>
	<view>
		<!-- 单词区 -->
		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
		<selectTypesVue activeSelect="1"></selectTypesVue>
		<view>{{activeWord.name}}</view>
		<view>{{activeWord.yinbiao}}</view>
		<view @click="playMainAudio">{{activeWord.yinpin}}</view>
		<view>{{activeWord.jianyi}}</view>
		<view @click="goXiangjie">详解 ></view>
		<view v-for="(item,index) in activeWord.yinjie" :key="index">
			<view>{{item.cigen}}</view>
			<view>{{item.yinbiao}}</view>
			<view>{{item.yinpin}}</view>
		</view>
		<view>自然拼读</view>
		<view>音节拆分</view>
		<view v-if="tabFlag ==1">
			<view>词根助记</view>
			<view>
				{{activeWord.cigen}}
			</view>
		</view>

		<view @click="clearFun">
			asdfasdfasfasdfdasdfasdfasfadsfasdfadsfasdfasd
		</view>

	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import audioManager from './audioManager'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	const props = defineProps({
		activeWord: {
			type: Object,
		},
		pageData: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})
	let tabFlag = ref(1)
	// setTimeout(() => {
	// 	console.log('activeWord',props.activeWord)
	// })
	const goXiangjie = () => {
		uni.redirectTo({
			url: '/pages/newEnglish/components/xiangjie?jieId='+props.pageData.jieId+'&wordId='+props.pageData.activeId
		})
	}
	const audioInfo = ref(null)

	// 初始化并缓存音频
	const initAudio = async () => {
		// 1. 从缓存获取已有信息
		const cachedInfo = audioManager.getAudioInfoFromStorage(props.activeWord.id)

		if (cachedInfo) {
			audioInfo.value = cachedInfo
		}

		// 2. 预加载所有音频（无论是否已有缓存）
		await audioManager.cacheWordAudios(props.activeWord)

		// 3. 更新音频信息
		audioInfo.value = audioManager.getAudioInfoFromStorage(props.activeWord.id)
	}

	// 播放主音频
	const playMainAudio = () => {
		if (audioInfo.value && audioInfo.value.main) {
			audioManager.playAudio(audioInfo.value.main)
		}
	}

	// 播放音节音频
	const playSyllable = (syllable) => {
		audioManager.playAudio(syllable)
	}


	// 播放频度音频
	const playFrequency = (frequency) => {
		audioManager.playAudio(frequency)
	}
	const clearFun = (frequency) => {
		audioManager.clearAllCache()
	}

	onMounted(() => {
		initAudio()
	})
</script>

<style>
</style>