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

After some experimenting I discovered that the mp3 file needs to be imported (using import) in order to be able to play it within this environment.

So i've found a solution and edited my AudioPlayer component as follows (which works perfect):

import React, { Component } from 'react';
import './music-player.css';
//Now we import the mp3 file that this JavaScript file uses.
//This will ensure that when the project is built, 
//webpack will correctly move the mp3 file into the build folder, 
//and provide us with the right paths.  
//See docs: https://create-react-app.dev/docs/adding-images-fonts-and-files/
import mp3_file from './sounds/0010_beat_egyptian.mp3'; 

const AudioPlayer = function(props) {
    
        return (<audio id="audio_player">
        <source id="src_mp3" type="audio/mp3" src={mp3_file}/>
        <source id="src_ogg" type="audio/ogg" src=""/>
        <object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3_file}>
            <param id="param_src" name="src" value={mp3_file} />
            <param id="param_src" name="src" value={mp3_file} />
            <param name="autoplay" value="false" />
            <param name="autostart" value="false" />
        </object>
        </audio>    
        );
  
}
export default AudioPlayer;

Update 2022

In certain cases it is better to store your files (images, mp3 files etc) in the public folder. Such cases include if you need to load these files dynamically to your app. (see the docs https://create-react-app.dev/docs/using-the-public-folder/)

Due to the fact that (in my project) I have multiple mp3 files that I wanted to load dynamically I discovered that storing my mp3 files in the public folder was more suitable to my app.

Note: When storing your files in the public folder you don't need to "import" them but you must use the public environment variable (process.env.PUBLIC_URL) so that the correct path (to your public folder) will be referenced.

So here is my new solution:

1. I created a folder in the public folder called sounds.
2. I then changed my the Audio component (in the original post) to the following:

.

import React from 'react';
    const AudioPlayer = props => {
      
      let mp3_file = process.env.PUBLIC_URL + props.sounds[props.currentSoundIndex].mp3;
      return (<audio id="audio_player">
        <source id="src_mp3" type="audio/mp3" src={mp3_file} />
        <source id="src_ogg" type="audio/ogg" src={mp3_file} />
        Your browser does not support this audio player.
      </audio>  
      );
    }
    
    export default AudioPlayer;

Note: If you decide to store your files in the public folder then they won't be part of the webpack build and so therefore if a file is missing we won't get an error during compilation so we won't know it's missing. (The user will get a 404).

If you choose to store your files in the src folder then you need to use import so that webpack will know to include the files in the build. The upside to this is that you will get an error during compilation if any of the files don't exist.