Audio Duplication with ReactPlayer in Next.js using --turbo Flag

[l-Nuril-l]

Current Behavior

When using ReactPlayer in a Next.js project with the --turbo flag enabled, audio is duplicated starting from version 2.14 up to 2.16 of react-player. The issue does not occur in earlier versions (e.g., 2.13). This happens when toggling the ReactPlayer component based on state and occurs only the first time after the page loads.

Expected Behavior

Audio should play without duplication when ReactPlayer is triggered, and the sound should play as expected without overlapping.

Steps to Reproduce

1. Use Next.js with the --turbo flag ("dev": "next dev --turbo").
2. Include the ReactPlayer component that streams video from a local or remote source.
3. Toggle the player using a button to initiate playback.
4. Observe that, starting from react-player versions 2.14 - 2.16, the sound is duplicated.

Environment

• Browser: Chrome 129
• Operating system: Windows 11

Code Example

"use client"
import React, { useState } from 'react';
import ReactPlayer from 'react-player';

export default function page() {
    const [state, setState] = useState(false);
    return (
        <div>
            <button onClick={() => setState(true)}>click</button>
            {state && <ReactPlayer url='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' playing={true} />}
        </div>
    );
}

[Deamoner]

I have this same issue. Any update?

[Deamoner]

Pretty sure this has to do with react strict mode in nextjs. In prod doesn't happen and seems to be temporary fixable with nextjs config change:
module.exports = {
// Only do this for testing - don't commit this change
reactStrictMode: false,
// ... other config
}

[arjuna-wenzel]

I'm also having the same issue, but for me it's both in an built app and in dev

[JoseRaulLH]

same issue here

[vincentwinkel]

Same issue here.

The issue occurs only for media files (no embedded players) and only if they are the 1st media to be played (eg. I play first youtube then mp3, no problem, then I reload the page and play directly mp3 -> audio duplicated).

[robertmalicke]

Yes, this is a major issue for me. I confirm that the there is a duplicate audio issue that exists in NextJs for external media files and ONLY if it is the 1st media to be played. If it is the 1st media to be played, and if it is played after initial load, with playing=true, then there is a duplicate audio stream.

[luwes]

Is this still an issue in v3? please provide a test example for debugging purposes, thanks!

[vincentwinkel]

Personally I wont move to v3. You dropped half of the platforms and I'm not sure to understand how this project is still useful, except promoting Mux.

[luwes]

I see how you might interpret it this way. The main reason we dropped those platforms are because there are no media-elements available yet for those platforms. We decided to use our media-elements in ReactPlayer to not have to duplicate work and to support custom controls via Media Chrome.

We're happy to add them back if a media element is created for them.
It's not with bad intention we removed those. Someone has to maintain all these things.

See #1843

[Aluisio]

I use this lib in my SaaS basically for the progressInterval and onProgress properties to save the progress watched by the user at each time period. However, this was removed in v3, and for me to implement this logic manually is the same work as using an iFrame, listening to the events and doing the processing (as I have already done for other players that the lib does not support).
I will probably also stop using this lib

[luwes]

@Aluisio thanks for the feedback. Could you please add that feature request to https://github.com/cookpete/react-player/discussions/categories/ideas so we can gauge interest. If there are enough votes it can be added back in.

The idea with v3 was also to start with a clean slate and make the API as simple and as inline with the HTMLVideoElement API as possible.