uniapp 微信小程序如何播放后端返回的二进制音频文件

在uniapp开发的微信小程序中，后端返回的音频文件是二进制数据（如ArrayBuffer格式），如何实现播放？尝试过将二进制转为base64或临时文件路径，但微信小程序的innerAudioContext和backgroundAudioManager都不支持直接播放。是否有完整的解决方案，包括二进制数据转换、存储及播放的具体代码示例？

2 回复

使用 uni.downloadFile 下载二进制音频，然后通过 uni.createInnerAudioContext 播放。示例代码：

uni.request({
  url: '音频URL',
  responseType: 'arraybuffer',
  success: (res) => {
    const fs = uni.getFileSystemManager()
    const filePath = `${wx.env.USER_DATA_PATH}/temp.mp3`
    fs.writeFile({
      filePath,
      data: res.data,
      success: () => {
        const audio = uni.createInnerAudioContext()
        audio.src = filePath
        audio.play()
      }
    })
  }
})

在 UniApp 中播放后端返回的二进制音频文件，可以通过以下步骤实现：

  1. 获取二进制数据：通过 uni.request 请求音频接口，设置 responseType: 'arraybuffer' 接收二进制数据。
  2. 转换为临时路径：将 ArrayBuffer 数据转换为 Base64，再使用 uni.getFileSystemManager().writeFileSync 写入临时文件，生成临时路径。
  3. 使用音频组件播放：通过 uni.createInnerAudioContext() 加载临时路径进行播放。

示例代码：

// 1. 请求音频二进制数据
uni.request({
  url: '你的音频接口地址',
  method: 'GET',
  responseType: 'arraybuffer',
  success: (res) => {
    if (res.statusCode === 200) {
      // 2. 将 ArrayBuffer 转为 Base64
      const base64 = uni.arrayBufferToBase64(res.data);
      const filePath = `${wx.env.USER_DATA_PATH}/temp_audio.mp3`;
      
      // 写入临时文件
      const fs = uni.getFileSystemManager();
      fs.writeFileSync(filePath, base64, 'base64');
      
      // 3. 创建音频上下文并播放
      const audioContext = uni.createInnerAudioContext();
      audioContext.src = filePath;
      audioContext.play();
      
      // 可选：监听播放结束自动清理文件
      audioContext.onEnded(() => {
        fs.unlinkSync(filePath);
      });
    }
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

注意事项：

  • 微信小程序环境需使用 wx.env.USER_DATA_PATH 指定临时目录。
  • 音频格式需为小程序支持的格式（如 MP3、AAC）。
  • 及时清理临时文件避免存储空间占用。

此方法适用于微信小程序平台，其他平台（如H5）可能需要调整文件写入方式。

回到顶部