in src/components/Player.js [67:100]
componentDidMount() {
var ctx = document.createElement('canvas').getContext('2d');
var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
linGrad.addColorStop(0.5, 'rgba(150, 150, 150, 1.000)');
linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
this.$el = ReactDOM.findDOMNode(this)
this.$waveform = this.$el.querySelector('.wave')
this.wavesurfer = WaveSurfer.create({
container: this.$waveform,
waveColor: linGrad,
progressColor: 'hsla(200, 100%, 30%, 0.5)',
cursorColor: '#fff',
barWidth: 3,
splitChannels: true
})
this.wavesurfer.on('play', () => this.setState({playDisabled: true, pauseDisabled: false}))
this.wavesurfer.on('finish', () => this.setState({playDisabled: false, pauseDisabled: true}))
this.wavesurfer.on('pause', () => this.setState({playDisabled: false, pauseDisabled: true}))
this.wavesurfer.on('ready', () => this.updateCounters())
this.wavesurfer.on('seek', () => this.updateCounters())
this.wavesurfer.on('audioprocess', () => {
if (this.wavesurfer.isPlaying) {
var currentTime = this.wavesurfer.getCurrentTime()
var cd = moment.duration(currentTime, 'seconds')
var _cd = moment.utc(cd.asMilliseconds()).format('m:ss');
if (_cd !== this.state.audioCurrent) {this.setState({audioCurrent: _cd})}
}
})
}