hzzly / magicmusic Goto Github PK

View Code? Open in Web Editor NEW

370.0 13.0 76.0 6.46 MB

🎵帅气的手机端音乐播放器（vue vue-router vuex flex ...）

Home Page: http://hzzly.cn/magic-music/

License: MIT License

JavaScript 40.57% HTML 0.83% Vue 56.65% CSS 1.95%

vue2 vue-router2 vuex2 axios es6 webpack2 promise flex

magicmusic's Introduction

MagicMusic

前言：在最近的一个外包项目中包联盟中使用到了video，遇到了好多坑。突发奇想来踩一踩audio的坑😀，果然一入深似海，👇下面将分享我的DIY之路-Vue音乐播放器。注：本项目为开源项目，不能用于商业应用，仅供学习。

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

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

欢迎大家的star啦😄~

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report

API文档

$ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ npm install
$ npm start

👉老铁们，准备发车(技能点)：

vue文档

vue-router文档

vuex文档不想看文档的可以看看我这篇博客vuex学习实践笔记

better-scroll文档

axios文档或者这篇博客 Vuex2 与 Axios 开发(我也是参考这篇，感谢作者😁)

es6(阮一峰的es6入门) 可以参考我的es6之路(还在继续,轻喷)

webpack2(中文网站)

Promise (浅谈Promise)

flex (Web的flex弹性盒模型)

移动端屏幕适配的解决 (flexible+rem)

本地存储(sessionStorage、localStorage)

图片懒加载

Vue插件

👉坐好，出发

实现的功能

1、首页

个性推荐

歌手列表

排行榜

搜索

2、底部播放控件

播放

暂停

下一曲

播放进度条

3、播放页面

上一曲

播放

暂停

下一曲

播放进度条[弧形进度条]

歌词滚动

播放的歌词高亮

播放模式[单曲循环、列表循环、随机播放]

4、播放列表

播放歌曲高亮

切歌(单击切歌)

删歌(点击右侧小X)

清空播放列表

本地缓存播放列表

5、排行榜

热门排行榜

排行榜里的歌曲(单击播放)

播放全部

6、音乐搜索

输入搜索关键词

单曲(单击或点击歌曲操作(...)添加至音乐播放列表，部分音乐会存在版权问题无法播放)

歌手

专辑

歌单

用户

7.个人中心

我喜欢的

最近听的

8.侧边栏

头像

菜单

个人中心

第一版文章：DIY一个自己的音乐播放器

第二版文章：DIY一个人自己的音乐播放器2.0来袭

车已到站✌️。

不知不觉写了这么多，老铁们凑合这看吧😁。 MagicMusic还在不断努力的改进，觉得还行的可以点个star，你的star是我继续开源创作的动力，谢谢！！！

magicmusic's Issues

wow

如此惊艳！吓坏我了

安卓4.4.4，uc浏览器打开特别卡

我手机打开页面切换加载什么的特别卡，请问是不太兼容低版本安卓？

博客统计请教

楼主，你的博客文章下面的 本文总阅读量xxx次是用了什么插件，百度统计吗？我博客用的主题跟你一样，不过没有这种阅读统计，求教
https://hzzly.github.io/2017/03/25/Express%E4%B8%8EMongoDB%E7%9A%84%E7%BC%A0%E7%BB%B5/

npm install报错

D:\vue\播放器\MagicMusic>npm install
npm ERR! code ENOGIT
npm ERR! No git binary found in $PATH
npm ERR!
npm ERR! Failed using git.
npm ERR! Please check if you have git installed and in your PATH.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Lin\AppData\Roaming\npm-cache_logs\2017-06-07T14_48_54_963Z-debug.log