From 4c44bc26a6926c22245143ee2db66160bf0a3062 Mon Sep 17 00:00:00 2001
From: Jiang Jiang <eeg1412@gmail.com>
Date: Fri, 6 Aug 2021 14:01:26 +0900
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E9=98=9F=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/views/Chat.vue   | 70 +++++++++++++++++++++++++++++++------
 client/src/views/Live2d.vue | 63 +++++++++++++++++++++++++++------
 2 files changed, 113 insertions(+), 20 deletions(-)

diff --git a/client/src/views/Chat.vue b/client/src/views/Chat.vue
index 62dd2e2..b7c4bb4 100644
--- a/client/src/views/Chat.vue
+++ b/client/src/views/Chat.vue
@@ -29,6 +29,7 @@ export default {
   data() {
     return {
       chat: '',
+      chatList: [],
       chatShow: false,
       chatShowTimer: null,
       socket: null,
@@ -69,23 +70,72 @@ export default {
         if (url) {
           const speech = new Audio(url)
           speech.load()
-          speech.play()
+          speech
+            .play()
+            .then(() => {})
+            .catch(() => {
+              setTimeout(() => {
+                this.playNextChat()
+              }, this.chat.length * 300)
+            })
+          speech.onended = () => {
+            this.playNextChat()
+          }
+        } else {
+          setTimeout(() => {
+            this.playNextChat()
+          }, this.chat.length * 300)
         }
+      } else {
+        setTimeout(() => {
+          this.playNextChat()
+        }, this.chat.length * 300)
+      }
+    },
+    say(chat, voiceUrl) {
+      this.chat = chat
+      this.$nextTick(() => {
+        this.chatShow = true
+        this.playVoice(voiceUrl)
+      })
+      clearTimeout(this.chatShowTimer)
+      this.chatShowTimer = setTimeout(() => {
+        this.chatShow = false
+      }, this.chat.length * 1000)
+    },
+    addChat(chatData) {
+      let playFlag = false
+      if (this.chatList.length === 0) {
+        playFlag = true
+      }
+      this.chatList.push(chatData)
+      if (playFlag) {
+        this.playNextChat(true)
+      }
+    },
+    removeChat() {
+      if (this.chatList.length > 0) {
+        this.chatList.shift()
+      }
+    },
+    playNextChat(noremove) {
+      if (!noremove) {
+        this.removeChat()
+      }
+      const chatData = this.chatList[0]
+      if (chatData) {
+        this.say(chatData.chat, chatData.voiceUrl)
       }
     },
     toSocket() {
       this.socket = io.connect('/socketchat')
       this.socket.on('msg', (data) => {
+        const chatData = {
+          chat: data.message,
+          voiceUrl: data.voiceUrl,
+        }
+        this.addChat(chatData)
         console.log(data)
-        this.chat = data.message
-        this.$nextTick(() => {
-          this.chatShow = true
-          this.playVoice(data.voiceUrl)
-        })
-        clearTimeout(this.chatShowTimer)
-        this.chatShowTimer = setTimeout(() => {
-          this.chatShow = false
-        }, this.chat.length * 1000)
       })
       this.socket.on('getSettingData', (data) => {
         console.log(data)
diff --git a/client/src/views/Live2d.vue b/client/src/views/Live2d.vue
index 4804623..c25b0e2 100644
--- a/client/src/views/Live2d.vue
+++ b/client/src/views/Live2d.vue
@@ -26,6 +26,7 @@ export default {
       mode: null,
       model: null,
       app: null,
+      chatList: [],
       chat: '',
       chatShow: false,
       chatShowTimer: null,
@@ -137,7 +138,6 @@ export default {
             .then(() => {
               clearTimeout(this.sleepTimer)
               this.model.internalModel.motionManager.stopAllMotions()
-              console.log(123)
               this.$nextTick(() => {
                 this.mouthOpen = true
               })
@@ -145,12 +145,20 @@ export default {
             .catch(() => {
               this.mouthOpen = false
               this.randomMotion()
+              setTimeout(() => {
+                this.playNextChat()
+              }, this.chat.length * 300)
             })
 
           speech.onended = () => {
             this.mouthOpen = false
             this.randomMotion()
+            this.playNextChat()
           }
+        } else {
+          setTimeout(() => {
+            this.playNextChat()
+          }, this.chat.length * 300)
         }
       } else {
         clearTimeout(this.sleepTimer)
@@ -161,21 +169,56 @@ export default {
           this.mouthOpen = false
           this.randomMotion()
         }, this.chat.length * 500)
+        setTimeout(() => {
+          this.playNextChat()
+        }, this.chat.length * 300)
+      }
+    },
+    say(chat, voiceUrl) {
+      this.chat = chat
+      this.$nextTick(() => {
+        this.chatShow = true
+        this.playVoice(voiceUrl)
+      })
+      clearTimeout(this.chatShowTimer)
+      this.chatShowTimer = setTimeout(() => {
+        this.chatShow = false
+      }, this.chat.length * 1000)
+    },
+    addChat(chatData) {
+      let playFlag = false
+      if (this.chatList.length === 0) {
+        playFlag = true
+      }
+      this.chatList.push(chatData)
+      if (playFlag) {
+        this.playNextChat(true)
+      }
+    },
+    removeChat() {
+      if (this.chatList.length > 0) {
+        this.chatList.shift()
+      }
+    },
+    playNextChat(noremove) {
+      if (!noremove) {
+        this.removeChat()
+      }
+      const chatData = this.chatList[0]
+      if (chatData) {
+        this.say(chatData.chat, chatData.voiceUrl)
       }
     },
     toSocket() {
       this.socket = io.connect('/socketchat')
       this.socket.on('msg', (data) => {
+        const chatData = {
+          chat: data.message,
+          voiceUrl: data.voiceUrl,
+        }
+        this.addChat(chatData)
+
         console.log(data)
-        this.chat = data.message
-        this.$nextTick(() => {
-          this.chatShow = true
-          this.playVoice(data.voiceUrl)
-        })
-        clearTimeout(this.chatShowTimer)
-        this.chatShowTimer = setTimeout(() => {
-          this.chatShow = false
-        }, this.chat.length * 1000)
       })
       this.socket.on('getSettingData', (data) => {
         console.log(data)