Player stops with Next.js Router page change

[erubescent]

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]

Hi @erubescent, thank you for sharing that.
I'm afraid I didn't quite understand your need but here are some tips that may be helpful.

Player re-initialize its player via options or source change. memorizing them can be helpful.

define them outside the component scope

If you need more dynamism in your component, useMemo or memo can save the part of UI for you to make them immune from the rest of the updates.

const plyrVideo = useMemo(
    () =>
      videoId && provider ? (
        <Plyr
          ref={ref}
          source={{type: "video", sources: [{src: videoId, provider: provider}]}}
          options={videoOptions}
        />
      ) : null,
    [videoId && provider]
  );

Check out this sandbox for full version .

• In case you found any part challenging, feel free to post it here Main challenges you have using plyr-react? #667.
• In case you think more control over the Plyr component is needed, here is the next proposal version Proposal for plyr-react component update #678

Your suggestion or help (PR) may make the progress smoother.

[erubescent]

Hi @amirHossein-Ebrahimi, thanks for responding!

When using the code in my project, I get the desired functionality in having the content play across every page without interrupting playback on page changes. I'm fairly new to how React has changed so this is really helpful, thank you. I've also tested this without using useMemo() and the video initializes again every time I change the page, so that's good news knowing 'useMemo()' can solve this issue.

How would I use the code you shared for audio? I've tried changing the parameters and making the type:"audio" but I don't get a player output like I see in your codesandbox with the video. There's something I must be missing.

Check my sandbox here.

[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

[erubescent]

Hi! Thank you so much, @amirHossein-Ebrahimi,
it works! 🎉 💃 Also, I love that song. It's very pretty.

Happy new year to you as well!! Cheers 🍻

I thought I was missing something simple. I appreciate all of your help. 😇

~ I read somewhere in one of the issues: is the documentation going to eventually be updated for plyr-react? I've been following the Plyr documentation and its very helpful, but of course React is a lot more functional. I'm used to vanilla JS, and React has so much more functionality and I love it.

I have a few more questions if you don't mind so I can get a better understanding on how to use plyr-react with what I am building:

1. 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?

2. 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 eventually plan to render details about specific songs from a database, have pages linking to timestamps, and more. This would be extremely helpful to understand how other websites do this (like SoundCloud and MixCloud) and how I can implement it on my own.

Again, thank you for everything. Looking forward to hearing from you, and I hope this year is better than last! :))

[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.