基于vue+百度音乐api +express + mongodb + elementUi定义自己的音乐播放器（一）

先上成品图片

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.当前播放完会自动跳到下一首，点击下一首如果是最后一首跳到第一首，点击上一首如果是第一首则跳到最后一首

以上是整个音乐播放器的技术支持以及功能介绍还有成品的效果图，下一节介绍相关技术的使用