ionic4で音を鳴らしたい

前提・実現したいこと

ionicを使ってアプリ開発をしています。

アプリ内で音声データ(BGM,タップ)を鳴らしたいです。

発生している問題・エラーメッセージ

「NativeAudio」を使用して音を鳴らそうと思い実装したのですが、
コンストラクタに「NativeAudio」を設定するとアプリが停止してしまいます。
※splash画像が表示されたのち、真っ白の画面になり先に進まない状況です。

コンソール画面にはエラーは出ていません。
ios実機、android実機、web全てで発生しております。

該当のソースコード

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

export class HomePage {
  constructor(
    private nativeAudio: NativeAudio,
    ...
  ){}

  ngOnInit(){
    this.play();
  }

  play(){
    //this.nativeAudio.preloadSimple('uniqueId1', 'assets/audio/bgm.mp3');
    //this.nativeAudio.play('uniqueId1',() => console.log('uniqueId1 is done playing'));
    //this.nativeAudio.loop('uniqueId1')
    //this.nativeAudio.setVolumeForComplexAsset('uniqueId1', 0.6);
  }
}

試したこと

○使用する関数について
当方の目的としては音を鳴らしたいことですので、「NativeAudio」以外も試しております。

「Audio」関数を使用して音を鳴らすことはできましたが、
マナーモード時にもなってしまうため利用を断念しました。

「Media」関数でも音を鳴らすことができるとあったため試しましたが、
「NativeAudio」と同様の結果となりました。

○バージョン情報について
「NativeAudio」をnpm installした際に「@4.20.0」がインストールされまして、
「@4.20.0」を覗くと「ngx」ディレクトリが見当たらなかったため最新バージョンにアップデートしております。

nodo_moduleやpluginsについて確かな知識がないため、誤ったバージョン管理をしている可能性がございます。

補足情報（FW/ツールのバージョンなど）

$ ionic info

Ionic:

Ionic CLI : 5.0.3
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 6.4.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)

Utility:

cordova-res : 0.5.1
native-run : 0.2.6

System:

Android SDK Tools : 26.1.1
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v11.13.0
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001

$ ng version
Angular CLI: 7.3.9
Node: 11.13.0
OS: darwin x64
Angular: 7.2.15
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package Version
@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cli 7.3.9
@angular/fire 5.2.1
@angular/pwa 0.12.4
@ngtools/webpack 7.3.9
@schematics/angular 7.3.8
@schematics/update 0.13.9
rxjs 6.5.2
typescript 3.1.6
webpack 4.29.0

$ npm ls --depth=0
├── @angular-devkit/architect@0.13.9
├── @angular-devkit/build-angular@0.13.9
├── @angular-devkit/core@7.3.9
├── @angular-devkit/schematics@7.3.9
├── @angular/cli@7.3.9
├── @angular/common@7.2.15
├── @angular/compiler@7.2.15
├── @angular/compiler-cli@7.2.15
├── @angular/core@7.2.15
├── @angular/fire@5.2.1
├── @angular/forms@7.2.15
├── @angular/http@7.2.15
├── @angular/language-service@7.2.15
├── @angular/platform-browser@7.2.15
├── @angular/platform-browser-dynamic@7.2.15
├── @angular/pwa@0.12.4
├── @angular/router@7.2.15
├── @angular/service-worker@7.2.15
├── @ionic-native/admob-free@5.10.0
├── @ionic-native/core@5.8.0
├── @ionic-native/media@5.9.0
├── @ionic-native/native-audio@5.13.0
├── @ionic-native/splash-screen@5.8.0
├── @ionic-native/status-bar@5.8.0
├── @ionic/angular@4.5.0
├── @ionic/angular-toolkit@1.5.1
├── @ionic/lab@2.0.10
├── @types/jasmine@2.8.16
├── @types/jasminewd2@2.0.6
├── @types/jquery@3.3.29
├── @types/node@10.14.9
├── angular@1.7.8
├── codelyzer@4.5.0
├── cordova-admob-sdk@0.24.1
├── cordova-android@6.4.0
├── cordova-android-play-services-gradle-release@4.0.0
├── cordova-ios@5.0.1
├── cordova-plugin-admob-free@0.27.0
├── cordova-plugin-device@2.0.2
├── cordova-plugin-file@6.0.1
├── cordova-plugin-game-center@0.4.2 (git+https://github.com/leecrossley/cordova-plugin-game-center.git#ffcc077c6a6b6bd5c93244801367c245ed2dda54)
├── cordova-plugin-gamecenter@0.4.0 (git+https://github.com/Wizcorp/cordova-plugin-gamecenter.git#30146c96f592f219e0fd46a19a7f5b2f9f168586)
├── cordova-plugin-ionic-keyboard@2.1.3
├── cordova-plugin-ionic-webview@4.1.0
├── cordova-plugin-media@5.0.2
├── cordova-plugin-nativeaudio@3.0.9
├── cordova-plugin-splashscreen@5.0.2
├── cordova-plugin-statusbar@2.4.2
├── cordova-plugin-whitelist@1.3.3
├── cordova-promise-polyfill@0.0.2
├── core-js@2.6.9
├── firebase@5.11.1
├── ionic-angular@3.9.6
├── jasmine-core@2.99.1
├── jasmine-spec-reporter@4.2.1
├── karma@4.1.0
├── karma-chrome-launcher@2.2.0
├── karma-coverage-istanbul-reporter@2.0.5
├── karma-jasmine@1.1.2
├── karma-jasmine-html-reporter@0.2.2
├── moment@2.24.0
├── protractor@5.4.2
├── rxjs@6.5.2
├── rxjs-compat@6.5.2
├── ts-node@8.1.1
├── tslib@1.10.0
├── tslint@5.16.0
├── typescript@3.1.6
└── zone.js@0.8.29

$ npm ls -g --depth=0
├── @angular/cli@8.0.3
├── cordova@9.0.0
├── cordova-res@0.5.1
├── ionic@5.0.3
├── ios-deploy@1.9.4
├── native-run@0.2.6
├── npm@6.9.0
├── npm-check-updates@3.1.21
├── to@0.2.9
├── typings@2.1.1
└── update@0.7.4

修正方法もしくは別関数があればご教授ください

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。

最終的には「howler.js」を利用しましたが、質問の問題も解決しました。
備忘録として残します。

スプラッシュ画面ののち進まなくなる原因

app.module.tsの設定が抜けていたため


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

@NgModule({
  ...
  providers: [
     NativeAudio　//追加
  ],

androidでは音がなることを確認。
iosでは音がならなかったため、「howler.js」に切り替え

エラーと関係していたかはわかりませんが、@ionic-native/coreのバージョンがNativeAudioと一致していなかったためダウングレードしました。

###hower.js実装

インストール

$ npm i -D howler

ソースコード

//インポート追加
import { Howl, Howler } from 'howler';

play(){
  //読み込み+ループ設定
  var sound = new Howl({src: ['assets/audio/bgm.mp3'],loop: true,});
  //再生
  sound.play();
}

マナーモード時に音がオフになることをiosで確認。
※所持しているandroidデバイス(android 9)は高度なマナーモードの設定が見つからなかったため不明
※audio関数を併用している場合はマナーモード時にもなりました。
参考：https://qiita.com/okumurakengo/items/5ba385f50763ed79808d

投稿2019/09/06 10:00

tobamuneki

総合スコア4