sugarpark-mini-program/components/tui-chat/message-elements/audio-message/index.vue

<template>
	<view :class="'audio-message ' + (isMine ? 'my-audio' : '')">
		<image :src="`${assetsUrl}talk-voice-msg${isPlaying?'-playing':''}.png`" mode="aspectFit" class="audio-icon"></image>
		<view class="audio " @click="handlePlayAudioMessage" :style="'width: ' + 120 + 'rpx'">{{ '" ' + message.payload.second }}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			audio: {},
			assetsUrl:this.$util.assetsUrl,
			isPlaying:false
		};
	},

	components: {},
	props: {
		message: {
			type: Object,
			default: () => {}
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.message=newVal;
				// this.setData({
				// 	message: newVal
				// });
			},
			immediate: true,
			deep: true
		}
	},

	beforeMount() {
		this.audio = uni.createInnerAudioContext();
		this.audio.onPlay(() => {});
		this.audio.onEnded(() => {
			this.isPlaying=false;
		});
		this.audio.onError(e => {
			console.error(e, 'onError');
			// ios 音频播放无声，可能是因为系统开启了静音模式
			uni.showToast({
				icon: 'none',
				title: '该音频暂不支持播放'
			});
		});
	},

	methods: {
		handlePlayAudioMessage() {
			this.audio.src = this.message.payload.url;
			this.isPlaying=true;
			this.audio.play();
		}
	}
};
</script>
<style>
@import './index.css';
</style>