wavesurfer.js

wavesurfer.js copied to clipboard

i am facing problem like when i m playing first song and then i pass to second song while playing first one. wavesurfer audioprocess events still keeps on firing till the second audio loads and its fires ready events because of this i m getting the wrong progress of audio which fluctuates the wavesurfer drawer i also tried to pause the wavesurfer and load the next song, but it wass helpless

can you show a minimal example that reproduces this issue?

    this.wavesurfer = WaveSurfer.create({
            cursorWidth: 1,
            container: ReactDOM.findDOMNode(this.waveref),
            scrollParent: false,
            height: 45,
            progressColor: '#333333',
            waveColor: '#d6d6d6',
            normalize: true,
            cursorColor: '#fff',
            audioRate: 1,
            barWidth: 1,
            barGap: 2,
            backend: 'MediaElement',
            responsive: true,

            // partialRender: true,
            pixelRatio: 1,
            splitChannels: true
        });
        if (this.props.songDetail.peaksKey) {
            const res = await this.props.getWaveForm(this.props.songDetail.peaksKey);
            if (res) {
                this.waveformData = JSON.parse(res.Body);
                this.wavesurfer.backend.peaks = this.waveformData;
                this.wavesurfer.drawBuffer();
                // if (this.props.songDetail.playing)
                //     this.wavesurfer.load(process.env.REACT_APP_S3_URL + this.props.songDetail.s3Key, this.wavesurfer.backend.peaks);
            }
        }


//loaded in componentDidMount

   this.wavesurfer.on('audioprocess', (time) => {
            if (!this.props.controlSync) {
                const totalTime = this.wavesurfer.getDuration();
                const currentTime = this.wavesurfer.getCurrentTime();
                const progress = this.secToPos(currentTime);
                this.props.setSyncSongPostion(this.props.songDetail._id, progress);
                this.setState({
                    currentTime: currentTime.toFixed(1),
                    totalTime: totalTime.toFixed(1),
                });
            }
        });

//i have controlled audioprocress hiting by (controlSync) this flag whenever i load the new songin //componentWillReceiveProps

    if (this.props.songDetail._id !== nextProps.songDetail._id) {
            let waveformData = null;
            console.log("in next")//here i am loading new song with new peaks
            this.props.controlNewAudioSync(true)
            this.wavesurfer.loaded = false
            if (nextProps.songDetail.peaksKey) {
                const res = await this.props.getWaveForm(nextProps.songDetail.peaksKey);
                if (res) {
                    waveformData = JSON.parse(res.Body);
                    if (waveformData) {
                        this.wavesurfer.load(
                            process.env.REACT_APP_S3_URL + nextProps.songDetail.s3Key,
                            waveformData
                        );
                        this.wavesurfer.loaded = true
                    } else {
                        setTimeout(() => {
                            try {
                                this.wavesurfer.load(process.env.REACT_APP_S3_URL + nextProps.songDetail.s3Key);
                                this.wavesurfer.loaded = true
                                // this.props.controlNewAudioSync(true)
                            } catch (erorr) {
                                console.log("err", erorr)
                            }
                        }, 100);
                    }
                }
            }
        }

we can not test this code, but i see that you set this.wavesurfer.loaded = true directly after the load, but this is async, you should use the ready event until you can play the audio, only a shot in the dark

     this.wavesurfer.on('ready', (progress) => {
            console.log('ready', this.props.songDetail.playing, this.wavesurfer.loaded);
            if (this.props.songDetail.playing) {
                // setTimeout(() => {
                //     this.props.controlNewAudioSync(false)
                //     this.playIt();
                // }, 10000);
                setTimeout(() => {
                    if (this.props.songDetail.pos && this.props.songDetail.pos > 0 && this.wavesurfer.loaded) {
                        try {
                            this.seekTo(this.props.songDetail.pos)
                            this.props.controlNewAudioSync(false)
                            this.playIt();
                        } catch (errr) {
                            // console.log('2222222222222222', errr)
                            setTimeout(() => {
                                this.seekTo(this.props.songDetail.pos)
                                this.props.controlNewAudioSync(false)
                                this.playIt();
                            }, 10000);
                        }
                    }
                    else if (this.props.songDetail) {
                        setTimeout(() => {
                            this.seekTo(this.props.songDetail.pos)
                            this.props.controlNewAudioSync(false)
                            this.playIt();
                        }, 1000);
                    }
                    else if (this.props.songDetail.pos === 0) {
                        this.props.controlNewAudioSync(false)
                        this.playIt();
                    }
                }, 50);
            }
            else if (!this.props.songDetail.playing && this.wavesurfer.loaded) {
                this.props.controlNewAudioSync(false)
                this.pauseIt();
            }
        });

i have kept ready event also , but the issue is same , its keeps calling the audioprocess events. untill the new source not loaded , till that it gives NaN value in audioprocess events

Is this resolved? I face the same issue where the audioprocess event seems to be firing after stopping recording. So the next time I start recording, the waveform becomes janky and it just gets worse everytime i do it