Ionic 4 - Browser audio input doesn't work

[Merwan1010]

Hi,

I have a problem really similar to this post : #85

The plugin is working well on my android device but when i do ionic cordova run browser and load the tab, i have this error in the console :

Here is the code in the ts file of the tab4 component :

declare let audioinput: any;

import { Component, OnInit } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { File } from '@ionic-native/file/ngx';

@Component({
  selector: 'app-tab4',
  templateUrl: './tab4.page.html',
  styleUrls: ['./tab4.page.scss'],
})
export class Tab4Page implements OnInit {

  BUFFER_SIZE: number = 16384;

  constructor(private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private file: File) {
    platform.ready().then((source) => {
      console.log("platform source " + source);
    });
  }

  ngOnInit() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      window.addEventListener('audioinput', (event: any) => {
        //alert(JSON.stringify(event.data));
        alert( "Audio data received: " + event.data.length + " samples" );
      }, false);

      audioinput.checkMicrophonePermission((hasPermission) => {
        if (hasPermission) {
          console.log("We already have permission to record.");
          this.startCapture();
        }
        else {
          // Ask the user for permission to access the microphone
          audioinput.getMicrophonePermission((hasPermission, message) => {
            if (hasPermission) {
              console.log("User granted us permission to record.");
              this.startCapture();
            } else {
              console.warn("User denied permission to record.");
            }
          });
        }
      });
    });
  }

  public startCapture() {
    audioinput.start({
      bufferSize: this.BUFFER_SIZE,
      streamToWebAudio: false,
      normalize: true,
      channels: audioinput.CHANNELS.MONO,
      sampleRate: audioinput.SAMPLERATE.CD_AUDIO_44100Hz,
    });
  }

}

Do you know what cause the error ?

Thank you

[edimuj]

It doesn't seem to work either on an emulator or the browser. The point of the plugin is mainly to enable audio capture on iOS devices and older Android devices that haven't support for getUserMedia as most modern desktop browsers do.

[Merwan1010]

Actually its working fine on ios emulator for me, on android emulator i have a mute microphone but maybe this is just some settings for the emulator.
Thanks for your answer, i will use a different approach for browser.

[numerized]

Would be so awesome to make it work on the browser.
It'll be so cool to have one codebase for all really.

[numerized]

@edimuj maybe you'd accept a little donation to make it work?

[edimuj]

@numerized well time is more of the issue, but donations are of course always happily accepted 🎁😊

Anyway, I will try to look into this in the coming weeks. Christmas is always a good time to do some housekeeping.

[numerized]

Cool! :)

[nth-chile]

It tries to do string replacement on fileURL, which is a problem if fileURL is null

// AudioInputCaptureProxy.js

96   fileUrl = opts[5] || fileUrl;
97   // the URL must be converted to a cdvfile:... URL to ensure it's readable from the outside
98   fileUrl = fileUrl.replace("filesystem:file:///", "cdvfile://localhost/");