componentDidMount()

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})}
            }
        })
    }