CODEWITHSUNDEEP
androidtypescriptionic2
Noooo
Noooo

Reputation: 61

Ionic 2 Native Audio throwing error in browser

I started creating an app with Ionic 2, and it was going pretty well until I attempted to add sounds. I installed the NativeAudio module according to the Ionic Framework guide, and then I added these lines of code.

In app.module.ts

import { NativeAudio } from '@ionic-native/native-audio';

In game.ts

@Component({
  selector: 'page-game',
  templateUrl: 'game.html',
})
export class GamePage {
...
constructor(public navCtrl: NavController, public alertCtrl: AlertController, public navParams: NavParams, public nativeAudio: NativeAudio) {
this.nativeAudio.preloadSimple('correctMp3', '../../assets/mp3/correct.mp3');
}
}
  guessLetter(letterIn) {
        this.nativeAudio.play('correctMp3');

    }
  }

(sorry about the formatting in advance). The code was working fine before I added in the sounds, but now it throws this error when I try to load GamePage.

    Runtime Error
    Uncaught (in promise): Error: No provider for NativeAudio! Error: No
 provider for NativeAudio! at injectionError 
(http://localhost:8100/build/vendor.js:1590:86) at noProviderError 
(http://localhost:8100/build/vendor.js:1628:12) at 
ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:3129:19) 
at ReflectiveInjector_._getByKeyDefault 
(http://localhost:8100/build/vendor.js:3168:25) at ReflectiveInjector_._getByKey 
(http://localhost:8100/build/vendor.js:3100:25) at ReflectiveInjector_.get 
(http://localhost:8100/build/vendor.js:2969:21) at 
AppModuleInjector.NgModuleInjector.get 
(http://localhost:8100/build/vendor.js:3937:52) at resolveDep 
(http://localhost:8100/build/vendor.js:11398:45) at createClass 
(http://localhost:8100/build/vendor.js:11262:32) at createDirectiveInstance 
(http://localhost:8100/build/vendor.js:11082:37)

Also

Stack
Error: Uncaught (in promise): Error: No provider for NativeAudio!
Error: No provider for NativeAudio!
    at injectionError (http://localhost:8100/build/vendor.js:1590:86)
    at noProviderError (http://localhost:8100/build/vendor.js:1628:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:3129:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/vendor.js:3168:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/vendor.js:3100:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/vendor.js:2969:21)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3937:52)
    at resolveDep (http://localhost:8100/build/vendor.js:11398:45)
    at createClass (http://localhost:8100/build/vendor.js:11262:32)
    at createDirectiveInstance (http://localhost:8100/build/vendor.js:11082:37)
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/vendor.js:43003:16)
    at Tab.NavControllerBase._failed (http://localhost:8100/build/vendor.js:42991:14)
    at http://localhost:8100/build/vendor.js:43046:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076

You can view my project's structure at https://i.sstatic.net/lcBXc.png.

Upvotes: 2

Views: 1497

Answers (2)

user6358125
user6358125

Reputation:

The problem is that you just added the import in the desired file but did not add it to the provider file.

Open up:

src/app/app.module.ts

At the top of the file import the plugin, in this case NativeAudio:

import { NativeAudio } from '@ionic-native/native-audio';

Then add the Providers section the new plugin:

providers: [
    StatusBar,
    SplashScreen,
    NativeAudio, // New provider, don't forget to add comma
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]

You're all set!

Upvotes: 5

jcsubmit
jcsubmit

Reputation: 146

Are you waiting for the preload promise to be resolved?

I had a lot of trouble getting sounds on Android to work. I finally did a really simple test and this works fine:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NativeAudio } from '@ionic-native/native-audio';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  JCinfo = "start V1.1";
  JCneedLoadFlag = true;

  constructor(
      public navCtrl: NavController, 
      public nativeAudio: NativeAudio,
    ) {}

  onJCbutton(){

    if(  this.JCneedLoadFlag){

      this.nativeAudio.preloadComplex('audioTag', 'assets/audio/someSound.mp3', 1, 1, 0)
      .then((data) => {
        this.JCinfo += "\npreload ok";
        this.JCneedLoadFlag = false;

        this.nativeAudio.play('audioTag')
          .then( (data)=>{
            this.JCinfo += "\nplay ok";
          }, (errData) =>{
            this.JCinfo += "\nplay err";
          })
      }, (errdata)=>{
        this.JCinfo += "\npreload err";
      });
    } else {
        this.nativeAudio.play('audioTag')
          .then( (data)=>{
            this.JCinfo += "\nplay2 ok";
          }, (errData) =>{
            this.JCinfo += "\nplay2 err";
          });
    }
  }
}

where JCinfo is output in a textarea in the html template.

Upvotes: 0

Related Questions