Ionic - Cordova Media

This plugin allows us to record and playback audio files on a device.

Using Media

As with all the other Cordova plugins, the first thing we need to do is to install it from the command prompt window.

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

Now, we are ready to use the plugin. In the following code sample, src is the source mp3 file that we will use for this tutorial. It is placed in js folder, but we need to add /android_asset/www/ before it, so it can be used on android devices.

The complete functionality is wrapped inside the $ionicPlatform.ready() function to assure that everything is loaded before the plugin is used. After that, we are creating the media object by using the newMedia(src) method. The media object is used for adding play, pause, stop and release functionalities.

Controller Code

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

We will also create three buttons for calling play, pause and stop functions.

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

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

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

We need to run it on an emulator or a mobile device for this plugin to work. When the user’s tap on the play button, the song.mp3 will start playing.

You can see in the above example that we use src as an option parameter. There are other optional parameters that can be used for the newMedia method.

Optional Parameters

The following table will show all the optional parameters available.

The next table will show all the methods available.

Available Methods

The following table will show all the methods available.