uniapp如何实现音频下载功能

在uniapp中如何实现音频文件的下载功能？需要支持http和https协议的音频链接下载，并且能够保存到手机本地。请问有什么推荐的插件或方案吗？最好能提供完整的代码示例，包括权限配置和文件保存路径的处理。另外，下载过程中如何显示进度条？下载完成后又该如何调用系统播放器打开文件？

2 回复

使用uni.downloadFile下载音频文件，保存到本地临时路径。再配合uni.saveFile可存储到本地。注意：iOS需配置downloadFile合法域名，安卓可能需要文件读写权限。


在 UniApp 中实现音频下载功能，可以通过以下步骤完成。核心是利用 uni.downloadFile API 下载文件，并结合 uni.saveFile 保存到本地（仅限小程序端）。以下是详细说明和代码示例：

实现步骤

  1. 下载音频文件：使用 uni.downloadFile 从网络 URL 下载音频。
  2. 保存到本地：下载成功后，通过 uni.saveFile 将文件保存到设备本地存储（小程序端支持，H5 端可能受限）。
  3. 处理平台差异：注意 H5 端可能无法直接保存文件，需引导用户手动下载或使用浏览器默认行为。

代码示例

// 在 UniApp 页面或方法中调用
downloadAudio() {
  // 音频文件 URL，确保可访问且无跨域问题
  const audioUrl = 'https://example.com/audio.mp3';
  
  // 下载文件
  uni.downloadFile({
    url: audioUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        // 下载成功，保存文件（小程序端有效）
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.showToast({
              title: '下载成功，文件已保存',
              icon: 'success'
            });
            console.log('文件保存路径：', saveRes.savedFilePath);
          },
          fail: (err) => {
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            });
            console.error('保存失败：', err);
          }
        });
      }
    },
    fail: (error) => {
      uni.showToast({
        title: '下载失败',
        icon: 'none'
      });
      console.error('下载失败：', error);
    }
  });
}

注意事项

  • 平台支持：
    • 微信小程序：支持 downloadFile 和 saveFile，文件保存到本地。
    • H5 端：downloadFile 可用，但 saveFile 可能无效。H5 通常通过浏览器下载，或使用 <a> 标签触发下载（需处理跨域）。
    • App 端：支持类似功能，但路径处理可能不同，需测试。
  • 权限问题：确保应用有存储权限（如 App 端需配置权限）。
  • 文件路径：下载后为临时路径，保存后获取永久路径。
  • 网络请求：音频 URL 需支持 HTTPS（小程序要求），且无跨域限制。

H5 端备选方案（使用 <a> 标签）

// 适用于 H5，直接触发浏览器下载
downloadAudioForH5() {
  const audioUrl = 'https://example.com/audio.mp3';
  const link = document.createElement('a');
  link.href = audioUrl;
  link.download = 'audio.mp3'; // 设置下载文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

总结

  • 主要使用 uni.downloadFile 和 uni.saveFile 实现下载和保存。
  • 根据平台调整代码：小程序端直接保存，H5 端可能需手动处理。
  • 测试时注意 URL 可访问性和平台兼容性。

如果有具体需求（如进度显示或大文件处理），可进一步扩展代码。

回到顶部