Autoplay causing auto-restart when `src` is changed and `playing=true`

If you change the source while playing=true, and then you pause and play again, you will notice the song restarts every time that you pause and replay.

To fix this simply remove autoplay from initHowler(). It’s not actually required because you call toggleHowler() right after which will handle “autoplaying” the track.

  initHowler (props = this.props) {
    this.destroyHowler()
    if (typeof Howl !== 'undefined') { // Check if window is available
      this.howler = new Howl({
        src: props.src,
/* -       autoplay: props.playing,    <-- Remove me!      */
        mute: props.mute,
        loop: props.loop,
        onend: props.onEnd,
        onplay: props.onPlay,
        onpause: props.onPause,
        onload: props.onLoad,
        onloaderror: props.onLoadError
      })
    }
  }

You can see a fork of the repo in which I made the change here: https://github.com/karlfloersch/react-howler – I didn’t submit a PR because I messed with the repo to get npm i --save https://github.com/karlfloersch/react-howler.git to work.

[Stenerson]

I’ve isolated the issue to be that we’re calling play() immediately after invoking autoplay. If I don’t call play() right after initializing, everything works great. I was also able to reproduce this in my JSBin as well by calling play() after auto starting.

I’m going to open a Howler bug but we can also play a little more nicely with Howler by changing componentWillReceiveProps() to not toggleHowler when the src is changing.

  componentWillReceiveProps (props) {
    if (props.src !== this.props.src) {
      this.initHowler(props)
    } else {
      this.toggleHowler(props) // Moved this into an else rather than always calling it
    }
  }

[thangngoc89]

Thanks for pointing this out. I’ll make a fix asap as well as install from github so you won’t need to mess around with the repo