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 newMediamethod.

Optional Parameters

The following table will show all the optional parameters available.

Parameter	Type	Details
mediaSuccess	function	Called after current play/record or stop action has completed.
mediaError	function	Invoked when there is an error.
mediaStatus	function	Invoked to show status changes.

The next table will show all the methods available.

Available Methods

The following table will show all the methods available.

Method	Parameters	Details
newMedia(parameter1)	src	Returns media object that will be used for future methods. src is an URI of the audio content.
getCurrentPosition	/	Returns the current position within an audio file.
getDuration	/	Returns the duration of an audio file.
play	/	Used to start or resume playing.
pause	/	Used to pause playback.
stop	/	Used to stop playing.
release	/	Used to release audio resources.
seekTo(parameter1)	milliseconds	Used to set the playback position in milliseconds.
setVolume(parameter1)	volume	Used to change volume. Range is from 0 to 1
startRecord()	/	Used to start recording.
stopRecord	/	Used to stop recording.