Is There A Way To Auto Play Audio In React Without Using An Onclick Event?

I'm getting this error when trying to play audio within componentDidMount. 'Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document fir

Solution 1:

Autoplay Policy Changes no longer allow autoplay without user interaction first.

• Muted autoplay is always allowed.
• Autoplay with sound is allowed if:
  • User has interacted with the domain (click, tap, etc.).
  • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
  • The user has added the site to their home screen on mobile or installed the PWA on desktop.
• Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

The only way to bypass this would be your mouse movement implementation

Solution 2:

The error message you've got is pretty much self-explaining. Most of the modern browsers prevent audio/video autoplay before user interaction with the page. They do so to avoid certain undesired effects for the user (for instance, a user might have maximum audio volume set & auto-playing loud audio might surprise/scare her).

There are certain hacks you can try out, but none is really guaranteed to work cross-browser.