原生js制造一个h5音乐播放器

原生代码：https://github.com/helloCaijiaqi/music_player_js/tree/master/music_player_js

vuejs封装的播放器组件：

https://github.com/helloCaijiaqi/music_player_vuejs

vue组件有用到axios，需要自行定义一个简单的后端api

自身用的是nodejs（具体使用：页面最底）

原生js h5音乐播放器

文件结构：

页面效果：（图片资源来源：网易云音乐）

html

css

js

音乐资源的整理

点击组件右侧按钮实现滑动隐藏和显示

鼠标移入移出的图片切换

播放按钮功能

//切换歌曲，且加载音乐资源

进度条功能

留声机图片的旋转动画

功能函数

//声音的调节

//播放模式的切换

nodejs定义一个简单music_api

app.js 应用级

每个路径访问前都进行跨域处理  nodejs port:3000  \  vue-cli3 port:8080

music.js 路由级

musiclist.js json资源

音乐资源通过静态服务挂载在 http://localhost:3000/music 中

文件结构，这里用（express应用生成器）构建的项目