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;