原生代码: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应用生成器)构建的项目