使用React构建一款音乐播放器_技术问答

首页免费课使用React构建一款音乐播放器问答

使用React构建一款音乐播放器

全部评论问答未解决精华

Heymanfk

按着老师的思路，用antd、redux、router4、webpack4做了一个。源码https://github.com/Shurlormes/MusicPlayer，有疑问欢迎提issue一起交流

2018-04-12

小木2020

我好像是一个假前端 (ಥ﹏ಥ)

0 2-2 webpack dev server和常用插件使用

2018-04-11

慕前端4541411

另外吐槽下jPlayer没有做异常检查，给它的参数如果写错了它不会报错的。。。
比如 $('#player').jPlayer('volumn', volumn);
记错一个单词volume，恁是检查半个小时。

1 3-6 播放器播放控制UI及逻辑开发

2018-04-10

慕前端4541411

this.setState({
volume: progress * 100,
}); 可避免音量进度条没有更新

确实我觉得就应该这样更新音量，而不是放到 $('#player').bind($.jPlayer.event.timeupdate, ()=>{})里面，因为放到那里面的话是随着播放时间更新而更新state，音量的变化应该与播放进程没有关系。

0 3-6 播放器播放控制UI及逻辑开发

2018-04-10

宝慕林7583510

$("#player").bind($.jPlayer.event.timeupdate); 总是报 $ is not defined 有没有大神解决一下

0 3-5 进度条组件完善（2）

2018-04-03

慕田峪5851112

为啥写的内容跟从git账号上面的完整版差别有些大，有丢丢懵逼

0 3-5 进度条组件完善（2）

2018-04-02

L_Web

遇到问题总结：
1.npm i jquery jplayer --save-dev 安装插件，不需要直接引入js文件
2.使用webpack.ProvidePlugin直接配置jquery全局函数，不需要到处import $ from 'jquery'
3.ES6下使用constructor(props){super(props); this.state={progress:'-'};}初始化state中的progress
4.componentDidMount(){}中this.setState已经在另一个function作用域，在句末加上.bind(this)即可

1 3-3 React组件初识及jPlayer插件了解

2018-04-01

慕斯卡742110

那么赶进度吗，省略那么多

1 3-6 播放器播放控制UI及逻辑开发

2018-03-25

慕斯卡742110

........什么都跳过了，css跳过，配置跳过，直接跳到完成部分就是了

2 3-1 header组件开发

2018-03-25

初夏233

讲真这位老师讲的真超好，要是16年的时候来学那就是极好的，但是现在 = = ，两个多小时课程，花了两天时间配置环境修改BUG，想哭；

2 3-3 React组件初识及jPlayer插件了解

2018-03-25

慕粉3151389

在componentDidMount函数里面应该这样写，不能直接this.setState，因为在bind函数里面，this已经不是指向组件实例了，
var _this = this;
$('#player').bind($.jPlayer.event.timeupdate, function(event) {
_this.setState({
progress: Math.round(event.jPlayer.status.currentPercentRelative) + '%'
});
})

1 3-3 React组件初识及jPlayer插件了解

2018-03-24

温柔了时光

老师不是已经说了吗，有点基础来学最好了，如果是想专门学webpack有老师专门讲webpack的，新手最好是先使用脚手架去写react，熟悉了之后再来用webpack配置。会报错之前也有同学说了，在console.log里，react改成React，版本号就出来了。如果想打印hello，world，可以直接在index.html的div里面写hello，world。还有就是如果报错了，改完之后再打包再刷新来看，不然你怎么改都是没有用的。因为还没有配置热更新。老师都很不容易，能来讲课的老师都是值得我们去鼓励的，如果有问题，麻烦在问答区或者评论区问，不要动不动就说别人不好，有本事你来讲

7 2-2 webpack dev server和常用插件使用

2018-03-24