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

Question

我开始使用 Ionic 2 创建一个应用程序，并且在我尝试添加声音之前它运行良好。我按照 Ionic Framework 指南安装了 NativeAudio 模块，然后我添加了这几行代码。

在 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查看我的项目结构。

Answer 1

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

打开：

src/app/app.module.ts

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

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

然后在 Providers 部分添加新插件：

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

一切就绪！

Answer 2

您是否正在等待解决预加载承诺？

在 Android 上让声音正常工作时遇到了很多麻烦。 我终于做了一个非常简单的测试，效果很好：

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 中输出。