HTML5 audio is not playing in my React app in localhost

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';
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;

Try:

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

const AudioPlayer = function(props) {
  return (
    <audio src={mp3_file} controls autoPlay/>
  );
}
export default AudioPlayer;