Tau: [BUG]:Record audio is not working in web.

Created on 15 Jul 2021 · 38Comments · Source: Canardoux/tau

Flutter Sound Version :

flutter_sound: ^8.1.9

Severity

NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'

Platforms you faced the error

Flutter Web

Describe the bug
when I call openAudioSession then i get this error.

openAudioSession(
        focus: AudioFocus.requestFocusAndDuckOthers,
        category: SessionCategory.record,
      )

To Reproduce
Steps to reproduce the behavior:

StreamController<Food> recordingDataController = StreamController<Food>();

 await recorder.openAudioSession(
        focus: AudioFocus.requestFocusAndDuckOthers,
        category: SessionCategory.record,
      );
      await recorder.startRecorder(
        codec: Codec.pcm16,
        numChannels: 1,
        sampleRate: 48000,
        toStream: recordingDataController.sink,
      );

Logs!!!!

FS:---> openAudioSession
---> openAudioSession
Resetting flutter_sound Recorder Plugin
---> resetPlugin
<--- resetPlugin
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'

maybe bug Not yet handled

Source

singlakaran

Most helpful comment

Did you include the javascript files into your xxx.html file ?

Look to this or this

Larpoux on 15 Jul 2021

👍2

All 38 comments

Did you include the javascript files into your xxx.html file ?

Look to this or this

Larpoux on 15 Jul 2021

👍2

yes, I did index.html

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>js_interop_test</title>
    <link rel="icon" href="favicon.ico">

    <!-- JS dependency pulled here -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/flutter_sound/flutter_sound.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/flutter_sound/flutter_sound_player.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/flutter_sound/flutter_sound_recorder.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>
</head>

<body>

</body>

</html>

singlakaran on 15 Jul 2021

I think [email protected] is not good.
You are using Flutter Sound 8.x

Larpoux on 15 Jul 2021

i am using flutter_sound: ^8.1.9

singlakaran on 15 Jul 2021

Yes. Your includes in index.html are wrong

Larpoux on 15 Jul 2021

i tried this also

 <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound.js"></script>
  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound_player.js"></script>
  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound_recorder.js"></script>
  <script src="assets/packages/flutter_sound_web/js/howler/howler.js"></script>

unfortunately, I did not work.

singlakaran on 15 Jul 2021

Yes. but you want to be sure that the files under assets/packages/flutter_sound_web/js/flutter_sound/ are correct, with the correct versions.

Larpoux on 15 Jul 2021

The error :

NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'

is when the javascript sources are not found.

Larpoux on 15 Jul 2021

Screenshot 2021-07-15 at 8 32 36 PM

see this

singlakaran on 15 Jul 2021

newRecorderInstance is the first API verb called by flutter Sound.
I am pretty sure that your index.html does not include the correct javascript sources.

Can I have the javascript logs ?

Larpoux on 15 Jul 2021

here we go

This app is linked to the debug service: ws://127.0.0.1:64228/csoQnsbQADM=/ws
js_primitives.dart:30 FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Resetting flutter_sound Recorder Plugin
js_primitives.dart:30 ---> resetPlugin
js_primitives.dart:30 <--- resetPlugin
js_primitives.dart:30 NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'
js_primitives.dart:30 FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Resetting flutter_sound Recorder Plugin
js_primitives.dart:30 ---> resetPlugin
js_primitives.dart:30 <--- resetPlugin
js_primitives.dart:30 NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'
2client.js:3362 2 module(s) were hot-reloaded.
js_primitives.dart:30 FS:---> startRecorder 
js_primitives.dart:30 FS:---> _startRecorder.
js_primitives.dart:30 Exception: Recorder is not open
client.js:3362 2 module(s) were hot-reloaded.
js_primitives.dart:30 FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Resetting flutter_sound Recorder Plugin
js_primitives.dart:30 ---> resetPlugin
js_primitives.dart:30 <--- resetPlugin
js_primitives.dart:30 NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'
js_primitives.dart:30 FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Resetting flutter_sound Recorder Plugin
js_primitives.dart:30 ---> resetPlugin
js_primitives.dart:30 <--- resetPlugin
js_primitives.dart:30 NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'

singlakaran on 15 Jul 2021

This are the dart logs I think. Not your browser logs.

Larpoux on 15 Jul 2021

@Larpoux can you provide the CDN link for the v8.x.x flutter_sound js libraries? Then @singlakaran can try this with the correct JS scripts.

Also, the docs should be updated as they list 7.4.13 in the dynamic reference section of this page: https://tau.canardoux.xyz/guides_web.html

mhstoller on 15 Jul 2021

github

Larpoux on 15 Jul 2021

did you mean this?

FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Assertion failed: file:///Users/skaran/Downloads/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_sound-8.1.9/lib/public/flutter_sound_recorder.dart:387:12
_openRecorderCompleter == null
is not true

singlakaran on 15 Jul 2021

I mean the logs that you get when you go to the Chrome Developer Tools.
Probably there is a warning/error saying that it cannot load your javascript sources

Larpoux on 15 Jul 2021

Also, the docs should be updated as they list 7.4.13 in the dynamic reference section of this page: https://tau.canardoux.xyz/guides_web.html

OK. Bad 👎 . I am going to fix that.
And add a new chapter in the "trouble shooting" :
the error message

NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'

is really not very clear for the developer who has not included correctely his javascript files.

Larpoux on 15 Jul 2021

Screenshot 2021-07-15 at 8 54 29 PM

see this, I am not getting any error, warning when I run openAudioSession().

singlakaran on 15 Jul 2021

Screenshot 2021-07-15 at 17 28 12

