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

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

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

全部评论问答未解决精华

冷月诗魂

继续完善一下bug，当删除最后一首时也停止播放，且播放页面变为空。代码已上传至
https://github.com/xzylogic/workspaces.git
先选择我的分支 xzy_reactMusic_6进入React
if(this.state.musicList.length===0){
$("#player").jPlayer('pause');
$("#root").css('display','none');
}else if(this.state.currentMusicItem === musicItem){
this.playNext('next');
}

1 3-10 组件通信（2）

2017-11-28

冷月诗魂

这算法长见识了，以后碰到就不用if、else这样一直判断了，厉害！

2 3-9 组件通信（1）

2017-11-28

冷月诗魂

3-7至3-8节课程代码已上传至
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic_5
然后点击进入React，再点击进入react-music-player，OK,

1 3-8 页面导航，React-Router学习

2017-11-28

冷月诗魂

3 3-7 歌曲列表页面开发

2017-11-28

冷月诗魂

修改了部分bug，点击暂停时可以改变音量，在暂停时改变播放进度可同步变化暂停播放按钮。
当前课程代码已上传至
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic_4
然后点击进入React，再点击进入react-music-player，OK,

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

2017-11-27

冷月诗魂

本节课的代码已上传
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic_3
然后点击进入React，再点击进入react-music-player，OK,
（不知道哪些文件是被改了的可以看commit提交信息，就是中间“第三章3-3至3-5节的代码”这些字表示这几节课程的文件被改动了，你就要自己在本地改）

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

2017-11-24

冷月诗魂

本节至3-5节课的代码已上传
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic_3
然后点击进入React，再点击进入react-music-player，OK,
（不知道哪些文件是被改了的可以看commit提交信息，就是中间“第三章3-3至3-5节的代码”这些字表示这几节课程的文件被改动了，你就要自己在本地改）

1 3-4 进度条组件完善（1）

2017-11-24

冷月诗魂

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

2017-11-24

冷月诗魂

我找的歌：http://tingwa.oss-cn-shanghai.aliyuncs.com/2017-01/05/20170105123005-MzkzMTcz.mp3?OSSAccessKeyId=3b1nzo7roav1h50rcp0a35nw&Expires=1511506386&Signature=WmcqXQ2v4wIMjuK1pOlvCwScLZ4%3D
老师的歌：http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3

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

2017-11-24

慕无忌7599692

老师课程讲的很不错，可是发音真的让我听着难受。。
router => 肉特？
path => 啪 si ？

0 3-8 页面导航，React-Router学习

2017-11-24

冷月诗魂

和下一节的代码一起上传了
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic_2
然后点击进入React，再点击进入react-music-player，里面就是3-2节代码，点进去随便看，随便复制。。

1 3-1 header组件开发

2017-11-23

冷月诗魂

自己作死不知道删了什么东西，撤回也热更新不了了，唉，不纠结了，先推送代码了，(index.js相关代码修改完成过后记得命令行输入webpack一次)
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic_2
然后点击进入React，再点击进入react-music-player，里面就是当前章节代码，点进去随便看，随便复制。。

2 3-2 进度条组件基础样式开发

2017-11-23

冷月诗魂

太多小细节上的坑了！！！我自己摸索了好久啊，按照老师的，少个逗号都热更新不了。。。这东西还不会报错，重启动刷新就能正常显示，唉！！

0 3-2 进度条组件基础样式开发

2017-11-23

冷月诗魂

到2-2节课程跳跃幅度可以说非常大。。老师省去了敲代码的时间，把现成代码直接展示给我们。。
自己摸索了下，没什么问题
给大家到2-2节课的代码，会git的最好，不会的最好弄熟点。。
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic
然后点击进入React，再点击进入react-music-player，里面就是2-2当前章节代码，点进去随便看，随便复制。。

4 2-1 Webpack学习

2017-11-23

冷月诗魂

给大家这节课的代码，会git的最好，不会的最好弄熟点。。
https://github.com/xzylogic/workspaces.git
最重要的一步：先选择我的分支 xzy_reactMusic
然后点击进入React，再点击进入react-music-player，里面就是当前章节代码，点进去随便看，随便复制。。

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

2017-11-23

首页上一页 7 8 9 10 11 12 13 下一页尾页

该课程已下架

课程须知: 1、有一定的前端开发经验 2、熟悉HTML、CSS，精通JavaScript 3、对前端工程化有一定的了解 4、了解ES6一些基本语法

老师告诉你能学到什么？: 1、webpack的配置 2、开发环境的搭建 3、React与传统开发的理念差异 4、组件化开发 5、React-Router的使用 6、事件订阅及通信 7、一些最佳实践

微信扫码，参与3人拼团

热搜

最近搜索清空

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