三天时间用react肝了一个音乐webapp

135 阅读1分钟

demo

在线预览:小琳音乐站

源码:gitee.com/mind251314/…

介绍

身为一个爱听歌的前端,只要写起代码耳机必需放着bgm伴奏。就在前几天我突发奇想,我能不能做个自己的音乐app玩玩。

说干就干,在百度上找到了一个网易云的api文档。 这个文档是一个node项目,利用跨站请求伪造 (CSRF), 伪造请求头 , 调用官方 API。

我将项目放到我的服务器上通过pm2运行起来,至此后端服务就搞定了。

前端采用react-umi+antd-moblie技术栈,目前做出了热门歌曲、歌手、搜索三个主要模块。

image.png

但其实最复杂的地方是播放器,包括播放/暂停,上一曲/下一曲,进度条,歌词这些东西都需要自己设计,也算是系统的学习了一下原生audio对象。

image.png

由于是react,所以主要用redux管理全局状态,useEffect监听audio的属性来及时通知视图更新。

image.png

补充

由于是调了网易云的后台,一些vip歌曲本来只能试听30秒。但我已经csrf了,所以vip歌曲也是可以随便听滴😄