react-howler
react-howler copied to clipboard
thangngoc89
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?
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);
}
};
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.
faced the same problem, I'm sure it's related to this https://github.com/goldfire/howler.js/issues/1163
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.
