这段代码不能播放音乐,我猜大概是引入jPlayer这里出了问题导致使用jPlayer()出现问题,但是我不知道该如何修改。
代码如下:
/**
Created by w on 2017/8/14.
*/
import React , {Component} from 'react';
import ReactDOM from 'react-dom';
import Header from './components/header';
import Progress from './components/progress';
import $ from 'jquery';
import 'jplayer';
import './css/style.less';
class App extends Component{
constructor(){
super();
this.state = {
progress:'-'
}
}
componentDidMount(){
$('#player').jPlayer({
ready:function () {
$(this).jPlayer('setMedia',{
mp3:'http://96.f.1ting.com/5990c216/ae7399dfa433acf16d104c9be156243f/zzzzzmp3/2012lDec/17L/17BB/24.mp3'
}).jPlayer('play');
},
supplied:'mp3',
wmode:'window'
});
$('#player').bind($.jPlayer.event.timeupdate,e=>{
this.setState({
progress:Math.round(e.jPlayer.status.currentTime)
});
})
}
render(){
return (
<div>
<Header/>
<Progress progress={this.state.progress}/>
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('container'));
新建一个Html文件可以播放音乐说明播放音乐部分的代码应该没有出错:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jPlayer</title>
<script src="../Lib/react/jquery.min.js"></script>
<script src="../Lib/react/jquery.jplayer.min.js"></script>
</head>
<body>
<div id="player"></div>
<script>
$('#player').jPlayer({
ready:function () {
$('#player').jPlayer('setMedia',{
mp3:'http://96.f.1ting.com/5990c216/ae7399dfa433acf16d104c9be156243f/zzzzzmp3/2012lDec/17L/17BB/24.mp3'
}).jPlayer('play');
},
supplied:'mp3',
wmode:'window'
});
</script>
</body>
</html>
把这两段代码放到index.html中。