im/pages/conversation/chating/components/MessageItem/VoiceMessageRender.vue

<template>
	<view class="voice_message_container bg_container">
		<view @tap="handleAudio"
			:class="{'content-audio-container':true,'chat-audio-container-me':true}"
			:style="'width:'+((message.soundElem.duration)*2+130)+'rpx'">
			<view class="voice_icon" 
					:class="[ 
							{ voice_icon_right: isSender },
							{ voice_icon_left: !isSender },
							{ voice_icon_right_an: isSender && message.clientMsgID == storeCurrentMsg.clientMsgID},
							{ voice_icon_left_an: !isSender && message.clientMsgID == storeCurrentMsg.clientMsgID }
					]">
			</view>
			<view class="">{{message.soundElem.duration}}s</view>
		</view>
	</view>
</template>v

<script>
	import {mapGetters,mapActions} from "vuex";
	import util from "@/util"
	import md5 from "md5";
	export default {
		name: "VoiceMessageRender",
		components: {},
		props: {
			message: Object,
			isSender: {
				type: Boolean,
				default: false,
			},
			conversationID:String,
		},
		data() {
			return {
				src:"",
			};
		},
		computed:{
			...mapGetters(["storeCurrentMsg"]),	
		},
		created() {
			this.init();
		},
		methods: {
			async init(){
				//console.log(this.message);
				const self = this;
				let audio = this.message.soundElem;
				//soundPath
				// 如果有远程 snapshotUrl，则下载到 cachePath
				const snapshotUrl = audio.sourceUrl;
				const key = md5(snapshotUrl || '');
				const save_file_name = `audio_${key}.${audio.soundType}`;
				const cachePath = `${this.conversationID}/${save_file_name}`;
				if (typeof plus === 'undefined' || !cachePath) return;
				util.cacheFile(snapshotUrl,cachePath,(fn)=>{
					self.src = fn;
					//console.log(fn);
				},(e)=>{
					console.log(e);
				},(e)=>{
					console.log(e);
				});
			},
			handleAudio(){
				const event = {
					message:this.message,
					src:this.src,
					type:'audio_msg_click'
				};
				this.$emit("messageEvent",event);
			}
		},
	};
</script>

<style lang="scss" scoped>
	//语音信息样式
	.content-audio-container {
		border-radius: 10rpx;
		padding: 0 20rpx;
		/* #ifndef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
		display: flex;
		flex-direction: row;
		align-items: center;

		.voice_icon {
			height: 34rpx;
			width: 34rpx;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.voice_icon_right {
			background-image: url('@/static/images/chat/voice/voice-left-3.png');
			margin-left: 10rpx;
		}

		.voice_icon_left {
			background-image: url('@/static/images/chat/voice/voice-right-3.png');
			margin-right: 10rpx;
		}

		.voice_icon_right_an {
			animation: voiceAn_right 1s linear alternate infinite;
		}

		.voice_icon_left_an {
			animation: voiceAn_left 1s linear alternate infinite;
		}

		@keyframes voiceAn_right {
			0% {
				background-image: url('@/static/images/chat/voice/voice-left-1.png');
			}

			50% {
				background-image: url('@/static/images/chat/voice/voice-left-2.png');
			}

			100% {
				background-image: url('@/static/images/chat/voice/voice-left-3.png');
			}
		}

		@keyframes voiceAn_left {
			0% {
				background-image: url('@/static/images/chat/voice/voice-right-1.png');
			}

			50% {
				background-image: url('@/static/images/chat/voice/voice-right-2.png');
			}

			100% {
				background-image: url('@/static/images/chat/voice/voice-right-3.png');
			}
		}
	}
</style>