React.js中使用jPlayer播放音乐。

这段代码不能播放音乐,我猜大概是引入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>

阅读 5k
3 个回答

把这两段代码放到index.html中。

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>

把jquery删了。
看了一下,你这里没有用到播放器UI,你还需要用jquery来播放音乐???直接H5播放不就完事了。

新手上路,请多包涵

解决了吗? 我现在也遇见这个问题.
TypeError: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).jPlayer is not a function

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题