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.
RECENT COMMENTS