Skip to content

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? #133

Description

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

Activity

changed the title [-]How to prevent react-howler from creating a new instance with the same song while the previous one is still playing when updating the seek?[/-] [+]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?[/+] on Apr 9, 2022

Stenerson commented on Apr 11, 2022

@Stenerson
Collaborator

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 commented on Jul 6, 2022

@ovionlogis

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

wasifhyder commented on Aug 24, 2022

@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 commented on Mar 6, 2023

@phemartin

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

thecooltechguy commented on Apr 2, 2023

@thecooltechguy

also facing this issue :((

gavinnwang commented on Jun 28, 2023

@gavinnwang

Having the same problem..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions