Ionic - Cordova Media

此外掛允許我們在裝置上錄製和播放音訊檔案。

使用媒體

與所有其他 Cordova 外掛一樣，我們首先需要從命令提示符視窗安裝它。

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

現在，我們已準備好使用該外掛。在以下程式碼示例中，src 是我們將用於本教程的源 mp3 檔案。它位於 js 資料夾中，但我們需要在它前面新增 /android_asset/www/，以便它可以在 Android 裝置上使用。

完整的功能封裝在 $ionicPlatform.ready() 函式中，以確保在使用外掛之前已載入所有內容。之後，我們使用 newMedia(src) 方法建立 media 物件。media 物件用於新增播放、暫停、停止和釋放功能。

控制器程式碼

.controller('MyCtrl', function($scope, $ionicPlatform, $cordovaMedia) {
   $ionicPlatform.ready(function() {
      var src = "/android_asset/www/js/song.mp3";
      var media = $cordovaMedia.newMedia(src);

      $scope.playMedia = function() {
         media.play();
      };

      $scope.pauseMedia = function() {
         media.pause();
      };

      $scope.stopMedia = function() {
         media.stop();
      };

      $scope.$on('destroy', function() {
         media.release();
      });
   });
}

我們還將建立三個按鈕來呼叫播放、暫停和停止函式。

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

<button class = "button" ng-click = "pauseMedia()">PAUSE</button>

<button class = "button" ng-click = "stopMedia()">STOP</button>

我們需要在模擬器或移動裝置上執行它才能使此外掛工作。當用戶點選播放按鈕時，song.mp3 將開始播放。

您可以在上面的示例中看到我們使用 src 作為可選引數。newMedia 方法可以使用其他可選引數。

可選引數

下表將顯示所有可用的可選引數。

下表將顯示所有可用的方法。

可用方法

下表將顯示所有可用的方法。