一、需求分析
- 主界面完整的外观设计
- 歌曲播放及播放界面设计
- 搜索功能实现
- 歌单功能实现
- 上一首下一首功能实现
二、功能分析
1. 主界面排版
- 上方搜索界面
- 海报轮播功能
- 歌单功能位置
- 下方详细页功能
2. 歌曲播放界面
- 歌曲信息获取
- 歌曲详细界面进度条，瓷碟外观实现
- 歌词相关实现
- 上一首、下一首功能实现
3. 搜索界面
- 搜索歌曲获取
- 搜索历史记录及删除记录
4. 歌单功能
- 歌单滑动功能
- 歌单排版
三、系统设计
（一）功能结构设计
（二）开发工具和开发技术的选择
系统开发平台：Virtual Studio Code
运行平台：windows 10
本项目利用前端框架Vue以及NodeJS实现
（三）项目功能演示
主界面
打开系统主界面，如图1所示，下方“播放”按钮点击后可开始播放音乐，如图2
|
图1 |
图2 |
进入播放界面
点击界面下方进入正在播放的歌曲的详细界面，在这个界面我们可以进行上一曲下一曲、歌曲暂停、查看歌词的操作，同时进度条会随着歌曲播放的进度移动，详情页如图3.，点击中心区域后可查看歌词，歌词会跟随播放进度产生高亮并始终居中，如图4
|
图3 |
图4 |
搜索功能
回到主界面后，点击右上角搜索按钮可进入搜索页面，搜索页面中会保留历史搜索记录与“清除历史搜索记录”按钮，如图5所示，在搜索框内输入内容或直接点击历史搜索记录，可跳转到对应的界面，如图6所示，点击任意一首歌可开始播放，如图7所示，点击“清除历史搜索记录”按钮可将历史记录清除，如图8
|
图5 |
图6 |
|
图7 |
图8 |
上一首、下一首功能
播放《五百二十赫兹》后，播放《悬浮术》，此时歌曲为《悬浮术》，进入歌曲详情页面，如图9所示，点击上一首，播放《五百二十赫兹》，如图10，点击下一首，播放《悬浮术》，如图11所示
|
图9 |
图10 |
图11 |
查看歌单
在主界面中下有推荐歌单，如图12所示，歌单可左右滑动，点击可进入歌单界面如图13所示
|
图12 |
图13 |
