keephhh / MagicMusic

不一样的音乐 [预览地址](http://hzzly.net/magic-music)

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
$ node app.js

跨域

在 clone 下来的api中的 app.js 中添加如下代码(这是API中的app.js，不是项目中的，好多人说找不到！！！)

//设置跨域访问  
app.all('*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("X-Powered-By",' 3.2.1')  
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
});  

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

• vue文档
• vue-router文档
• vuex文档 不想看文档的可以看看我这篇博客vuex学习实践笔记
• axios文档 或者这篇博客 Vuex2 与 Axios 开发(我也是参考这篇，感谢作者😁)
• es6(阮一峰的es6入门) 可以参考我的es6之路(还在继续,轻喷)
• webpack2(中文网站)
• Promise (浅谈Promise)
• flex (Web的flex弹性盒模型)
• 移动端屏幕适配的解决 (flexible+rem)
• 本地存储(sessionStorage、localStorage)
• 图片懒加载

👉坐好，出发

实现的功能

1、首页

• 轮播
• 个性推荐[流行、古典、轻音乐、流行]
• 歌曲操作
  • 加入播放列表
  • 喜欢
  • 分享

2、底部播放控件

• 播放
• 暂停
• 下一曲
• 播放进度条

3、播放页面

• 上一曲
• 播放
• 暂停
• 下一曲
• 播放进度条[弧形进度条]
• 歌词滚动
• 播放的歌词高亮
• 播放模式[单曲循环、列表循环、随机播放]

4、播放列表

• 播放歌曲高亮
• 切歌(单击切歌)
• 删歌(点击右侧小X)
• 清空播放列表
• 本地缓存播放列表

5、排行榜

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

6、音乐搜索

输入搜索关键词，点击放大镜图标

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

侧边栏

• 头像
• 菜单
  • 个人中心

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

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

车已到站✌️。

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

广告

2018届毕业生求职ing 简历👉：黄敬仁个人简历