同时播放两个语音时上一个没有停止动画

resources/assets/js/components/AudioManager.vue

@@ -30,7 +30,6 @@ export default {
             audioTimer: null,
             audioId: 0,
             audioSrc: null,
-            callback: null,
         }
     },
     mounted() {
@@ -44,9 +43,7 @@ export default {
     },
     watch: {
         audioPlay(play) {
-            if (typeof this.callback === "function") {
+            this.updateState();
-                this.callback(play)
-            }
             //
             this.audioTimer && clearTimeout(this.audioTimer);
             if (!play) {
@@ -57,6 +54,9 @@ export default {
                     }
                 }, 3000)
             }
+        },
+        audioSrc() {
+            this.updateState();
         }
     },
     methods: {
@@ -75,8 +75,7 @@ export default {
                 }
                 return
             }
-            const {id, src, callback} = msg
+            const {id, src} = msg
-            this.callback = callback || null;
             if (src === this.audioSrc) {
                 if (ended) {
                     audio.play()
@@ -94,6 +93,10 @@ export default {
             }
         },
 
+        updateState() {
+            this.$store.state.audioPlaying = this.audioPlay && this.audioSrc ? this.audioSrc : null;
+        },
+
         overAudio() {
             this.audioPlay = false;
         },

resources/assets/js/pages/manage/components/DialogView.vue

@@ -33,7 +33,7 @@
                 </div>
                 <!--录音-->
                 <div v-else-if="msgData.type === 'record'" class="content-record no-dark-content">
-                    <div class="dialog-record" :class="{playing: recordPlay}" :style="recordStyle(msgData.msg)" @click="playRecord">
+                    <div class="dialog-record" :class="{playing: audioPlaying === msgData.msg.path}" :style="recordStyle(msgData.msg)" @click="playRecord">
                         <div class="record-time">{{recordDuration(msgData.msg.duration)}}</div>
                         <div class="record-icon taskfont"></div>
                     </div>
@@ -159,7 +159,6 @@ export default {
             popperLoad: 0,
             popperShow: false,
             timeShow: false,
-            recordPlay: false,
             operateEnter: false,
             allList: [],
         }
@@ -174,7 +173,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userToken', 'userId', 'dialogMsgs']),
+        ...mapState(['userToken', 'userId', 'dialogMsgs', 'audioPlaying']),
 
         viewClass() {
             const {msgData, operateAction, operateEnter} = this;
@@ -391,9 +390,6 @@ export default {
             Store.set('audioSubscribe', {
                 id: this.msgData.id,
                 src: this.msgData.msg.path,
-                callback: (play) => {
-                    this.recordPlay = play;
-                }
             });
         },
 

resources/assets/js/store/state.js

@@ -7,6 +7,9 @@ const stateData = {
     // 浏览器宽度≤768返回true
     windowMax768: window.innerWidth <= 768,
 
+    // 播放中的音频地址
+    audioPlaying: null,
+
     // 路由记录
     routeHistorys: [],
     routeHistoryLast: {},