Flutter Web中如何将录制的音频写入文件并上传至Firebase

Flutter Web环境下dart:io完全不可用，所有文件操作无需走本地临时目录写入逻辑，直接基于Web平台的字节流/Blob对象处理即可实现上传需求，具体操作步骤如下：

1. 获取音频录制的原始字节数据 #

• 如果你使用的是适配Web端的音频录制插件，录制结束后通常会直接返回Uint8List格式的音频二进制数据，无需额外读取本地文件。以全平台适配的record插件为例，示例代码如下：

final record = Record();
if (await record.hasPermission()) {
  // 开启录制
  await record.start();
  // 结束录制时Web端直接返回字节流，无需本地路径
  Uint8List? audioBytes = await record.stop();
}

• 如果你使用的录制插件返回的是Web Blob临时路径（格式类似blob:http://xxx），可以通过Web原生接口转换为字节数据：

import 'dart:html' as html;
import 'dart:typed_data';

Future<Uint8List> blobUrlToBytes(String blobUrl) async {
  final xhr = await html.HttpRequest.request(blobUrl, responseType: 'arraybuffer');
  return xhr.response as Uint8List;
}

2. 直接上传字节数据到Firebase Storage #

Firebase Storage官方适配包支持直接上传Uint8List格式数据，无需先写入本地文件，上传示例如下：

import 'package:firebase_storage/firebase_storage.dart';

Future<String> uploadAudioToFirebase(Uint8List audioBytes, String fileName) async {
  // 构建存储路径引用
  final storageRef = FirebaseStorage.instance.ref().child('audios/$fileName.wav');
  // 直接上传字节数据，根据实际录制格式设置contentType
  final uploadTask = storageRef.putData(
    audioBytes,
    SettableMetadata(contentType: 'audio/wav'), // 可替换为audio/m4a等对应格式
  );
  // 等待上传完成后返回下载链接
  final snapshot = await uploadTask.whenComplete(() => {});
  return await snapshot.ref.getDownloadURL();
}

注意事项 #

• 不需要额外实现本地文件写入逻辑，Web环境无公共文件系统权限，直接传递字节流是最优解
• 上传时务必正确设置contentType参数，否则Firebase返回的下载链接可能无法直接在前端播放
• 若当前使用的音频录制插件未适配Web，建议替换为record、flutter_sound等支持Web端的录制插件

内容的提问来源于stack exchange，提问作者Sharyer Ilyas khan