質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

ionic4で音を鳴らしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,301

score 4

前提・実現したいこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

自己解決しました。

最終的には「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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る