Ionic 4 - Basic Example

Hi, There is a issue related to this, but at the moment that issue is closed, and I didn’t find the answer that I need, so I am opening a new issue related to this issue:

https://github.com/edimuj/cordova-plugin-audioinput/issues/66

I’m trying to use this plugin with Ionic 4, but I am not able to find an basic example with all the steps needed to run this plugin in Ionic.

It has been my attempt to use cordova-plugin-audioinput in one Ionic 4 project. First I created a blank ionic project:

ionic start myproject blank

After that, I installed this plugin:

ionic cordova plugin add https://github.com/edimuj/cordova-plugin-audioinput.git

And then, I tried use this plugin in app.component.ts:

declare let audioinput: any;

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

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      audioinput.checkMicrophonePermission(function (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(function (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({
      streamToWebAudio: true
    });

    // Connect the audioinput to the device speakers in order to hear the captured sound.
    audioinput.connect(audioinput.getAudioContext().destination);
  }
}

But when I use ionic serve to run it in my browser I get the next error:

ERROR Error: "Uncaught (in promise): ReferenceError: audioinput is not defined
./src/app/app.component.ts/AppComponent.prototype.initializeApp/<@http://localhost:8100/main.js:980:13
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:8100/polyfills.js:2749:17
onInvoke@http://localhost:8100/vendor.js:51136:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:8100/polyfills.js:2748:37
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:8100/polyfills.js:2508:24
scheduleResolveOrReject/<@http://localhost:8100/polyfills.js:3247:29
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:8100/polyfills.js:2781:17
onInvokeTask@http://localhost:8100/vendor.js:51127:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:8100/polyfills.js:2780:41
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:8100/polyfills.js:2553:28
drainMicroTaskQueue@http://localhost:8100/polyfills.js:2959:25

Anybody could help to have a basic example about how to use this plugin with Ionic?

Thanks!

[DanielTizon]

Finally, I got it working. It doesn’t work on browsers, so you must use a device.

declare let audioinput: any;

import { Component } 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-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  BUFFER_SIZE: number = 16384;

  constructor(private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private file: File) {}

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

      window.addEventListener('audioinput', (event: any) => {        
        alert(JSON.stringify(event.data));
      }, 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,
    });
  }
}

[ghost]

Thank you @DanielTizon is worked for me as well!