This is my first music app based on react framework
- 默认音质选择为普通 128 比特率(节省流量, 更快播放)
- 可选高音质为 320 比特率(音质要求)
- 完成线上部署
- 使用 PWA 完成移动端的适配 线上地址为: http://lorry-music.leanapp.cn/ 可在移动端使用 Chrome 访问并添加到桌面, 可离线访问
- 移动端第一次点击无法通过非用户操作播放歌曲的报错
- 修复歌词实时显示
- 美化歌词显示界面的背景模糊
- 移动端的 UI 适配
- electron打包成pc应用
- mac:
yarn build:mac点此下载 - win:
yarn build:win
- 如果没有更多歌曲可以获取, 歌曲列表显示"我是有底线的"
- 利用cordova适配移动端
- 使用PWA
- 歌曲列表中如果获取的是空白歌曲名占用空白行
- 修改了配色和背景的blur属性
- 播放栏位置
- webpack打包过程, 将react库和其他第三方库单独打包, 业务代码单独打包, 可以优化浏览器缓存和加载速度
- favicon
- 使用webpack-dev-server proxy请求api
- 搜索框限制输入为空
- 搜索框限制输入为颜文字
- 搜索框错误输入时, 暗红色颜色提示
- 添加搜索框输入错误抖动动画
- awesome-font icon海外cdn连接过慢的问题, 使用单独的 icon png
- 当前歌曲封面图片
- 歌词播放延时及性能损耗
- 修复收藏和搜索列表播放时的上一曲和下一曲功能
- 修复下载功能
- 当前歌曲歌词显示, 居中动态显示当前句.
- 歌曲下载, 但是有bug, 如果是MP3格式的会打开新界面,而不是下载,其余格式可正常下载
- 播放模式, 包括顺序播放, 单曲循环, 随机播放, 列表循环
- 当前歌曲比特率显示
- 智能搜索提示, 智能提示歌手, 歌曲, 专辑
- 正在播放icon串列表显示, 新增根据当前nav index筛选
- 播放列表功能, 可将搜索的歌曲放进播放列表中, 并本地保存.
- 下拉加载更多
- 加载动画
- 当前歌曲播放完毕, 自动播放播放列表中的下一首歌曲
- 如果没有sq或320音质的歌曲自动降级为普通音质
- 移动端播放条位置错乱问题
- 当前歌曲歌词 --> finished
- 当前播放粒子动态效果
- 歌曲下载 --> defer
- 播放模式的选择 --> finished
- 当前歌曲比特率的显示 --> finished
- 搜索智能提示 --> finished
已搜索列表 --> 与智能搜索提示功能点重复, 衡量之后决定砍掉此功能
// 搜索歌曲url, type可以为songname, artist, album, rn是获取多少条
`http://search.kuwo.cn/r.s?${type}=${encodeURIComponent(input_value)}&ft=music&rformat=json&encoding=utf8&rn=5&vipver=MUSIC_8.0.3.1`
// 拿到MUSIC_ID之后便可获取歌曲网址
`http://antiserver.kuwo.cn/anti.s?response=url&rid=${music_id}&format=mp3`
- 3 显示当前正在播放的歌曲
- 4 播放按钮, 点击播放以及切换歌曲
- 添加到个人播放列表
- 添加到歌单
- 播放MV(如果有的话)
- 5 上一曲
- 6 暂停/继续播放
- 7 下一曲
- 8 进度条显示以及进度调节,当前歌曲名显示
- 9 音量调节
- 当前歌曲比特率
1 克隆本项目
2 在终端中执行 yarn 安装依赖
3 执行 yarn start:dev 运行项目.
4 打开 http://localhost:3001 即可