Question

My idea is to save the player’s current state(“play”, “pause” or “stop”), playlist and the track’s time as soon as user navigates away from this page or reloads it. As soon as the page reloads, the player should continue playing last track (if we reloaded the page when player was playing) from the last location (time).

But I’m facing a strange behaviour. When the player is playing the track and I reload the page, the player, it does does what I wanted plus it plays the same track twice overlapping each other One more thing, you can control one track but I don’t know where the other one is playing?

Try to pause and then play to see if two tracks are playing.

Here’s the code that loads the playlist, calls play() and then seek() of flowplayer

            function reLoadPlaylist(id){
                $f(id).play(playlist);
                $f(id).pause();
                window.setTimeout(function(){
                    $f(id).seek(currentTime);
                    switch(playState){
                      case 'play':
                          $f(id).resume();
                          break;
                      case 'pause':
                          $f(id).pause();
                          break;
                      case 'stop':
                          $f(id).stop();
                          break;
                    }
                  },2000);
                }

playlist is a JSON object, if defined it looks like this:

    playlist: [{
      url : 'framing.mp3',
      title : 'Farming'
    }]

Any idea what’s wrong?
Check out the behaviour live (URL Updated)

Answer 1

For the record, I am adding this as the answer.
So re posting my comment as an answer.

Ok, I have figured it out my self! $f(id).pause(), after the $f(id).play() caused the problem. This question is closed from my side. thanks to @RyanKina for helping