Player stops with Next.js Router page change

Hello,

I’m building a website that features one player at the bottom of the page (kind of like SoundCloud and MixCloud) that will allow the user to select through songs on different pages and will play the track. I’ve always used Plyr since it’s ease of use and customization.

I’ve set up one main component with Plyr that has one track for testing purposes. Code below:

const audioSrc = {
  type: 'audio',
  sources: [
    {
      src: '/audio/bad vibes forever.flac'
    }
  ]
}

export default function PlyrPlayer() {
  return (
    <div className="fixed left-0 bottom-0 w-full">
      <Plyr
        source={audioSrc}
        options={{
          keyboard: {
            global: true
          },
          debug: true,
          volume: 0.5,
          controls: [
            'play-large', // The large play button in the center
            'restart', // Restart playback
            'play', // Play/pause playback
            'fast-forward', // Fast forward by the seek time (default 10 seconds)
            'progress', // The progress bar and scrubber for playback and buffering
            'current-time', // The current time of playback
            'duration', // The full duration of the media
            'mute', // Toggle mute
            'volume', // Volume control
            'captions', // Toggle captions
            'pip', // Picture-in-picture (currently Safari only)
            'airplay' // Airplay (currently Safari only)
            // 'download' // Show a download button with a link to either the current source or a custom URL you specify in your options
          ],
          tooltips: { controls: true, seek: true },
          storage: { enabled: true, key: 'plyr' }
        }}
      />
    </div>
  )
}

And then I import the component as follows in my Layout so it renders on every page. The expected behavior would be to keep playing on every page. It was working that way when I used react-player.

However, on every page change, the player stops and restarts. I use Next Router to handle page changes.

I enabled debugging and noticed every time I load a new page, this appears in the console: Cancelled network requests

Not sure if I am missing something minor or if this is bug with nextJS routing, but I would highly appreciate any advice on how to prevent this and keep it playing. Soon I’ll add a way to select tracks and have timestamps + Firebase, etc.

Thank you!

[realamirhe]

I read somewhere in one of the issues: is the documentation going to eventually be updated for plyr-react?

That is good to hear, and we had planned to complete the doc, but we didn’t get the time for updating the current doc so much. Anyway as I mentioned the road map for new API usage has been started, and it will be backward compatibly with extra features, and we try our best to make it crystal clear. And as always any help is appreciated.

What is the best way to handle calling “getters and setters” (changing source on button click, seeking to a specific time in a song [player.currentTime = 10]]) & API methods from any component or page?

IMO the best way to use the plyr-react is conditional, in a case you need something like fullscreen, changing seek, volume or … with user interaction esp via click (and probably from another component) it is better to use our imperative API can be grabbed via the useRef and APITypes. A basic example can be found here in a codesandbox. On the other hand for interaction that needs the player to be initialized, Plyr doesn’t rely on react update mechanism itself. currently, it is dependent on source and options props, but you can connect it to any other thing if you want by simply passing the Plyr your custom key.

<Plyr key='something which cause the whole thing to be refresh and new whenever it changes' {...rest} />

Using Firebase (I’m still learning) to render track sources and call them on any page or component? (since I have one main player at the bottom and need to access it from other components and pages)

I am afraid I didn’t understand your question well but rendering from all over the place can be completely done duo to our imperative API (ref.current.plyr is complete Plyr instance).

• You may need to save the ref in some state or maybe out of reacting components variable (NOTE: It uses some anti-react pattern).
• Or lift the API ref up to common ancestor and do it all way ways and controlled. (NOTE: It may be hard because of props passing). In this case, you can use the React Context for handling all API interactions, and feel free to open a new issue if you found something unpleasant or buggy.

Finally, we are happy to hear that Plyr-react was useful for you, and that’s all open-source communication means.

[realamirhe]

Happy to hear it solves your issue, for the audio type, there are two things you must do.

1. add mime type , In your case it is "audio/wav"
2. remove the undesired provider flag.

 sources: [{
   src: audioURL,
   type: "audio/wav"
 }]

Here is a complete codesnadbox

---

Out of the topic:

The song was nice 👍🏻 🤗 In a case, you are want to hear some other thing from different cultures and languages ☘️, check this out: I Promise you

And Happy new year @erubescent