uniProject/pages/newEnglish/components/audioOne.vue

<template>
	<!-- 待播放 -->
	<view class="audio-play-btn" v-if="!data.isPlaying" @click="handlePlay"></view>
	<!-- 播放中 -->
	<view class="audio-playing-btn" v-else></view>
</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() {
		console.log('播放')
		data.code = new Date().getTime()
		emits('play-audio', {
			url: props.activeWord.yinpin,
			code: data.code
		})
	}
</script>

<style>
</style>