修改

src/components/word/Pronunciation.vue

@@ -18,8 +18,10 @@
 			</view>
 		</view>
 		<view class="listen" @click="play">
-			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/laba2x.png"
-				mode="aspectFit" class="listenIcon"></image>
+			<!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/laba2x.png"
+				mode="aspectFit" class="listenIcon"></image> -->
+			<i class="icon_audio_default" v-if="!isPlay"></i>
+			<i class="icon_audio_playing" v-else></i>
 		</view>
 		<view class="listenText">
 			播放读音
@@ -63,13 +65,22 @@
 			}
 		},
 		setup(props) {
+			const data = reactive({
+				isPlay: false
+			})
 			const methods = {
 				play() {
-					innerAudioContext.src=`https://fanyi.baidu.com/gettts?lan=jp&text=${encodeURIComponent(props.item.WordContent)}&spd=3&source=web`
+					innerAudioContext.src =
+						`https://fanyi.baidu.com/gettts?lan=jp&text=${encodeURIComponent(props.item.WordContent)}&spd=3&source=web`
 					innerAudioContext.play()
+					data.isPlay = true;
+					innerAudioContext.onEnded((e)=>{
+						data.isPlay = false;
+					})
 				}
 			}
 			return {
+				...toRefs(data),
 				...methods
 			};
 		}
@@ -77,6 +88,51 @@
 </script>
 
 <style scoped>
+	.icon_audio_default {
+		background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
+		width: 18px;
+		height: 25px;
+		vertical-align: middle;
+		display: inline-block;
+		-webkit-background-size: 54px 25px;
+		background-size: 54px 25px;
+		background-position: -36px center;
+	}
+
+	.icon_audio_playing {
+		background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
+		width: 18px;
+		height: 25px;
+		vertical-align: middle;
+		display: inline-block;
+		-webkit-background-size: 54px 25px;
+		background-size: 54px 25px;
+		-webkit-animation: audio_playing 1s infinite;
+		background-position: 0px center;
+	}
+
+	@-webkit-keyframes audio_playing {
+		30% {
+			background-position: 0px center;
+		}
+
+		31% {
+			background-position: -18px center;
+		}
+
+		61% {
+			background-position: -18px center;
+		}
+
+		61.5% {
+			background-position: -36px center;
+		}
+
+		100% {
+			background-position: -36px center;
+		}
+	}
+
 	.wordPronItem {
 		width: 640rpx;
 		height: 990rpx;
@@ -160,4 +216,4 @@
 		color: #B8B8B8;
 		text-align: center;
 	}
-</style>
\ No newline at end of file
+</style>