Ionic 5 - NativeAudio NullInjectorError

Ionic Framework Ionic Angular
1

Hello,
I have a problem with the IONIC plugin NativeAudio.
I’m using IONIC with Capacitor with this configuration

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.2.8

System:

   NodeJS : v13.11.0 (/usr/local/Cellar/node/13.11.0/bin/node)
   npm    : 6.13.7
   OS     : macOS Catalina

I install the Plugin as described in the DOC.

This is my sound service.

import {Injectable} from '@angular/core';
import {Platform} from '@ionic/angular';
import {NativeAudio} from '@ionic-native/native-audio/ngx';

const INCREASE = 'increase_audio';
const DECREASE = 'decrease_audio';


@Injectable({
  providedIn: 'root'
})
export class SoundService {
  
  private isSoundPlaying: boolean;
  private isAudioAvailable: boolean;
  
  constructor(
    private nativeAudio: NativeAudio,
    private platform: Platform
  ) {
    this.isSoundPlaying = false;
    this.isAudioAvailable = false;
    if (platform.is('hybrid')) {
      this.isAudioAvailable = true;
      this.nativeAudio.preloadSimple(INCREASE, 'sounds/increase.mp3').catch();
      this.nativeAudio.preloadSimple(DECREASE, 'sounds/decrease.mp3').catch();
    }
  }
  
  playIncrease() {
    this.playSound(INCREASE);
  }
  
  playDecrease() {
    this.playSound(DECREASE);
  }
  
  private playSound(soundId: string) {
    this.isSoundPlaying = true;
    if (!this.isSoundPlaying && this.isAudioAvailable) {
      this.nativeAudio.play(soundId).then(() => {
        this.isSoundPlaying = false;
      }, () => {
        this.isSoundPlaying = false;
      });
    }
  }
}

I inject it in a “controller” where I want to play the little sound.
I don’t inject anything in the app module, because is not reported in the documentation but I also try to put NativeAudio in the provider array but it still not working.

The error is : NullInjectorError: StaticInjectorError(AppModule)[NativeAudio]

As you can see in the image in attached.

Screenshot 2020-04-23 at 15.34.23
Screenshot 2020-04-23 at 15.34.231480×668 152 KB

Thanks to all can help me, regards

2

No Provider for NativeAudio means you have to add it to the App’s Module.

3

Yes, you are right…
I try both, with and without NativeAudio in appmodule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AuthStorageService} from './services/storage/auth-storage/auth.storage.service';
import {HeaderInterceptorService} from './services/interceptors/header/header.service';
import {IonicStorageModule} from '@ionic/storage';
import {SiteStorageService} from './services/storage/site-storage/site.storage.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      HttpClientModule,
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      IonicModule.forRoot(),
      IonicStorageModule.forRoot(),
      AppRoutingModule
  ],
  providers: [
      HttpClient,
      HttpClientModule,
      StatusBar,
      SplashScreen,
      AuthStorageService,
      SiteStorageService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: HeaderInterceptorService,
        multi: true
      },
      {
          provide: RouteReuseStrategy,
          useClass: IonicRouteStrategy
      },

  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and this

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AuthStorageService} from './services/storage/auth-storage/auth.storage.service';
import {HeaderInterceptorService} from './services/interceptors/header/header.service';
import {IonicStorageModule} from '@ionic/storage';
import {SiteStorageService} from './services/storage/site-storage/site.storage.service';
import {NativeAudio} from '@ionic-native/native-audio';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      HttpClientModule,
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      IonicModule.forRoot(),
      IonicStorageModule.forRoot(),
      AppRoutingModule
  ],
  providers: [
      NativeAudio,
      HttpClient,
      HttpClientModule,
      StatusBar,
      SplashScreen,
      AuthStorageService,
      SiteStorageService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: HeaderInterceptorService,
        multi: true
      },
      {
          provide: RouteReuseStrategy,
          useClass: IonicRouteStrategy
      }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

But it still not working…

4

your import ist wrong. You need to import from @ onic-native/native-audio/ngx

5

You are right…
Sorry, but in the doc I didn’t find it…

And do you know which is path to use to get the file audio with capacitor?

I try :

  • assets/sounds/increase.mp3
  • ./assets/sounds/increase.mp
  • file:///android_asset/assets/sounds/increase.mp3

But no one works, on Android I receive java.io.FileNotFoundException.

6

Hello man, see the first answer on “that link”, it’s just a quick fix, but it works.

7

Add plugin to your provider array in app.module.ts, so that you can use it every where in your app.

providers: [
    ...
    NativeAudio
    ...
]
8

hello, I would like to know if this plug-in is still working, and if it works with a capacitor, I am trying to use it but it is difficult