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

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;

Solution 2:

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;

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.