react-wavesurfer icon indicating copy to clipboard operation
react-wavesurfer copied to clipboard

update getCurrentTime on audioprocess?

Open thespice opened this issue 6 years ago • 1 comments

Hi,

I've managed to statically display the current time and duration but the current time doesn't update. In wavesurfer.js you do it like this :

wavesurfer.on('audioprocess', function () {
  $('.play_counter').text( formatTime(wavesurfer.getCurrentTime()) );
});

But how do I do the same with react-wavesurfer?

This is how I'm currently calling it :

constructor(props) {
  .........
  this.handleReady = this.handleReady.bind(this);
}

handleReady(args) {
    this.current = args.wavesurfer.getCurrentTime();
    this.duration = args.wavesurfer.getDuration();
}

<WaveSurfer onReady=(this.handleReady} />

And then :

<div className="play_counter">{this.current}</div>
<div className="play_duration">{this.duration}</div>

I just don't know how to apply the audioprocess function to it.

thespice avatar Jul 08 '18 03:07 thespice

Found it. It's this.state.pos if anybody else is looking.

Here's a function to display it in minutes and seconds instead of just seconds :

formatTime() { return Math.floor((this.state.pos % 3600) / 60) + ':' + ('00' + Math.floor(this.state.pos % 60)).slice(-2); }

Call it like this :

{this.formatTime(this.state.pos)}

thespice avatar Jul 09 '18 04:07 thespice