Feat(AI):TTS功能实现

aiChat/mixins/chatMixins.js

@@ -50,7 +50,9 @@ export const chatMixins = {
       ],
       errorMsg: Object.freeze('您提的问题未能理解，云灵思想跑偏啦，重新整理一下问题或者重新提问，让云灵再试试！'),
       audioAyy: [],
-      isPlayAudio: false
+      isPlayAudio: false,
+      audioContext: null,
+      audioPlayId: ''
     }
   },
   computed: {
@@ -408,9 +410,38 @@ export const chatMixins = {
       }
     },
     ttsHandle(item) {
+      this.audioAyy = []
+      if (this.audioContext) {
+        this.audioContext.stop()
+        // this.audioContext.destroy()
+      }
+      // 如果正在播放，点击当前播放的则认为是暂停
+      if (this.isPlayAudio && item.conversationId === this.audioPlayId) {
+        this.isPlayAudio = false
+        this.audioPlayId = ''
+        return
+      }
       this.isPlayAudio = false
-     this.audioAyy = []
-     this.splitAndSynthesize(removeMarkdown(item.content).replace(/[\n\t\s]/g, ''))
+      this.audioPlayId = item.conversationId
+      const flag = 1
+      if (flag === 1) {
+        console.log(removeMarkdown(item.content).replace(/[\n\t\s]/g, ''))
+        uni.showLoading({
+          title: '合成中...'
+        })
+        this.splitAndSynthesize(removeMarkdown(item.content).replace(/[\n\t\s]/g, ''))
+      } else {
+        // 调试数据
+        this.audioAyy = [
+          'https://ae.weixin.qq.com/cgi-bin/mmasrai-bin/getmedia?filename=1750749075_2f71887cc48d9b3753c39d119862d4bb&filekey=871027724&source=miniapp_plugin',
+          'https://ae.weixin.qq.com/cgi-bin/mmasrai-bin/getmedia?filename=1750749077_0970508786c5e3edc3a68a5eb9de048c&filekey=871027724&source=miniapp_plugin',
+          'https://ae.weixin.qq.com/cgi-bin/mmasrai-bin/getmedia?filename=1750749079_e77cec52cc077ba981892887c3df4cdf&filekey=871027724&source=miniapp_plugin',
+          'https://ae.weixin.qq.com/cgi-bin/mmasrai-bin/getmedia?filename=1750749080_02db4235771f5561cdb73c06d8c67e53&filekey=871027724&source=miniapp_plugin',
+          'https://ae.weixin.qq.com/cgi-bin/mmasrai-bin/getmedia?filename=1750749082_534e455c5d6ac5e9a4192ecf9952851a&filekey=871027724&source=miniapp_plugin',
+          'https://ae.weixin.qq.com/cgi-bin/mmasrai-bin/getmedia?filename=1750749083_78c4a2fecad538561f81c48dc4ecd645&filekey=871027724&source=miniapp_plugin'
+        ]
+        this.playNextChunk()
+      }
     },
     splitAndSynthesize(text) {
       const _this = this
@@ -440,25 +471,38 @@ export const chatMixins = {
                 _this.playNextChunk()
               }
             }
+            uni.hideLoading()
           },
           fail: function(err) {
             console.log("转换失败：", err)
+            uni.hideLoading()
           }
         })
       } else {
         if (!_this.isPlayAudio) {
           _this.playNextChunk()
         }
+        uni.hideLoading()
       }
     },
     playNextChunk() {
-      if (this.audioAyy.length > 0) {
+      if (this.audioAyy.length > 0 && this.audioPlayId) {
+        const src = this.audioAyy.shift()
         this.isPlayAudio = true
-        const audioContext = uni.createInnerAudioContext()
-        audioContext.src = this.audioAyy.shift()
-        audioContext.onEnded(() => this.playNextChunk())
+        const audioContext = uni.createInnerAudioContext({
+          // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
+          useWebAudioImplement: false
+        })
+        this.audioContext = audioContext
+        audioContext.src = src
+        audioContext.onEnded(() => {
+          audioContext.destroy()
+          this.playNextChunk()
+        })
         audioContext.play()
+        console.log('------------src：' + src)
       } else {
+        console.log('------------end')
         this.isPlayAudio = false
       }
     }

aiChat/views/index.vue

@@ -32,6 +32,10 @@
       }"
       class="fix-tabbar-body"
     >
+      <!-- <button @click="ttsHandle({
+        content: '是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项。临床试验统计分析结果生成系统是服务于医学研究的数据处理平台。系统聚焦临床试验数据，可对患者入组信息、疗效指标、安全性数据等进行标准化统计分析，自动生成包含描述性统计、假设检验、生存分析等内容的结果报告。支持可视化图表输出，如疗效对比柱状图、不良事件分布饼图等，直观呈现数据特征。具备灵活的参数配置功能，可适配不同试验设计与分析需求，助力研究者高效完成数据解读，为药物研发、临床研究结论输出提供精准的统计支持。',
+        conversationId: '123'
+      })">播放</button> -->
       <block v-if="chatMessageListLength < 1">
         <view class="home-focus-wrap">
           <view class="focus-guide-wrap">
@@ -234,15 +238,18 @@
                       重新生成
                     </view>
                     <view
+                      :class="{
+                        'playing': audioPlayId === item.conversationId && isPlayAudio
+                      }"
                       class="item"
                       @click="ttsHandle(item)"
                     >
                       <image
-                        :src="webUrl + '/aiChat/icon-04.png'"
+                        :src="webUrl + '/aiChat/' + ((audioPlayId === item.conversationId && isPlayAudio) ? 'audio-on' : 'audio-off') +'.png'"
                         class="icon"
                         mode="widthFix"
                       />
-                      播放
+                      语音播放
                     </view>
                     <view class="item item2" @click="copyMoreInfoHandle(item)">拷贝</view>
                   </view>

assets/css/aiChat.less

@@ -518,6 +518,9 @@ page {
 					margin: 0;
 					color: transparent;
 				}
+				.playing {
+					color: #3D4CF1;
+				}
 			}
 		}
 	}