Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Player stops with Next.js Router page change

See original GitHub issue


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">
          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' }

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!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

realamirhecommented, Jan 2, 2022

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' {} />

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.

realamirhecommented, Jan 1, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

nextJs how to stop audio from playing when route changes
I don't get it! I've tried setting up event listeners for beforeunload and routeChangeStart import { useEffect, FunctionComponent, useRef } ...
Read more >
next/router | Next.js
When navigating to the same page in Next.js, the page's state will not be reset by default as react does not unmount unless...
Read more >
Not scroll to top after changing route · Issue #28778 - GitHub
I found a solution by adding the following experimental setting to my next.config.js: experimental: { scrollRestoration: true, },.
Read more >
Understanding Next.js routeChangeStart and router events
Next.js routeChangeStart and other router events make it possible for us to listen to events regarding navigations from one page to another.
Read more >
Next.js Full Course - Routing - YouTube
What is next. js. A reactjs framework to create scalable server-side rendering application. Next. js routingFull course at ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found