07
Jan

Ionic – Range slider when playing a file with ngCordova’s $cordovaMedia

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.

  • 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 ‘play'”.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..!! ie,$cordovaMedia.getCurrenPosition and media.getCurrentPosition are not working and showing an error like “”TypeError: Object # has no method ‘getCurrentPosition'” can you please help!!!!!??