Record Audio and upload file to firebase storage Flutter Web

Question

I am using the flutter_sound package to record and play audio. On Flutter Web, on stopping the recording the recorder returns a path/URL of this type: blob:http://localhost:63986/b60f31ce-b94d-48c8-8a4a-2d939effe6d8

I want to upload the audio recording to Firebase Storage but dart.io can't be used for flutter-web so can't use the File method. Even after searching, I didn't find a way to achieve it. I don't know how to proceed. How can I write the audio to file and upload it to firebase?

My Code:

  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

I've been working on this for days, and I finally figured it out!

When you call startRecorder(toFile: audioLocation), audioLocation will be the location of the file after you call stopRecorder(), stored in html.window.sessionStorage (html as in import 'dart:html' as html;).

So you need to add import 'package:http/http.dart' as http;, create a fileName (whatever you want the file to be called in Firebase Storage), and then insert the following piece of code.

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'));

This might not be the best way, but it is the way I finally got it to work! Good luck!!

Answer 2

This worked for me.

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

response.bodyBytes //data in bytes

Note: Verified in local machine & firebase hosting.