先上成品图片
12.png 13.png 15.png
技术应用
1.前端框架时用vue2搭建,基于elementUI
2.音乐的数据使用的是百度api的接口http://67zixue.com/home/article/detail/id/22.html
3.后端使用express + mongoose来对数据进行操作,主要包括增删改查等
功能介绍
1.获取百度音乐列表,其中包括新歌榜,热歌榜等
2.通过搜索功能查找自己喜欢的音乐
3.可以直接点击播放亦可以点击收藏后在收藏列表播放
4.在音乐列表点击收藏即可以通过node.js保存到mongodb数据库,这里只是实现了新增数据,包括歌名,歌手,热度等
5.通过查询接口从数据库查出收藏的数据并显示
6.双击行即可以播放当前点击的音乐
7.播放音乐功能包括上一首,下一首,播放,暂停,进度条的实现,以及歌词的滚动显示还有时间的展示
8.当前播放完会自动跳到下一首,点击下一首如果是最后一首跳到第一首,点击上一首如果是第一首则跳到最后一首
以上是整个音乐播放器的技术支持以及功能介绍还有成品的效果图,下一节介绍相关技术的使用
网友评论