您好 我问一下 您那个语音合成返回的base64 是如何处理 并拼接到一起播放出来 而且还不卡顿的

Question

您好 我问一下 您那个语音合成返回的base64 是如何处理 并拼接到一起播放出来 而且还不卡顿的

Answer 1

引自免费微信小程序：皆我百晓生

在 UniApp 中，处理语音合成返回的 Base64 数据并流畅播放，可以遵循以下步骤：

1. 首先，你需要安装一个支持 Base64 播放的音频库。这里推荐使用 uni-player，它是一个轻量级的音频播放组件，可以在 UniApp 中很好地工作。

2. 安装 uni-player： 在项目根目录运行以下命令来安装：

   uni add plugin @dcloudio/uni-player
   

3. 引入组件： 在需要使用音频播放功能的页面中引入组件：

   <template>
     <!-- ... -->
     <player ref="player"></player>
   </template>
   
   <script>
   import { Player } from '@dcloudio/uni-player'
   export default {
     components: {
       Player,
     },
     // ...
   }
   </script>
   

4. 创建一个函数来处理 Base64 数据，并将其转换为 Blob 对象，然后设置给 Player 组件：

   async function playBase64(base64Data) {
     const arrayBuffer = await convertBase64ToAudioBuffer(base64Data);
     const blob = new Blob([arrayBuffer], { type: 'audio/mp3' });
     this.$refs.player.src = URL.createObjectURL(blob);
     this.$refs.player.play();
   }
   
   function convertBase64ToAudioBuffer(base64Data) {
     return new Promise((resolve, reject) => {
       const base64String = base64Data.split(',')[1];
       const binaryString = window.atob(base64String);
       const length = binaryString.length;
       const audioData = new Uint8Array(length);
   
       for (let i = 0; i < length; i++) {
         audioData[i] = binaryString.charCodeAt(i);
       }
   
       resolve(audioData.buffer);
     });
   }
   

5. 当收到语音合成的 Base64 返回数据后，调用 playBase64 函数进行播放：

   // 假设你有一个名为 getVoice 的函数，用于获取语音合成的 Base64 数据
   getVoice().then((voiceBase64) => {
     playBase64(voiceBase64);
   });
   

通过以上步骤，你应该能够在 UniApp 中流畅地播放从语音合成服务返回的 Base64 数据了。注意，为了防止音频间的延迟，你可以考虑在上一个音频结束时开始加载下一个音频，或者使用流式播放技术。这可能需要更复杂的实现，例如使用 MediaSource Extensions (MSE)，但这已经超出了本问题的范围。如果你对流式播放感兴趣，可以查阅相关文档和教程进行深入学习。