文字转语音 4.22

ant-design-vue-jeecg/src/App.vue

@@ -21,7 +21,7 @@ export default {
       // 定时器ID
       timer: null,
       // 定时器周期
-      millisec: 30000,
+      millisec: 10000,
       url: {
         list: "/org.jeecg.modules.message/zySpeechMessage/list",
         edit: "/org.jeecg.modules.message/zySpeechMessage/edit",
@@ -64,34 +64,42 @@ export default {
       } else {
         console.log("sorry,this browser,not supported TTS!!!")
       }
-      // this.speech.setLanguage('zh-CN');
       this.speech.init({
         'volume': 1,
-        // 'lang': 'en-GB',
         'lang': 'zh-CN',
         'rate': 1,
         'pitch': 1,
-        'voice':'Google UK English Male',
         'splitSentences': true,
-      }).then((data) => {
-        console.log('语音播报初始化完成...,配置参数:',data)
+      }).then((conf) => {
+        console.log('语音播报初始化完成...,Speech配置参数:', conf)
       }).catch(e => {
         console.error("An error occured while init : ", e)
       })
     },
     //语音播报
     MySpeak(obj) {
-      console.log("MySpeak()接受到的消息:" + JSON.stringify(obj))
-      this.speech.speak({text: obj['message']}).then(() => {
-        // console.log("MySpeak()播报完成...")
-      })
-      console.log("MySpeak()播报完成...")
-      // this.updateMessageStatus(obj['id']);
+      let mess = obj['message'];
+      console.log("----------speak()接受到的消息-----------【" + mess + "】");
+      this.speech.speak({
+        text: mess,
+        listeners: {
+          //开始播放
+          onstart: () => {
+            console.log("Start utterance")
           },
-
-    speak() {
-      this.speech.speak({text: "欢迎关注小编"}).then(() => {
-        console.log("播报完成")
+          //判断播放是否完毕
+          onend: () => {
+            // console.log("End utterance");
+            console.log("------------delete----------【" + mess + "】消息播报完成,删除该消息")
+            this.updateMessageStatus(obj['id']);
+          },
+          //恢复播放
+          onresume: () => {
+            console.log("Resume utterance")
+          },
+        },
+      }).then(() => {
+        // console.log("消息" + obj['id'] + "播报完成")
       })
     },
 
@@ -101,15 +109,11 @@ export default {
       }
       getAction(this.url.list, parma).then((res) => {
         if (res.success) {
-          console.log("文字转语音消息列表>:" + JSON.stringify(res.result.records));
+          console.log("------------getMessageList----------文字转语音消息列表>>>:" + JSON.stringify(res.result.records));
           this.dataSource = res.result.records;
           this.dataSource.forEach(obj => {
             if (obj['status'] === '0') {
-              // this.speak();
               this.MySpeak(obj);
-              // console.log("MySpeak()播报开始...");
-              // this.speech.speak(obj['message']).then(() => {
-              // this.speak();
             }
           })
         } else {
@@ -122,15 +126,18 @@ export default {
     },
 
     updateMessageStatus(id) {
-      console.log("删除已播报消息：" + id);
+      // console.log("删除已播报消息：" + id);
       let parma = {
         "id": id,
         "status": '1',
       }
       putAction(this.url.edit, parma).then((res) => {
         if (res.success) {
-          this.dataSource.pop().id;
-          console.log(id + ">>>>>>>()之后：" + JSON.stringify(this.dataSource))
+          for (let i = 0; i < this.dataSource.length; i++) {
+            if (this.dataSource[i].id === id) {
+              this.dataSource.splice(i, 1);
+            }
+          }
         } else {
           this.$message.warning(res.message)
         }
@@ -142,14 +149,13 @@ export default {
       console.log("timer初始化完成:" + new Date().toLocaleString())
       //上次播报列表播报完后，再获取新数据
       this.timer = setInterval(() => {
-        // debugger
+        console.log("---未播报消息数量:", this.dataSource.length)
         if (this.dataSource.length === 0) {
-          console.log("timer is exec,the current time:" + new Date().toLocaleString())
+          console.log("--------timer is exec,the current time:" + new Date().toLocaleString())
           this.getMessageList();
         } else {
-          console.log("hole down")
+          console.log("-------上次消息列表未处理完---HOLD DOWN")
         }
-
       }, this.millisec)
     },
 

ant-design-vue-jeecg/src/views/message/Speak-TTS.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="mySpeak" icon="search" style="margin-left: 8px">mySpeak</a-button>
+              <a-button type="primary" @click="play" icon="search" style="margin-left: 8px">读取</a-button>
+              <a-button type="primary" @click="goahead" icon="search" style="margin-left: 8px">前进</a-button>
+              <a-button type="primary" @click="paused" icon="reload" style="margin-left: 8px">暂停</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import Speech from 'speak-tts'
+
+export default {
+  data() {
+    return {
+      speech: null
+    }
+  },
+  mounted() {
+    this.SpeechInit()
+  },
+  methods: {
+    SpeechInit() {
+      this.speech = new Speech()
+      this.speech.setLanguage('zh-CN')
+
+     /* this.speech.init({
+        'volume': 1,
+        // 'lang': 'en-US',
+        'lang': 'zh-CN',
+        'rate': 1,
+        'pitch': 1,
+        // 'voice':'Google UK English Male',
+        'splitSentences': true,
+        'listeners': {
+          'onvoiceschanged': (voices) => {
+            console.log("Event voiceschanged", voices)
+          }
+        }
+      })*/
+
+      // this.speech.init({
+      //   'volume': 1,
+      //   'lang': 'en-GB',
+      //   'rate': 1,
+      //   'pitch': 1,
+      //   'voice':'Google UK English Male',
+      //   'splitSentences': true,
+      //   'listeners': {
+      //     'onvoiceschanged': (voices) => {
+      //       console.log("Event voiceschanged", voices)
+      //     }
+      //   }
+      // }).then((conf) => {
+      //   console.log("the speech init,the config:",conf)
+      // })
+    },
+
+    mySpeak() {
+      this.speech.speak({
+        text: 'Hello, how are you today ?',
+      }).then(() => {
+        console.log("Success !")
+      }).catch(e => {
+        console.error("An error occurred :", e)
+      })
+    },
+
+
+    //播放按钮
+    play() {
+      this.speech.speak({
+        text: "today ,tom收款203230元",
+        listeners: {
+          //开始播放
+          onstart: () => {
+            console.log("Start utterance")
+          },
+          //判断播放是否完毕
+          onend: () => {
+            console.log("End utterance");
+          },
+          //恢复播放
+          onresume: () => {
+            console.log("Resume utterance")
+          },
+        },
+      }).then(() => {
+        console.log("读取成功--------------------------------")
+      })
+    },
+    //暂停
+    paused() {
+      this.speech.pause();
+    },
+    //从暂停处继续播放
+    goahead() {
+      this.speech.resume();
+      console.log("继续播放-----------------------------")
+    },
+
+    //离开页面取消语音
+    // destroyed() {
+    //   this.speech.cancel();
+    // },
+  }
+}
+</script>

ant-design-vue-jeecg/src/views/message/ZySpeechMessageList.vue

@@ -218,8 +218,23 @@ export default {
     //语音播报
     MySpeak(message) {
       console.log("MySpeak()接受到的消息:" + message)
-      this.speech.speak({text: message}).then(() => {
-        // alert("MySpeak()播报完成...");
+      this.speech.speak({
+        text: message,
+        listeners: {
+          //开始播放
+          onstart: () => {
+            console.log("Start utterance")
+          },
+          //判断播放是否完毕
+          onend: () => {
+            console.log("End utterance");
+          },
+          //恢复播放
+          onresume: () => {
+            console.log("Resume utterance")
+          },
+        },
+      }).then(() => {
         console.log("MySpeak()播报完成...")
       })
     },

ant-design-vue-jeecg/src/views/system/UserAnnouncementList.vue

@@ -193,11 +193,42 @@ export default {
 
     //语音播报
     MySpeak() {
-      this.speech.speak({text: "测试javascript语音合成"}).then(() => {
+      this.speech.speak({
+        text: "测试javascript语音合成",
+        listeners: {
+          //开始播放
+          onstart: () => {
+            console.log("Start utterance")
+          },
+          //判断播放是否完毕
+          onend: () => {
+            console.log("End utterance");
+          },
+          //恢复播放
+          onresume: () => {
+            console.log("Resume utterance")
+          },
+        },
+      }).then(() => {
         // alert("MySpeak()播报完成...");
-        console.log("MySpeak()播报完成...")
+        console.log("MySpeak()---------------播报完成...")
       })
-    }
+    },
+
+    //暂停
+    paused() {
+      this.speech.pause();
+    },
+    //从暂停处继续播放
+    goahead() {
+      this.speech.resume();
+      console.log("继续播放-----------------------------")
+    },
+
+    //离开页面取消语音
+    // destroyed() {
+    //   this.speech.cancel();
+    // },
   }
 }
 </script>