android - Ionic 2 Native Audio 在浏览器中抛出错误

Question

我开始使用 Ionic 2 创建一个应用程序，在我尝试添加声音之前，一切进展顺利。我根据 Ionic Framework 指南安装了 NativeAudio 模块，然后添加了这些代码行。

在app.module.ts中

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

在游戏.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

您可以在 /image/lcBXc.png 查看我的项目结构.

Answer 1

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

打开:

src/app/app.module.ts

在文件顶部导入插件，在本例中为 NativeAudio:

从'@ionic-native/native-audio'导入{NativeAudio}；

然后添加新插件的 Providers 部分:

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

一切准备就绪!