uniapp 小程序端如何播放音频的二进制数据

在uniapp开发小程序时，接收到后台返回的音频二进制数据，应该如何播放？尝试过使用uni.downloadFile和uni.getFileSystemManager，但都没能成功播放。请问正确的实现方式是什么？需要具体代码示例。

2 回复

在uniapp小程序端，可以使用uni.createInnerAudioContext()创建音频上下文，然后通过uni.request下载音频二进制数据，将响应类型设为arraybuffer，最后设置音频src为临时路径即可播放。


在 UniApp 小程序端，播放音频的二进制数据可以通过以下步骤实现：

  1. 获取二进制数据：从网络请求或本地文件获取音频的二进制数据（如 ArrayBuffer 格式）。
  2. 转换为临时文件路径：将二进制数据写入临时文件，生成临时文件路径。
  3. 使用 InnerAudioContext 播放：通过 UniApp 的音频 API 播放临时文件。

示例代码：

// 假设已获取到音频的二进制数据（arrayBuffer）
const arrayBuffer = ...; // 你的二进制数据

// 将 ArrayBuffer 转换为 Base64（小程序环境需处理）
const base64 = uni.arrayBufferToBase64(arrayBuffer);

// 生成临时文件路径
const tempFilePath = `${wx.env.USER_DATA_PATH}/temp_audio.mp3`;
uni.getFileSystemManager().writeFile({
  filePath: tempFilePath,
  data: base64,
  encoding: 'base64',
  success: () => {
    // 创建 InnerAudioContext 实例
    const audioContext = uni.createInnerAudioContext();
    audioContext.src = tempFilePath;
    audioContext.play(); // 播放音频
    
    // 监听播放结束事件（可选：删除临时文件）
    audioContext.onEnded(() => {
      uni.getFileSystemManager().unlink({ filePath: tempFilePath });
    });
  },
  fail: (err) => {
    console.error('写入文件失败:', err);
  }
});

注意事项：

  • 格式支持：确保音频格式为小程序平台支持的格式（如 MP3、AAC）。
  • 数据大小：大文件可能影响性能，建议控制音频数据大小。
  • 兼容性：测试在微信、支付宝等目标平台下的运行情况。

通过以上方法，即可在 UniApp 小程序中播放二进制音频数据。

回到顶部