离子 5 - NativeAudio答案

【问题标题】：Ionic 5 - NativeAudio离子 5 - NativeAudio
【发布时间】：2020-08-06 20:51:39
【问题描述】：

我对 IONIC 插件 NativeAudio 有疑问。我将 IONIC 与具有此配置的电容器一起使用

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

我按照文档中的说明安装插件。

这是我的声音服务。

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

我将它注入到我想播放小声音的“控制器”中。我没有在 app 模块中注入任何东西，因为文档中没有报告，但我也尝试将 NativeAudio 放入提供程序数组中，但它仍然无法正常工作。

错误是：NullInjectorError: StaticInjectorError(AppModule)[NativeAudio]

如附件图片所示。

感谢所有可以帮助我的人，问候

【问题讨论】：

在 provider 部分的 app.module.ts 中添加 NativeAudio 并且将得到解决。
项目中是否安装了 ionic-native 包？离子原生设置 -> ionicframework.com/docs/native/community

标签： cordova ionic-framework ionic-native capacitor ionic5

【解决方案1】：

在 Ionic5 中，以下工作。需要“/ngx”。

app.module.ts

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

...

@NgModule({
  ...
  providers: [..., NativeAudio],
  ...
})

请注意，在最新的电容器中（截至 2021 年 6 月），资产位于 public 文件夹下而不是 www 文件夹中，然后我们将看到 NativeAudio 模块的错误，即未找到资产。我不得不按照https://github.com/ionic-team/ionic-native/issues/2685重写文件夹路径。

【讨论】：