This is the menu you get in Chrome when you go to the Developers Tools

Larpoux on 15 Jul 2021

if you don't mind can we connect on meet?
@Larpoux

singlakaran on 15 Jul 2021

Try to put your 4 javascripts sources in the same directory than your index.html file,
and change the required :

 <script src="flutter_sound.js"></script>
  <script src="flutter_sound_player.js"></script>
  <script src="flutter_sound_recorder.js"></script>
  <script src="howler.js"></script>

Larpoux on 15 Jul 2021

try :
```

Larpoux on 15 Jul 2021

🚀1

I AM BAD 👎

The correct includes are :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/flutter_sound/flutter_sound.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/flutter_sound/flutter_sound_player.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/flutter_sound/flutter_sound_recorder.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>

Please try. I am sure that you will be successful

Larpoux on 15 Jul 2021

I am fixing the documentation, now.

Larpoux on 15 Jul 2021

no no @Larpoux
still its not working for me.

Screenshot 2021-07-15 at 9 41 33 PM

singlakaran on 15 Jul 2021

try a refresh with the browser

Larpoux on 15 Jul 2021

I did, but no luck.

singlakaran on 15 Jul 2021

what error message ?

Larpoux on 15 Jul 2021

FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Resetting flutter_sound Recorder Plugin
js_primitives.dart:30 ---> resetPlugin
js_primitives.dart:30 <--- resetPlugin
js_primitives.dart:30 NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'
js_primitives.dart:30 FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Assertion failed: file:///Users/skaran/Downloads/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_sound-8.1.9/lib/public/flutter_sound_recorder.dart:387:12
_openRecorderCompleter == null
is not true

singlakaran on 15 Jul 2021

@singlakaran : there is perhaps (probably?) something wrong on Flutter Sound side.
I have myself the same error than you have.
I will debug that tomorrow.
Sorry for the inconvenience.

Larpoux on 15 Jul 2021

OK. @singlakaran.

The correct includes (I verified with the Flutter Sound demo) are either :

  <script src="https://cdn.jsdelivr.net/npm/tau_core@8/js/flutter_sound/flutter_sound.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tau_core@8/js/flutter_sound/flutter_sound_player.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tau_core@8/js/flutter_sound/flutter_sound_recorder.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>

  <script src="js/flutter_sound/flutter_sound.js"></script>
  <script src="js/flutter_sound/flutter_sound_player.js"></script>
  <script src="js/flutter_sound/flutter_sound_recorder.js"></script>
  <script src="js/howler/howler.js"></script>

Of course, if you use the later, you must put your 4 scripts in js/flutter_sound/ and js/howler/

Good luck.

Larpoux on 15 Jul 2021

@Larpoux I am using

<script src="https://cdn.jsdelivr.net/npm/tau_core@8/js/flutter_sound/flutter_sound.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tau_core@8/js/flutter_sound/flutter_sound_player.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tau_core@8/js/flutter_sound/flutter_sound_recorder.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>

but still, I am getting the same error

---> resetPlugin
js_primitives.dart:30 <--- resetPlugin
js_primitives.dart:30 NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.newRecorderInstance'
js_primitives.dart:30 FS:---> openAudioSession 
js_primitives.dart:30 ---> openAudioSession
js_primitives.dart:30 Assertion failed: file:///Users/skaran/Downloads/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_sound-8.1.9/lib/public/flutter_sound_recorder.dart:387:12
_openRecorderCompleter == null
is not true

singlakaran on 16 Jul 2021

Could it be because of the codec problem? Why is it not possible to record to stream if it is not PCM16? This codec is not supported on the web for recording.
https://tau.canardoux.xyz/guides_codec.html

ikicodedev on 20 Jul 2021

Actually the only Codec supported with startRecorder(toStream:) is PCM16

This can be alleviated in the future (specially PCM8 and PCMFloat)

Larpoux on 20 Jul 2021

I personally don't have any error with this:

await _recorder.openAudioSession(category: SessionCategory.record);

the files I included:

  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound.js"></script>
  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound_player.js"></script>
  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound_recorder.js"></script>
  <script src="assets/packages/flutter_sound_web/js/howler/howler.js"></script>

However the recording progress stream does not seem to fire any event. But that's a separate issue but it can be fixed by adding a subscription duration (which does not seem to be required on android):

`_recorder.setSubscriptionDuration(const Duration(milliseconds: 100));`

cedvdb on 28 Jul 2021

For those with error dart.global.newPlayerInstance or dart.global.newRecorderInstance is not a function, after you include 4 extra lines in header of index.html, you need to do a hard reload web page (Chrome: F12, right click on refresh button). That is what happened to me.

TonyTNguyen on 1 Aug 2021

👍1

https://tau.canardoux.xyz/flutter_sound_install.html still point to the old js version.

pChaAnthony on 2 Aug 2021

Thank you @pChaAnthony ,

You are right : the doc was completely obsolete.
I fixed it.

@everybody : please re-open a new issue if you have still problems with Flutter Sound on Web :
I hope that Flutter Sound V 8.3.9 (and its doc) is better

Larpoux on 2 Aug 2021

Was this page helpful?

0 / 5 - 0 ratings

Related issues

can we do looping in fluttersound ?

farrelanelca · 5Comments

[BUG] Crash when startPlayer on Android device help me please

BeshoyMelika · 3Comments

[BUG]: Incompatibility with firebase_messaging+Android+8.0.0.dev causing

edward-yakop · 4Comments

[BUG]: Unable to play audio file on Android

mhstoller · 5Comments

[check] Multiple SoundPlayers

deepbluev7 · 5Comments