Ionic – Playing a media file with ngCordova’s $cordovaMedia

http://atomx.io/2015/01/ionic-playing-a-media-file-with-ngcordovas-cordovamedia/

f you’ve read any of our previous posts, you’ll already have an understanding of how to download a file to your device (and display it), using $cordovaFile. Now that you have the file, let’s play it.

As with the majority of the other posts, ngCordova do most of the legwork for us with their $cordovaMedia plugin.

PLUGIN INSTALLATION…

cordova plugin add org.apache.cordova.media

Now, we’ll assume you already have a media file listed and displayed on your app, and get straight into the HTML.

TEMPLATE CODE…

 class="row" style="padding-top: 0;">
   class="col play-buttons-center">
     class="button ion-ios-rewind-outline">Rewind
  

class="col play-buttons-right"> class="button ion-ios-play-outline">Play

class="col play-buttons-left"> class="button ion-ios-pause-outline">Pause

class="col play-buttons-center"> class="button ion-ios-fastforward-outline">Fast Forward

Above we have 4 buttons necessary for playing a file: Rewind, Play, Pause, and Fast Forward. When we press play the play() function is called and we pass through the download that we wish to play. The others buttons (and their functions will just work once a media object is established). Simple stuff. Now let’s look at the Controller code.

CONTROLLER CODE…

.controller('PlayerCtrl', function($scope, $ionicPlatform, $cordovaMedia, $cordovaFile) {
  var directory = 'downloads';
  var filename = 'download.mp3';
  var media;  

  $scope.play = function() {
    return $ionicPlatform.ready(function() {})
    .then(function() {
      return $cordovaFile.checkFile(directory + '/' + filename);
    })
    .then(function(file) {
      media = $cordovaMedia.newMedia(file.nativeURL);
      $cordovaMedia.play(media);
    });
  };

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

  $scope.rewind = function() {
    if (media)
    {
      $cordovaMedia.getCurrentPosition(media).then(function(res) {
      var mediaPosition = res - 15;
      var mediaInMilli = mediaPosition*1000;
      media.seekTo(mediaInMilli);
      });
    }
  };

  $scope.fastForward = function() {
    if (media)
    {
      $cordovaMedia.getCurrentPosition(media).then(function(res) {
      var mediaPosition = res + 15;
      var mediaInMilli = mediaPosition*1000;
      media.seekTo(mediaInMilli);
      });
    }
  };
}

THE PLAY FUNCTIONALITY…

In order to play the file with $cordovaMedia, you first have to create a media object that $cordovaMedia can consume. We do this by calling $cordovaMedia.newMedia()and passing in the location of the file on the device with. The trick here is to get the URL to the file in the correct format. We found the easiest way to achieve this was to use $cordovaFile.checkFile() and read the nativeURL property of the result. Finally we can play the media object by calling $cordovaMedia.play(media).

PAUSE FUNCTIONALITY…

Nothing really worth instructing here. We just check that if a media object is present, call the $cordovaMedia.pause(media) function on it.

REWIND/FAST-FORWARD FUNCTIONALITY…

Finally, the rewind/fast-forward code – which was marginally tricky, but still relatively easy and straightforward.

To rewind/fast-forward we make use of 2 functions provided by $cordovaMedia;.getCurrentPosition() and .seekTo().
$cordovaMedia.getCurrentPosition(media) will (yep, you guessed it) return the current position of the media file, IN SECONDS.
When the current position is returned, we add/subtract 15 seconds from it (var mediaPosition = res + 15;) – this is our rewind/fast-forward.
Next we want to seekTo() our new position, to perform the rewind/fast-forward. Unfortunately, seekTo() is expecting our new media’s position to be calculated in milliseconds, so we have to convert this, by simply multiplying the media position by 1000 (var mediaInMilli = mediaPosition*1000;).
We now have our new media position in milliseconds, so we can just go ahead and call media.seekTo(mediaInMilli) – this will rewind/fast-forward our media file to that position, and it will still continue to play.

$cordovaMedia  Ionic  ngCordova

• ← Previous
• Next →