O áudio HTML5 não está sendo reproduzido no meu aplicativo React no host local
Estou criando um mp3 player com o React.js e a API javascript de áudio da web HTML5. Acabei de aprender o React por duas semanas, por isso estou me acostumando à estrutura e configuração (com componentes etc.), mas tenho vários anos de experiência com JavaScript.
Eu tinha o mp3 player funcionando ao usar o React no navegador. I.e. Eu tinha um arquivo index.html e incluí os scripts React da seguinte maneira:
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
Agora eu gostaria de me acostumar com a criação de um aplicativo React usando a linha de comando e o host local, então comecei a reescrever o código para uso nesse ambiente. Comecei criando o aplicativo esqueleto da seguinte maneira:
create-react-app my-app
cd my-app/
npm start
Em seguida, adicionei meus próprios componentes etc. O aplicativo está sendo exibido corretamente no localhost: 3000, mas os arquivos de áudio não parecem estar sendo reproduzidos neste ambiente. Não tenho certeza se o problema está diretamente relacionado ao áudio HTML5 simplesmente não está funcionando no host local ou se é outra coisa. Não há erros sendo retornados.
Simplifiquei meu código e também codifiquei no diretório do arquivo mp3 para a tag de áudio (consulte o componente AudioPlayer) por enquanto, para ver se consigo fazer o elemento de áudio funcionar.
Você pode ver alguma coisa que eu possa estar perdendo? obrigado
Componente do aplicativo import React, { Component } from 'react';
import Header from './Header';
import AudioPlayer from './AudioPlayer';
import Controls from './Controls';
import './music-player.css';
import './css/font-awesome.css';
class App extends Component {
//This class is the main component of the application.
//it contains the header, the audio player and the side panel components.
constructor(props) {
super(props);
this.state = {
sidePanelIsOpen: false,
currentSoundIndex: 0,
isPlaying: false,
playerDuration: 0,
currentTime: "0:00",
currentWidthOfTimerBar: 0,
backButtonIsDisabled: false,
forwardButtonIsDisabled: false,
playButtonIsDisabled: false
};
this.toggleSidePanel = this.toggleSidePanel.bind(this);
}
componentDidMount() {
this.player = document.getElementById('audio_player');
this.player.load();
this.player.play(); //this is not doing anything
}
toggleSidePanel(){
var sidePanelIsOpen = this.state.sidePanelIsOpen;
this.setState({sidePanelIsOpen: !sidePanelIsOpen})
}
render() {
return(<div>
<div id="main-container" className={this.state.sidePanelIsOpen === true ? 'swipe-left' : ''}>
<div className="overlay">
<AudioPlayer sounds={this.props.sounds} currentSoundIndex={this.state.currentSoundIndex} />
</div>
</div>
<div id="side-panel-area" className="scrollable">
<div className="side-panel-container">
<div className="side-panel-header"><p>Menu</p></div>
</div>
</div>
</div>
);
}
}
export default App;
Componente AudioPlayer import React, { Component } from 'react';
import './music-player.css';
const AudioPlayer = function(props) {
var mp3Src = props.sounds[props.currentSoundIndex].mp3;
console.log(mp3Src); //this is returning the correct mp3 value
return (<audio id="audio_player">
<source id="src_mp3" type="audio/mp3" src="sounds/0010_beat_egyptian.mp3" />
<source id="src_ogg" type="audio/ogg" src=""/>
<object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3Src}>
<param id="param_src" name="src" value={mp3Src} />
<param id="param_src" name="src" value={mp3Src} />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
</object>
</audio>
);
}
export default AudioPlayer;
index.jsimport React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './music-player.css';
var sounds = [{"title" : "Egyptian Beat", "artist" : "Sarah Monks", "length": 16, "mp3" : "sounds/0010_beat_egyptian.mp3"},
{"title" : "Euphoric Beat", "artist" : "Sarah Monks", "length": 31, "mp3" : "sounds/0011_beat_euphoric.mp3"},
{"title" : "Latin Beat", "artist" : "Sarah Monks", "length": 59, "mp3" : "sounds/0014_beat_latin.mp3"},
{"title" : "Pop Beat", "artist" : "Sarah Monks", "length": 24, "mp3" : "sounds/0015_beat_pop.mp3"},
{"title" : "Falling Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0027_falling_cute.mp3"},
{"title" : "Feather", "artist" : "Sarah Monks", "length": 6, "mp3" : "sounds/0028_feather.mp3"},
{"title" : "Lose Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0036_lose_cute.mp3"},
{"title" : "Pium", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0039_pium.mp3"}];
ReactDOM.render(<App sounds={sounds} />, document.getElementById('root'));
registerServiceWorker();