I am currently working on integrating Videogular into my audio player application. Below are the settings provided in the example code on this particular page:
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
However, I am dealing with audio files that exceed one hour in length, thus requiring a format of "hh:mm:ss". When I attempt to change the format to hh:mm:ss, it mistakenly adds approximately 5 hours to the duration, resulting in 00:01:30 being displayed as 05:01:30.
After some trial and error, I discovered making the following adjustment within "videogular.js" resolves the issue:
this.onUpdateTime = function (event) {
$scope.API.currentTime = 1000 * event.target.currentTime - (1000 * 60 * 300 * 5 * 5);
if (event.target.duration != Infinity) {
$scope.API.totalTime = 1000 * event.target.duration - (1000 * 60 * 300 * 5 * 5);
$scope.API.timeLeft = 1000 * (event.target.duration - event.target.currentTime) - (1000 * 60 * 300 * 5 * 5);
$scope.API.isLive = false;
}
}
Unfortunately, this modification also impacts the subsequent code which I have been unable to rectify:
percentTime = 100 * (newCurrentTime / API.totalTime);
elem.css("width", percentTime + "%");