How to prevent react-howler from creating a new instance of the same song while the previous one is still playing when updating the seek?

[barackm]

I am trying to create an audio player, I have been following the documentation here for the full control example,
However, when I try to update the seek of the player with my range input, the same song starts playing from the beginning while the previous one is still playing.

Here are the methods I use to manage the player seek

  // called on the onChange event
  handleSeekingChange = (e) => {
    this.setState({
      currentTime: parseFloat(e.target.value),
    });
  };

// called on the onMouseDown event
 handleMouseDownSeek = () => {
    this.setState({
      isSeeking: true,
    });
  };

 // called on the onMouseUp
  handleMouseUpSeek = (e) => {
    this.setState({
      isSeeking: false,
    });
    this.player.seek(e.target.value);
  };

  renderSeekPos = () => {
    const { states } = this.props;
    const { isSeeking } = this.state;
    const { isPlaying } = states;
    if (!isSeeking) {
      this.setState({
        currentTime: this.player.seek(),
      });
    }
    if (isPlaying) {
      this._raf = raf(this.renderSeekPos);
    }
  };

[Stenerson]

Hi @barackm, Can you include the rest of your component's code or, better yet, reproduce in a simple, stripped-down, example and include that code?

My hunch is that you're accidentally creating a new instance of react-howler somewhere or some state's not getting updated like you're expecting.

[ovionlogis]

faced the same problem, I'm sure it's related to this goldfire/howler.js#1163

[wasifhyder]

Could be caused by a song that's not fully loaded. Since you're buffering the song (assuming the file is very large). This kind of error occurs when you try to load a part of the song that's not loaded yet.

[phemartin]

I'm having the same issue. Is there a way to prevent this issue?

[thecooltechguy]

also facing this issue :((

[gavinnwang]

Having the same problem..