先上成品圖片

12.png

13.png

15.png

技術應用

1.前端框架時用vue2搭建，基于elementUI
2.音樂的數(shù)據(jù)使用的是百度api的接口http://67zixue.com/home/article/detail/id/22.html
3.后端使用express + mongoose來對數(shù)據(jù)進行操作，主要包括增刪改查等

功能介紹

1.獲取百度音樂列表，其中包括新歌榜，熱歌榜等
2.通過搜索功能查找自己喜歡的音樂
3.可以直接點擊播放亦可以點擊收藏后在收藏列表播放
4.在音樂列表點擊收藏即可以通過node.js保存到mongodb數(shù)據(jù)庫，這里只是實現(xiàn)了新增數(shù)據(jù)，包括歌名，歌手，熱度等
5.通過查詢接口從數(shù)據(jù)庫查出收藏的數(shù)據(jù)并顯示
6.雙擊行即可以播放當前點擊的音樂
7.播放音樂功能包括上一首，下一首，播放，暫停，進度條的實現(xiàn)，以及歌詞的滾動顯示還有時間的展示
8.當前播放完會自動跳到下一首，點擊下一首如果是最后一首跳到第一首，點擊上一首如果是第一首則跳到最后一首

以上是整個音樂播放器的技術支持以及功能介紹還有成品的效果圖，下一節(jié)介紹相關技術的使用