react-wavesurfer
react-wavesurfer copied to clipboard
update getCurrentTime on audioprocess?
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.
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)}