Html5 Audio Is Not Playing In My React App In Localhost

I'm making an mp3 player with React.js and the HTML5 web audio javascript API. I've just been learning React for two weeks so I'm just getting used to the structure and setup (with

Solution 1:

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):

importReact, { Component } from'react';
import'./music-player.css';
import mp3_file from'./sounds/0010_beat_egyptian.mp3';

constAudioPlayer = function(props) {

        return (<audioid="audio_player"><sourceid="src_mp3"type="audio/mp3"src={mp3_file}/><sourceid="src_ogg"type="audio/ogg"src=""/><objectid="audio_object"type="audio/x-mpeg"width="200px"height="45px"data={mp3_file}><paramid="param_src"name="src"value={mp3_file} /><paramid="param_src"name="src"value={mp3_file} /><paramname="autoplay"value="false" /><paramname="autostart"value="false" /></object></audio>    
        );

}
exportdefaultAudioPlayer;

Solution 2:

Try:

importReact, { Component } from'react';
import mp3_file from'./sounds/0010_beat_egyptian.mp3';

constAudioPlayer = function(props) {
  return (
    <audiosrc={mp3_file}controlsautoPlay/>
  );
}
exportdefaultAudioPlayer;

Solution 3:

Incase this helps anyone else, I had the set up pretty much same as the OP and was using the autoplay attribute, but I'd put autoplay instead of autoPlay.