From a396f750416031a966b994ee7356323b3d9b0663 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 22 Feb 2022 11:13:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E6=B6=88=E6=81=AF=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/showMessage.vue |  8 +++
 pages/im/components/showVoice.vue   | 83 ++++++++++++++++++++++-------
 2 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 pages/im/components/showMessage.vue

diff --git a/pages/im/components/showMessage.vue b/pages/im/components/showMessage.vue
new file mode 100644
index 0000000..48d48ea
--- /dev/null
+++ b/pages/im/components/showMessage.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
diff --git a/pages/im/components/showVoice.vue b/pages/im/components/showVoice.vue
index 91b7b3e..0b2ed79 100644
--- a/pages/im/components/showVoice.vue
+++ b/pages/im/components/showVoice.vue
@@ -1,14 +1,14 @@
-<template>
-    <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>
-                <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>
+<template>
+    <view class="">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="msg--voice">
+            <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>
+            </view>
+            <u-badge isDot :show="message.content.local =='' && isRemote" />
+        </view>
     </view>
 </template>
 
@@ -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;