语音消息优化

pages/im/components/showMessage.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/im/components/showVoice.vue

@@ -2,10 +2,10 @@
     <view class="">
         <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
         <view class="msg--voice">
-            <view class="voice" :class="isRemote ? 'left': 'right'" @click="onPlayMsg">
-                <image v-if="!isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+            <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" @click="onPlayMsg">
+                <image v-if="isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                <image v-else class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
                 <text class="duration">{{ duration }}"</text>
-                <image v-if="isRemote" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
             </view>
             <u-badge isDot :show="message.content.local =='' && isRemote" />
         </view>
@@ -29,6 +29,12 @@
                 default: false
             }
         },
+        data() {
+            return {
+                onPlay: false,
+                innerAC: null
+            }
+        },
         computed: {
             duration() {
                 return this.message.content.duration
@@ -42,6 +48,14 @@
                 }
             }
         },
+        mounted() {
+            // 这样能临时解决，但是会一直监听
+            uni.$on('onVoiceMessagePlay', (messageId) => {
+                if (this.message.messageId != messageId) {
+                    this.stopPlayVoice()
+                }
+            })
+        },
         methods: {
             // 播放语音消息
             onPlayMsg() {
@@ -62,17 +76,37 @@
                 }
             },
             playMsg(path) {
-                uni.$emit('onVideoMessagePlay')
-                const innerAudioContext = uni.createInnerAudioContext()
-                innerAudioContext.src = path
-                innerAudioContext.autoplay = true
-                innerAudioContext.onStop(resStop => {
-                    uni.$emit('onVideoMessageStop')
-                    innerAudioContext.destroy()
+                console.log('准备播放', this.message.content);
+                this.innerAC = uni.createInnerAudioContext()
+                this.innerAC.src = path
+                this.innerAC.autoplay = false
+                this.innerAC.onCanplay(res => {
+                    this.innerAC.play()
                 })
-                innerAudioContext.onError(err => {
-                    console.log(err);
+                this.innerAC.onPlay(res => {
+                    this.onPlay = true
+                    uni.$emit('onVoiceMessagePlay', this.message.messageId)
                 })
+                this.innerAC.onEnded(res => {
+                    this.innerAC.stop()
+                })
+                this.innerAC.onStop(() => {
+                    this.onPlay = false
+                    this.innerAC.destroy()
+                    this.innerAC = null
+                    uni.$emit('onVoiceMessageEnded', this.message.messageId)
+                })
+                this.innerAC.onError(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '语音播放失败'
+                    })
+                })
+            },
+            stopPlayVoice() {
+                if (this.innerAC) {
+                    this.innerAC.stop()
+                }
             }
         }
     }
@@ -111,6 +145,10 @@
                 border-radius: 0 20rpx 20rpx 20rpx;
                 background: white;
 
+                &.onPlay {
+                    background-color: #EEEEEE;
+                }
+
                 .duration {
                     color: #333;
                     font-size: 30rpx;
@@ -120,6 +158,11 @@
             &.right {
                 border-radius: 20rpx 0 20rpx 20rpx;
                 background: $main-color;
+                flex-direction: row-reverse;
+
+                &.onPlay {
+                    background-color: darken($main-color, 10);
+                }
 
                 .duration {
                     color: white;