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

内容简介：DIY一个自己的音乐播放器2.0来袭

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

[温馨提示：pc浏览f12手机模式最佳,手机建议wifi下访问]

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

Github地址： https://github.com/hzzly/Magi...

欢迎大家的star和fork:smile:~

实现的功能

• 首页

  • 轮播

  • 个性推荐[流行、古典、轻音乐、流行]

  • 歌曲操作（动画）

• 底部播放控件

  • 播放、暂停、下一曲

  • 实时播放进度条

• 播放页

  • 上一曲、播放、暂停、下一曲

  • 播放进度条（弧形进度条）

  • 歌词滚动、歌词高亮

• 播放列表

  • 播放歌曲高亮

  • 切歌(单击切歌)

  • 删歌(点击右侧小X)

  • 清空播放列表

  • 本地缓存播放列表

• 排行榜

  • 排行榜列表

  • 排行榜里的歌曲(单击播放)、全部播放

• 音乐搜索

  • 搜索单曲、歌手

  • 搜索历史记录

• 侧边栏

未实现的功能

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

预览

更多预览:point_right: 更多

技术栈

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等待，提升用户体验。

• 添加播放全部，避免一个一个添加。

• 本地缓存播放列表与清空。

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

后记

MagicMusic还在不断努力的改进，觉得还行的可以点个star， 你的star是我继续开源创作的动力 ，谢谢！！！当然有建议可以在issues里提。

项目地址： https://github.com/hzzly/MagicMusic

欢迎大家的star啦~

求实习

本人大三，求一个前端实习： 简历

文章首发于 hzzly技术成长日志

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 播放器性能优化之路
• 快速了解 H5 播放器
• 实现一个简单的音乐播放器
• iOS 系统视频播放器简单介绍
• HTML5迷你音频播放器
• 微信小程序实战-音乐播放器

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。