离子2本地音频在浏览器中抛出错误

我开始创建一个带有离子2的应用程序，并且它一直很好，直到我尝试添加声音。我根据Ionic Framework指南安装了NativeAudio模块，然后添加了这些代码行。离子2本地音频在浏览器中抛出错误

在app.module.ts

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

在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'); 

    } 
    }

（抱歉预先格式化）。在添加声音之前，代码工作正常，但现在当我尝试加载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)

而且

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

您可以在http://i.imgur.com/QMZ2ymI.png查看我的项目的结构。

来源

2017-07-19 Noooo

您是否在等待预装承诺解决？

我在安卓上运行时遇到了很多麻烦。我终于做了一个非常简单的测试，并能正常工作：

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"; 
      }); 
    } 
    } 
}

其中JCinfo是在HTML模板中textarea输出。

来源

2017-08-04 18:31:30 jcsubmit

问题是您只是在所需的文件中添加了导入，但未将其添加到提供程序文件中。

打开了：

src/app/app.module.ts

在文件导入插件的顶部，在这种情况下NativeAudio：

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

然后添加提供程序部分的新插件：

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

你一切都准备好了！

来源

2017-09-18 19:09:02

离子2本地音频在浏览器中抛出错误

回答

相关问题