我正在制作一个MP3播放器与React.js和HTML5网络音频JavaScript API。我刚学了两周的React,所以我只是习惯了结构和设置(有组件等),但是有几年JavaScript经验。HTML5音频不播放在我的React应用程序在本地主机
我曾在浏览器中使用React时使用MP3播放器。即我有一个index.html文件,我包括在该阵营脚本如下:
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
现在我想习惯使用命令行和本地主机建立一个作出反应的应用程序,所以我开始重写使用的代码在这个环境中。 我开始通过创建骨架应用程序如下:
create-react-app my-app
cd my-app/
npm start
然后,我在我自己的组件等 该应用程序是在本地主机上正常显示补充说:3000然而,音频文件似乎并不在此被打环境。我不确定问题是否与仅在本地主机上不工作的HTML5音频直接相关,或者是否是其他内容。 没有错误被返回。
我已经简化了我的代码,并将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(<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;
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.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(<App sounds={sounds} />, document.getElementById('root'));
registerServiceWorker();
可以附加一个错误事件处理程序到您的音频标签?在原始JavaScript中,这将是:'document.getElementById(“audio_player”)。addEventListener(“error”,function(e){console.error(e);});'至少你可以调试它来看看如果有任何错误正在产生。 – TheJim01
@TheJim01谢谢我只是尝试添加,但它不会返回错误。另一件事,当我访问本地主机:3000/sounds/0010_beat_egyptian.mp3我会期望MP3在这个URL上播放,但它只是显示主应用程序页面。然而,当我在我的浏览器(即与一个index.html文件)中构建应用程序时,我可以通过访问它们的URL来播放声音文件,如下所示:file:/// C:/nodejs/sarah_music_app/sounds/0010_beat_egyptian.mp3 ..可以这意味着,也许这些文件只是不能在本地主机上播放? – Sarah
@TheJim01好,所以我找到了一些东西。我尝试导入AudioPlayer组件顶部的mp3文件,例如从'./sounds/0010_beat_egyptian.mp3'导入mp3_file;然后将其作为音频标签的源代码插入,如下src = {mp3_file},现在这个工作正在进行中。所以我将试验这个想法并导入其余的声音。也许有一种更有效的方式,但是这一刻会做。谢谢您的帮助。 – Sarah