It’s common knowledge that all good media players can only be considered dev complete, AFTER the implementation of a range slider. Without a range slider, you might as well just toss that shit in the trash, ‘cos ain’t nobody got time fo’ dat. Don’t be that guy. Implement a ranger slider. The following blog post should help you on your way.

In another post we described how to play a media file. The following HTML would go in the same template file as the HTML does in that post.

Template HTML…

 <div class="range range-positive">
    <input type="range" name="podcast-position" min="0" max="{{model.media.length}}" ng-model="model.currentPos" ng-change="sliderPositionChange()"> 
 </div>

The above HTML specifies a start point and an end point for the media, using: min and max, where ‘min’ is the point position that the media will start, and ‘max’ is the length of time to the end of the media.
Since it’s a range slider, we’d obviously want to be able to change the play position of the media by moving the range slider itself. To do this, we need an ng-change and a function that changes the media’s play position: sliderPositionChange().
Ng-model simply tracks the position of the media based on the position of the range slider – it’s position is stored in the model.currentPos variable.

Now we’ve got that out of the way, let’s look at the ng-change function that will allow our range slide to work.

Controller code…

.controller('PlayCtrl', function($scope, $ionicPlatform, $cordovaMedia) {<del datetime="2015-01-21T23:10:51+00:00">
   
   $scope.model = {}; 

   $interval(function() {
     $cordovaMedia.getCurrentPosition(media).then(function(res){
       $scope.model.currentPos = res;
     }); 
   },1000);

   $scope.sliderPositionChange = function() {
     var mediaInMilli = $scope.model.currentPos*1000;
     media.seekTo(mediaInMilli);
   };
});

The most important part about the above code is the $interval function. Inside it we get the current position of the media with $cordovaMedia.getCurrentPosition(media), and assign it to the $scope.model.currentPos variable. The interval period is set at 1000 milliseconds. Now, every second, the $scope.model.currentPos variable will get updated, and since the ng-model of our range slider is model.currentPos, the range slider will update every second too.

The $scope.sliderPositionChange() function above is called when the range slider is moved. When the range slider is moved the ng-model=”model.currentPos” variable is updated and passed into the ng-change="slider.PositionChange()" function (see HTML).
The code inside the $scope.sliderPositionChange function is almost identical to the rewind/fast-foward code in the previous post… The model.currentPos variable is in seconds, the $cordovaMedia.seekTo() function needs the position to be in milliseconds, so we just multiply model.currentPos by 1000, and pass that into the seekTo() function.

Done. So simple, i think everybody got time fo’ dat.

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