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>详解 ></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,
		},
		activeWords: {
			type: Array
		},
	})
	let tabFlag = ref(1)
	// setTimeout(() => {
	// 	console.log('activeWord',props.activeWord)
	// })
	
	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>