导航
导航
文章目录
  1. 预览地址: http://hzzly.net/magic-music
  2. Github地址: https://github.com/hzzly/MagicMusic
  3. 实现的功能
  4. 未实现的功能
  5. 预览
  6. 技术栈
  7. 本次更新日志
  8. 后记
  9. 求实习

DIY一个自己的音乐播放器2.0来袭

前言:之前做的第一版播放器功能做出来了,但发现结构不是很优雅以及后端api很不稳定,所以进行了一次小升级。此次升级 功能更全,体验更好,api更稳定,技术栈更多,收获也更多👍。

[温馨提示:pc浏览f12手机模式最佳,手机建议wifi下访问,低版本浏览器可能有兼容性问题]

预览地址: http://hzzly.net/magic-music

Github地址: https://github.com/hzzly/MagicMusic

欢迎大家的star和fork😄~

实现的功能

  • 首页
    • 轮播
    • 个性推荐[流行、古典、轻音乐、流行]
    • 歌曲操作(动画)
  • 底部播放控件
    • 播放、暂停、下一曲
    • 实时播放进度条
  • 播放页
    • 上一曲、播放、暂停、下一曲
    • 播放进度条(弧形进度条)
    • 歌词滚动、歌词高亮
  • 播放列表
    • 播放歌曲高亮
    • 切歌(单击切歌)
    • 删歌(点击右侧小X)
    • 清空播放列表
    • 本地缓存播放列表
  • 排行榜
    • 排行榜列表
    • 排行榜里的歌曲(单击播放)、全部播放
  • 音乐搜索
    • 搜索单曲、歌手
    • 搜索历史记录
  • 侧边栏

未实现的功能

  • 喜欢、分享、下载、切换播放模式

预览

http://hzzly.net/magic-music/screenshots/music.gif

更多预览👉更多

技术栈

1、Vue全家桶(vue2、vue-router、vuex) 快速开发SPA神器
2、Axios vue作者推荐的数据请求方案
3、ES6 全面过度es6的写法 趋势
4、Webpack2 脚手架已经配置好了,超贴心
5、Promise 把请求封装在promise中,方便的可以使用.then回调
6、flex布局 对于移动端可以放心大胆的使用
7、移动端屏幕适配 采用手淘的flexible+rem方案
8、本地存储(sessionStorage、localStorage) 避免重复资源请求,快速读取
9、图片懒加载 vue-lazyload 提升用户体验

本次更新日志

  • 后端api采用pm2来部署,防止断开后数据无法请求的尴尬。
  • 把监听audio加载完数据事件统一管理起来,避免重复监听,优化代码结构。
  • 更新axios请求,让请求更加优美。
  • 修改播放页面,优化用户体验。
  • 添加加载音乐loading等待,提升用户体验。
  • 添加播放全部,避免一个一个添加。
  • 本地缓存播放列表与清空。
  • 修改首页tab切换动效

DIY一个自己的音乐播放器1.0

后记

MagicMusic还在不断努力的改进,觉得还行的可以点个star,你的star是我继续开源创作的动力,谢谢!!!当然有建议可以在issues里提。
项目地址: https://github.com/hzzly/MagicMusic
欢迎大家的star啦~

求实习

本人大三,求一个前端实习:简历

支持一下
谢谢你请我吃糖果