Skip to main content

Combatting autoplay issues

Browsers place restrictions on websites that play audio without user interaction. Read on how to properly use the Remotion Player so you don't run into a browser policy.

Trigger the play from a user event​

Don't autoplay audio on site load, or else browsers will block the audio. Instead, display a play button or use the controls prop.

Pass the event to the play() or toggle() method​

The play must be initialized from a user gesture, for example a mouse click. You should get a Javascript event like a MouseEvent from it. Pass this event to the play() or toggle() function so audio may play automatically.

tsx
import { useRef } from "react";
import { Player, PlayerRef } from "@remotion/player";
 
export const App: React.FC = () => {
  const ref = useRef<PlayerRef>(null);
  return (
    <div>
      {/* Player implementation */}
      <button
        onClick={(e) => {
          const { current } = ref;
          current?.toggle(e);
        }}
      >
        Play
      </button>
    </div>
  );
};
tsx
import { useRef } from "react";
import { Player, PlayerRef } from "@remotion/player";
 
export const App: React.FC = () => {
  const ref = useRef<PlayerRef>(null);
  return (
    <div>
      {/* Player implementation */}
      <button
        onClick={(e) => {
          const { current } = ref;
          current?.toggle(e);
        }}
      >
        Play
      </button>
    </div>
  );
};

Use the numberOfSharedAudioTags property​

If your audio does not enter the video immediately (say the few seconds of the video are silent, but then the audio fades in), it technically doesn't start based on an user interation. To combat this issue, you can use the numberOfSharedAudioTags property. This will play some silent audio on the first play with user interaction, and then reuse that tag to play your deferred audio playback.

You can have as many silent audio tags as you want. Set numberOfSharedAudioTags={2} to prepare two shared audio tags. Be mindful: If you set this props and you render more <Audio/> than there are shared audio tags, an exception will be thrown.

warning

Due to a bug on our side, this prop does not work with React Strict Mode. If you use Next.JS, set reactStrictMode: false, in your next.config.js to false. Remove any <React.StrictMode/> tags in your app if you intend to use this prop. You can follow this bug on GitHub.