我正在制作一个带有React.js和
HTML5网络音频javascript API的mp3播放器.我刚刚学习了React两周,所以我只是习惯了结构和设置(有组件等)但是有几年的
JavaScript经验.
我在浏览器中使用React时有mp3播放器工作.即我有一个index.html文件,我按如下方式包含了React脚本:
现在我想习惯使用命令行和localhost构建一个React应用程序,所以我开始重写代码以便在这个环境中使用.
我开始创建骨架应用程序如下:
create-react-app my-app
cd my-app/
npm start
然后我添加了自己的组件等.
应用程序正在localhost:3000上正确显示,但音频文件似乎没有在此环境中播放.我不确定问题是否与HTML5音频直接相关,而不是在localhost中工作,或者是否是其他问题.
没有返回错误.
我已经简化了我的代码,并且还在mp3文件的目录中硬编码到音频标签(请参阅AudioPlayer组件),以便了解我是否可以使音频元素正常工作.
你能看到我可能遗失的任何东西吗?谢谢
应用组件
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(
Menu
);
}
}
export default App;
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 (
);
}
export default AudioPlayer;
index.js
import 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(, document.getElementById('root'));
registerServiceWorker();