Please help me, I want to record with a mic and download it as a 'wav' file on Flutter Web.

[NowEatS]

Package version
5.0.0-beta.2

Environment

• MackBook Pro 14, 2022
• Browser :Chrome (115.0.5790.170)

Describe the Issue
Hello. I'm currently studying Flutter and trying to create a project using the 'record' library to record voice with a microphone in a Flutter web app and save it as a wav file.

I came across the discussion in #194 when looking for ways to save the recorded data.

After copying the code from the above link, I tried to download the file directly instead of uploading it to a server. However, the result was a file that couldn't be played at all, and I'm unsure about what went wrong.

Config

Uint8List _audioData = Uint8List(0);
final _audioRecorder = AudioRecorder();

final RecordConfig _config =
      await _audioRecorder.isEncoderSupported(AudioEncoder.pcm16bits);

Code for start Recording

if (await _audioRecorder.hasPermission()) {
    final isSupported =
        await _audioRecorder.isEncoderSupported(AudioEncoder.pcm16bits);
    print(isSupported);

    final stream = await _audioRecorder.startStream(_config);

    stream.listen((data) {
        _audioData = data;
    });
}

Code for stop Recording & Download audio file.

await _audioRecorder.stop();
var convertedData = convertBytesToInt16(_audioData);
var wavData = convertPcmToWav(convertedData);

var url = html.Url.createObjectUrlFromBlob(html.Blob(wavData));
html.AnchorElement anchorElement = html.AnchorElement(href: url);
anchorElement.download = "test.wav";
anchorElement.click();

The converting data code is copied from #194.

Question

1. The downloaded file 'test.wav' using the above method does not play. Initially, I recorded with the start(config) function and tried to download the file by obtaining the path using the stop() function. But this method only gave me a path of binary file in HTML format (and it seemed like it didn't even have the recorded data).

2. I then came across Distorted audio recordings on web #194 and installed the beta version of the 'record' library, and tried using the startStream(config) function. I expected this would give me the binary data of the recorded audio and was hopeful for success. However, once again, the resulting 'test.wav' file would not play.

3. I'm not sure if it's related to the above, but despite the codec of the config being set to AudioEncoder.pcm16bits, I get the following message when starting the recording:
   Container/codec chosen: audio/webm;codecs=opus

Expected behavior:
I want to save the recorded voice from the web app as a playable wav file.

thanks.

[llfbandit]

Yes the issue you mentioned does not allow to properly get WAV or PCM data. On a fix right now, still need a bit of testing and will release an updated version of the record_web package.

From the exsample code you provide, web supports WAV format. You don't need to mess with your own conversion.
Please, have a look to the example project and follow the issue to know when the package is released.

[NowEatS]

thanks for your coment.

Is it currently impossible in Flutter web to achieve the desired action I want, which is to save microphone recordings as a file, regardless of the file format?
It seems that the default format on the Web is opus, but there's a log indicating that startStream() doesn't support this.

What I find a bit puzzling is that in #194, they mention the file is distorted, but it can be played. I'm curious if posting the audioData to a server would actually produce a playable file. (I do acknowledge from the discussion that the result might not be perfectly optimal.)

[llfbandit]

Streaming is available for PCM mostly. Please see the readme.md file for feature matrix.
Web only supports opus as far as I know. You can perfectly record in that format.
I manually added WAV & PCM, this is where the issue is.

The path returned by stop method is the URL to the blob containing the recording. This should be something like "blob://1236abc...", this is generated by the browser. From here, you can acquire the content with cross_file package for example.