uniProject/pages/newEnglish/components/audioTwo.vue

<template>
	<!-- 待播放 -->
	<icon class="yb-play-btn" v-if="!data.isPlaying" @click="handlePlay"></icon>
	<!-- 播放中 -->
	<icon class="yb-playing-btn" v-else></icon>
</template>

<script setup>
	import {
		reactive,
		computed,
		onUnmounted
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const props = defineProps({
		activeWord: {
			type: Object,
		},
	})

	const emits = defineEmits(['play-audio'])

	const data = reactive({
		isPlaying: false,
		code: null
	})

	onLoad(() => {
		uni.$on('danci-audio-ended', (code) => {
			data.isPlaying = false;
		})
		uni.$on('danci-audio-play', (code) => {
			if (data.code == code) {
				data.isPlaying = true;
			} else {
				data.isPlaying = false;
			}
		})
	})

	onUnmounted(() => {
		uni.$off('danci-audio-ended')
		uni.$off('danci-audio-play')
	})

	function handlePlay() {
		data.code = new Date().getTime()
		emits('play-audio', {
			url: props.activeWord.yinpin,
			code: data.code
		})
	}
</script>

<style>
</style>