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…

<div class="row" style="padding-top: 0;">
  <div class="col play-buttons-center">
    <button class="button ion-ios-rewind-outline">Rewind</button>
  </div>
  <div class="col play-buttons-right">
    <button class="button ion-ios-play-outline">Play</button>
  </div>
  <div class="col play-buttons-left">
    <button class="button ion-ios-pause-outline">Pause</button>
  </div>
  <div class="col play-buttons-center">
    <button class="button ion-ios-fastforward-outline">Fast Forward</button>
  </div>
</div>

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 →

• Pingback: Ionic – Range slider when playing a file with ngCordova’s $cordovaMedia | AtomX | Life through code.()

• jithin d raj

  hi,Thanks for the great tutorial.I am new to ionic ,angular.js and even in javascript too..I followed your tutorial and was able to play audio.But when all i code like $cordovaMedia.play i am getting an error like “”TypeError: Object # has no method ‘getCurrentPosition'”.But when i changed to the variable ,ie media.play(),its getting played.Why is it like that?And in both cases the “getCurrentposition” function is showing the same error..!!can you please help

• Guilherme Couto

  Hi. Thanks for this tutorial. Is it possible to use this plugin in a Audio Stream on iOS? I use on Android, and works very fine. But on iOS I have this error:

  Dec 27 22:30:22 Mac-mini-de-Guilherme RockOnline[2754]: Will use resource ‘http://192.198.204.194:9020’ from the Internet.
  Dec 27 22:30:23 Mac-mini-de-Guilherme RockOnline[2754]: Failed to initialize AVAudioPlayer: The operation couldn’t be completed. (OSStatus error 1954115647.)
  Dec 27 22:30:23 Mac-mini-de-Guilherme RockOnline[2754]: THREAD WARNING: [‘Media’] took ‘960.675049’ ms. Plugin should use a background thread.

  Resuming the logs:

  The application try to load the streaming from http://192.198.204.194:9020 (works on Android)

  Failed to initialize AVAudioPlayer The operation couldn’t be completed.

  THREAD WARNING: [‘Media’] took ‘960.675049’ ms. Plugin should use a background thread

  But if I try to load a file .mp3, work very fine.

  Bellow are my seetings:

  Cordova CLI: 5.4.1

  Ionic Version: 1.2.1-nightly-1867

  Ionic CLI Version: 1.7.12

  Ionic App Lib Version: 0.6.5

  ios-deploy version: 1.8.3

  ios-sim version: 5.0.4

  OS: Mac OS X El Capitan

  Node Version: v4.2.4

  Xcode version: Xcode 7.0.1 Build version 7A1001