Ionic-native-audio

提供:Dev Guides
移動先:案内検索

イオン-Cordova Native Audio

このプラグインは、Ionicアプリにネイティブオーディオサウンドを追加するために使用されます。

ネイティブオーディオの使用

このプラグインを使用できるようにするには、まずインストールする必要があります。 コマンドプロンプトウィンドウを開き、Cordovaプラグインを追加します。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio

このプラグインの使用を開始する前に、オーディオファイルが必要です。 簡単にするために、 click .mp3 ファイルを *js フォルダー内に保存しますが、好きな場所に配置できます。

次のステップは、オーディオファイルをプリロードすることです。 利用可能な2つのオプションがあります-

  • preloadSimple -一度再生される単純なサウンドに使用されます。
  • preloadComplex -ループサウンドまたはバックグラウンドオーディオとして再生されるサウンド用です。

次のコードをコントローラーに追加して、オーディオファイルをプリロードします。 オーディオファイルをプリロードする前に、Ionicプラットフォームがロードされていることを確認する必要があります。

コントローラコード

$ionicPlatform.ready(function() {
   $cordovaNativeAudio
   .preloadSimple('click', 'js/click.mp3')

   .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.log(error);
   });

   $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1)
    .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.error(error);
   });
});

同じコントローラーで、オーディオを再生するためのコードを追加します。 $ timeout 関数は、5秒後にループオーディオを停止およびアンロードします。

$scope.playAudio = function () {
   $cordovaNativeAudio.play('click');
};

$scope.loopAudio = function () {
   $cordovaNativeAudio.loop('click');

   $timeout(function () {
      $cordovaNativeAudio.stop('click');
      $cordovaNativeAudio.unload('click');
   }, 5000);
}

最後に必要なことは、オーディオを再生およびループするためのボタンを作成することです。

HTMLコード

<button class = "button" ng-click = "playAudio()">PLAY</button>

<button class = "button" ng-click = "loopAudio()">LOOP</button>

再生ボタンをタップすると、サウンドが1回聞こえ、ループボタンをタップすると、サウンドが5秒間ループして停止します。 このプラグインは、エミュレーターまたはモバイルデバイスでのみ機能します。