录制音频并上传文件到firebase存储Flutter Web

Question

我正在使用flutter_sound包来录制和播放音频。在Flutter Web上，在停止录制时，记录器返回以下类型的路径/URL:blob:http://localhost:63986/b60f31ce-b94d-48c8-8a4a-2d939effe6d8

我想上传音频记录到Firebase存储，但dart。io不能用于flutter-web，因此不能使用File方法。即使在搜索之后，我也没有找到实现它的方法。我不知道该怎么做。如何将音频写入文件并将其上传到firebase?

我代码:

import 'dart:html' as html;
import 'dart:io' as io;
final recorder = FlutterSoundRecorder();
final player = FlutterSoundPlayer();
String fileName;
@override
void initState() {
super.initState();
initRecorder();
}
@override
void dispose() {
recorder.closeRecorder();
player.closePlayer();
super.dispose();
}
Future<void> initRecorder() async {
if (!kIsWeb) {
final status = await Permission.microphone.request();
if (status != PermissionStatus.granted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Grant Permission form mic first!')),
);
}
}
await recorder.openRecorder();
await player.openPlayer();
recorder.setSubscriptionDuration(Duration(milliseconds: 500));
}
Future<void> record() async {
fileName = DateTime.now().toString();
await recorder.startRecorder(toFile: fileName);
}
Future<void> stop() async {
path = await recorder.stopRecorder();
if (kIsWeb) {
if (path == null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Grant Permission for mic first!')),
);
} else {
// Get File from path and upload it to Firebase
print(path);
// not working for Web
// final audioFile = io.File(path);
// html.File() doesn't take path/Url as parameter but
// File(List<Object> fileBits, String fileName,[Map? options])
/*
await FirebaseStorage.instance
.ref()
.child('users/uploads/$fileName.mp3')
.putData(file!.bytes!);*/
}
} else if (!kIsWeb) {
if (path == null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Grant Permission for mic first!')),
);
} else {
//final audioFile = io.File(path);
// await FirebaseStorage.instance
//     .ref()
//     .child('users/uploads/$fileName.mp3')
//     .putFile(audioFile);
}
}
}

Answer 1

我已经研究了好几天了，我终于弄明白了!

调用startRecorder(toFile: audioLocation)时，audioLocation将是调用stopRecorder()后文件的位置，存储在html.window.sessionStorage中(html与import 'dart:html' as html;一样)。

因此，您需要添加import 'package:http/http.dart' as http;，创建fileName(无论您希望该文件在Firebase Storage中被称为什么)，然后插入以下代码段:

var ref = await storage.ref().child('path/to/file/$fileName');
Uri blobUri = Uri.parse(html.window.sessionStorage[audioFile]!);
http.Response response = await http.get(blobUri);
await ref.putData(response.bodyBytes, SettableMetadata(contentType: 'video/mp4'));

这可能不是最好的方法，但这是我最终让它工作的方法!祝你好运! !

Answer 2

这对我很有效。

http.Response response = await http.get(
'blob:http://localhost:63986/b60f31ce-b94d-48c8-8a4a-2d939effe6d8',
);   
response.bodyBytes //data in bytes

注:本机验证重火力点举办。