CODEWITHSUNDEEP
javascriptangularjshtml5-audio
jolacaleb
jolacaleb

Reputation: 59

wavesurfer get elapsed time in real time

I'm using katspaugh's waveSurfer library for playing sound files.

I wrote code to show 'elapsed time / total time' in this way.

waveSurfer.on('play', function() {
   $scope.getCurrentDuration();
});

$scope.getCurrentDuration() is a function to transform floating-type variable to string-type variable, like below:

$scope.getDuration = function() {

  if ($scope.waveSurferReady) {
    var time = waveSurfer.getDuration(); // get duration(float) in second
    var minute = Math.floor(time / 60); // get minute(integer) from time
    var tmp = Math.round(time - (minute * 60)); // get second(integer) from time
    var second = (tmp < 10 ? '0' : '') + tmp; // make two-figured integer if less than 10

    return String(minute + ':' + second); // combine minute and second in string
  }

  else {
    return 'not ready yet'; // waveSurfer is not ready yet
  }
};

But the problem is, in this part: waveSurfer.on('play', function() ...) the callback function execute only once.

I expect the callback function called periodically, but it executes only once, so as the result, elapsed time is shown only at the start time.

How can I solve this?

Upvotes: 3

Views: 2762

Answers (1)

rnrneverdies
rnrneverdies

Reputation: 15647

Looking into the source, I've found the audioprocess event paired with html5 timeupdate event.

Try it out.

waveSurfer.on('audioprocess', function() {
   // do stuff here
});

Upvotes: 6

Related Questions