uniapp 音频组件uni.createInnerAudioContext()播放base64格式文件

项目中因为对于接口数据进行加密处置，对于后台返回的图片/音频都返回base64流，在 ​​uni-app​​ 中，uni.createInnerAudioContext() ​​不支持直接使用 Base64 格式的音频数据​​，所以需要处理。

一、​原因说明​

1、平台限制

uni.createInnerAudioContext() 底层基于小程序原生音频播放器实现（如微信小程序的 wx.createInnerAudioContext），而小程序平台要求音频源必须是：

• 本地临时文件路径​​（如录音后返回的 tempFilePath）​​
• 网络 URL​​（如 http:// 或 https:// 开头的远程音频地址）

2、​​Base64 的直接使用​​

Base64 格式的音频数据无法直接赋值给 src 属性，因为小程序原生 API 不解析 Base64 字符串。

二、​解决方案​

若需播放 Base64 音频，需​​先将 Base64 转换为临时文件路径​​。以下是实现步骤：

1、将 Base64 转为临时文件

//（需包含 data:audio/xxx;base64, 前缀, 数据可为后端返回的数据）
const base64Data = 'data:audio/mp3;base64,XXXXXX...';

// 将 Base64 转为 ArrayBuffer
const arrayBuffer = uni.base64ToArrayBuffer(base64Data.split(',')[1]);

// 生成临时文件路径
const tempFilePath = `${wx.env.USER_DATA_PATH}/temp_audio.mp3`;

// 写入文件系统
uni.getFileSystemManager().writeFile({
  filePath: tempFilePath,
  data: arrayBuffer,
  encoding: 'binary',
  success: () => {
    console.log('文件写入成功:', tempFilePath);
  },
  fail: (err) => {
    console.error('文件写入失败:', err);
  }
});

2、使用临时文件路径播放

const audioContext = uni.createInnerAudioContext();
audioContext.src = tempFilePath; // 使用临时文件路径
audioContext.play();

3、注意

添加 onError 监听处理播放失败：

audioContext.onError((err) => {
  console.error('音频播放失败:', err);
});