[web] duration null for MediaRecorder audio on Chrome

[creativecreatorormaybenot]

Which API doesn't behave as documented, and how does it misbehave? Name here the specific methods or fields that are not behaving as documented, and explain clearly what is happening.

Minimal reproduction project See the duration-null-on-web branch in this fork.

To Reproduce (i.e. user steps, not code) Steps to reproduce the behavior:

1. Run the example app on web: flutter run -d chrome
2. Click on "Allow" to allow recording the microphone.
3. Click on "Start recording".
4. Make some noise IDK :D
5. Click on "Stop recording".

This will record a local audio file (using your microphone) and then load it into just_audio using setUrl.

---

Here is a video recording illustrating the issue completely: https://youtu.be/ZrLdbIjCA_g Have fun with it 😄

Error messages There is no error message.

Expected behavior

This snippet should not print null as the duration (line 28-29).

final duration = await _player.setUrl(_url);
print('duration after load: $duration'); // prints null

Screenshots See the video instead :)

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Version 86.0.4240.111 (Official Build) (64-bit)

Smartphone (please complete the following information): Not applicable.

Flutter SDK version

Flutter 1.24.0-1.0.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision 12bea61c29 (6 days ago) • 2020-10-14 15:57:04 -0700
Engine • revision 069b3cf8f0
Tools • Dart 2.11.0 (build 2.11.0-218.0.dev)

Additional context I have not experienced these problem when loading an audio file from the web, e.g.:

_player.setUrl('https://filesamples.com/samples/audio/mp3/sample1.mp3');

[creativecreatorormaybenot]

I could theoretically also upload the file to external storage and play it from there, but I am interested in playing local audio files, e.g. to play it before publishing :)

[creativecreatorormaybenot]

This might actually be a more complicated issue caused by MediaRecorder: https://github.com/muaz-khan/RecordRTC/issues/274

[creativecreatorormaybenot]

It is actually a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=642012

The WebM files by Chrome are broken and not this plugin.

I will investigate a little bit more before closing.

[creativecreatorormaybenot]

Investigation update:

There appears to be a workaround to get the duration.
Now, there are two questions:

1. Do you think you can implement this in the plugin?
2. Do you think this should be fixed in the plugin?

[creativecreatorormaybenot]

From my side, I will look into https://www.npmjs.com/package/ts-ebml and see if I can integrate it into the microphone plugin as a different workaround.

[creativecreatorormaybenot]

→ the duration works already in Firefox but the replay button does not; maybe that is an issue of the example or another web issue. I might look into that at some point, but not tomorrow because tomorrow I will look at reencoding :)

[ryanheise]

The workaround looks interesting, but there are a number of reasons why a duration may be unknown (e.g. live streams) and the workaround probably shouldn't be used universally in case it has unwanted effects on some types of media. Although maybe it could be an option.

One other option I was considering was to use an existing Javascript media library that tries to transparently handle platform-specific issues. From memory, Google created such a library which also implemented DASH support, although I don't remember what it was called, my hope is that a library like that might solve a number of issues all at once.

[cedvdb]

is this still on the radar ?

[ryanheise]

Doing a quick search for the Google library I mentioned above, I found:

https://github.com/google/shaka-player

But, it looks like it's not a general solution for audio playback and doesn't solve this duration problem for us. So @creativecreatorormaybenot 's linked solution looks like the way forward.

Unfortunately it is not high on my priority list, so if anyone would like to help contribute to the project, you are more than welcome to create a pull request.