react 引入 本地 html5,javascript – HTML5音频没有在我的本地主机的React应用程序中播放...

我正在制作一个带有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();