迁移广东基础党建

src/components/AiTransSpeech.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div class="AiTransSpeech" v-if="!noSpeech">
+      <button title="语音播报" @click="getSpeech">
+        <div>
+          <div class="iconfont" :class="{playing:loading}">&#xe6b1;</div>
+        </div>
+        <div>{{ text }}</div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AiTransSpeech",
+  props: {
+    src: String,
+    content: String
+  },
+  data() {
+    return {
+      audioContext: null,
+      speech: "",
+      loading: false,
+      text: "开始"
+    }
+  },
+  computed: {
+    speechString() {
+      return this.content ? this.content.replace(/<\/?.+?\/?>/g, "") : ""
+    },
+    noSpeech() {
+      return !this.src && !this.content
+    }
+  },
+  methods: {
+    getSpeech() {
+      if (!this.noSpeech) {
+        if (this.audioContext) {
+          if (this.loading) {
+            this.loading = false
+            this.audioContext.pause()
+          } else {
+            this.loading = true
+            this.audioContext.play()
+          }
+        } else if (this.content) {
+          this.loading = true
+          if (!this.speech) {
+            this.$instance.post("/app/msc/transToSpeech" + `?fileName=demo&words=${this.speechString}`).then(res => {
+              if (res && res.data) {
+                let url = res.data.join("")
+                this.speech = url.substring(0, url.indexOf(";"))
+                this.playAudio()
+              }
+            }).catch(() => this.loading = false)
+          } else {
+            this.playAudio()
+          }
+        } else if (this.src) {
+          this.loading = true
+          this.speech = this.src
+          this.playAudio()
+        }
+      }
+    },
+    playAudio() {
+      let _ = this
+      this.audioContext = uni.createInnerAudioContext();
+      this.audioContext.src = this.speech;
+      this.audioContext.play()
+      this.audioContext.onPlay(() => {
+        _.text = "暂停"
+      });
+      this.audioContext.onPause(() => {
+        _.loading = false
+        _.text = "开始"
+      });
+      this.audioContext.onEnded(() => {
+        _.loading = false
+        _.text = "开始"
+      });
+      this.audioContext.onError((res) => {
+        console.error(res.errMsg);
+        _.text = "开始"
+      });
+    },
+  },
+  destroyed() {
+    if (this.audioContext) {
+      this.audioContext.pause()
+      this.audioContext.destroy()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTransSpeech {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  button {
+    position: fixed;
+    right: 80px;
+    bottom: 150px;
+    width: 104px;
+    height: 104px;
+    background: linear-gradient(130deg, rgba(70, 192, 253, 1) 0%, rgba(37, 158, 249, 1) 57%, rgba(39, 148, 248, 1) 100%);
+    border-radius: 50%;
+    font-size: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #fff !important;
+    z-index: 10000;
+
+    & > div {
+      width: 48px;
+      white-space: nowrap;
+      line-height: normal;
+
+      .iconfont {
+        width: 48px;
+        font-size: 48px;
+        line-height: 48px;
+        overflow: hidden;
+
+        &.playing {
+          animation: playingSpeech .5s infinite;
+        }
+      }
+    }
+  }
+
+  @keyframes playingSpeech {
+    from {
+      width: 30px
+    }
+    to {
+      width: 100%
+    }
+  }
+}
+</style>