{"id":13535787,"url":"https://github.com/hzzly/MagicMusic","last_synced_at":"2025-04-02T02:31:32.050Z","repository":{"id":83023896,"uuid":"88009755","full_name":"hzzly/MagicMusic","owner":"hzzly","description":"🎵帅气的手机端音乐播放器（vue vue-router vuex flex ...）","archived":false,"fork":false,"pushed_at":"2019-07-12T05:58:18.000Z","size":6616,"stargazers_count":371,"open_issues_count":10,"forks_count":76,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-30T08:50:56.431Z","etag":null,"topics":["axios","es6","flex","promise","vue-router2","vue2","vuex2","webpack2"],"latest_commit_sha":null,"homepage":"http://hzzly.cn/magic-music/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hzzly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-12T04:28:42.000Z","updated_at":"2024-09-16T09:36:03.000Z","dependencies_parsed_at":"2023-11-13T04:15:08.339Z","dependency_job_id":null,"html_url":"https://github.com/hzzly/MagicMusic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hzzly%2FMagicMusic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hzzly%2FMagicMusic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hzzly%2FMagicMusic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hzzly%2FMagicMusic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hzzly","download_url":"https://codeload.github.com/hzzly/MagicMusic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222791943,"owners_count":17038320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","es6","flex","promise","vue-router2","vue2","vuex2","webpack2"],"created_at":"2024-08-01T09:00:27.332Z","updated_at":"2024-11-03T00:31:32.208Z","avatar_url":"https://github.com/hzzly.png","language":"Vue","readme":"# MagicMusic\n\n\u003e前言：在最近的一个外包项目[中包联盟](http://www.zblmchina.com/#/post)中使用到了video，遇到了好多坑。突发奇想来踩一踩audio的坑😀，果然一入深似海，👇下面将分享我的DIY之路-Vue音乐播放器。\n\u003e注：本项目为开源项目，不能用于商业应用，仅供学习。\n\n[温馨提示：pc浏览f12手机模式最佳,手机建议wifi下访问,低版本浏览器可能有兼容性问题]\n\n**demo地址：** [http://hzzly.net/magic-music/](http://hzzly.net/magic-music/)\n\n| ![示范图片1](./screenshots/magic-music1.png) | ![示范图片1](./screenshots/magic-music2.png) | ![示范图片3](./screenshots/magic-music3.png) |\n|:-|:-|:-|\n\n欢迎大家的star啦😄~\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n# serve with hot reload at localhost:8080\nnpm run dev\n# build for production with minification\nnpm run build\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\n[API文档](https://binaryify.github.io/NeteaseCloudMusicApi/#/)\n``` bash\n$ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git\n$ npm install\n$ npm start\n```\n\n👉老铁们，准备发车(技能点)：\n\u003e * [vue文档](https://cn.vuejs.org/)\n\u003e * [vue-router文档](https://router.vuejs.org/zh-cn/)\n\u003e * [vuex文档](https://vuex.vuejs.org/zh-cn/) 不想看文档的可以看看我这篇博客[vuex学习实践笔记](https://hzzly.github.io/2017/04/04/vuex%E5%AD%A6%E4%B9%A0%E5%AE%9E%E8%B7%B5%E7%AC%94%E8%AE%B0/)\n\u003e * [better-scroll文档](https://ustbhuangyi.github.io/better-scroll/#/)\n\u003e * [axios文档](https://www.npmjs.com/package/axios) 或者这篇博客 [Vuex2 与 Axios 开发](https://blog.ygxdxx.com/2017/02/01/Vuex2\u0026Axios-Develop/)(我也是参考这篇，感谢作者😁)\n\u003e * [es6(阮一峰的es6入门)](http://es6.ruanyifeng.com/) 可以参考[我的es6之路](http://hjingren.cn/tag/#es6)(还在继续,轻喷)\n\u003e * [webpack2(中文网站)](https://doc.webpack-china.org/)\n\u003e * [Promise (浅谈Promise)](https://hzzly.github.io/2017/03/25/%E6%B5%85%E8%B0%88Promise/)\n\u003e * [flex (Web的flex弹性盒模型)](https://hzzly.github.io/2017/03/03/Web%E7%9A%84Flex%E5%BC%B9%E6%80%A7%E7%9B%92%E6%A8%A1%E5%9E%8B/)\n\u003e * [移动端屏幕适配的解决 (flexible+rem)](https://hzzly.github.io/2017/03/15/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D%E7%9A%84%E8%A7%A3%E5%86%B3/)\n\u003e * [本地存储(sessionStorage、localStorage)](https://hzzly.github.io/2017/04/26/%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8sessionStorage%E4%B8%8ElocalStorage/)\n\u003e * [图片懒加载](https://github.com/hilongjw/vue-lazyload?from=gold)\n\u003e * [Vue插件](http://hjingren.cn/2017/08/25/Vue%E6%8F%92%E4%BB%B6%E7%9A%84%E5%BC%80%E5%8F%91-%E4%B8%80/)\n\n👉坐好，出发\n### 实现的功能\n\n#### 1、首页\n\u003e - [x] 个性推荐\n\u003e - [x] 歌手列表\n\u003e - [x] 排行榜\n\u003e - [x] 搜索\n\n#### 2、底部播放控件\n\u003e - [x] 播放\n\u003e - [x] 暂停\n\u003e - [x] 下一曲\n\u003e - [x] 播放进度条\n\n#### 3、播放页面\n\u003e - [x] 上一曲\n\u003e - [x] 播放\n\u003e - [x] 暂停\n\u003e - [x] 下一曲\n\u003e - [x] 播放进度条[弧形进度条]\n\u003e - [x] 歌词滚动\n\u003e - [x] 播放的歌词高亮\n\u003e - [ ] 播放模式[单曲循环、列表循环、随机播放]\n\n#### 4、播放列表\n\u003e - [x] 播放歌曲高亮\n\u003e - [x] 切歌(单击切歌)\n\u003e - [x] 删歌(点击右侧小X)\n\u003e - [x] 清空播放列表\n\u003e - [x] 本地缓存播放列表\n\n#### 5、排行榜\n\u003e - [x] 热门排行榜\n\u003e - [x] 排行榜里的歌曲(单击播放)\n\u003e - [x] 播放全部\n\n#### 6、音乐搜索\n输入搜索关键词\n\u003e - [x] 单曲(单击或点击歌曲操作(...)添加至音乐播放列表，部分音乐会存在版权问题无法播放)\n\u003e - [x] 歌手\n\u003e - [x] 专辑\n\u003e - [x] 歌单\n\u003e - [x] 用户\n\n#### 7.个人中心\n\u003e - [x] 我喜欢的\n\u003e - [x] 最近听的\n\n#### 8.侧边栏\n\u003e - [x] 头像\n\u003e - [x] 菜单\n\u003e   - [x] 个人中心\n\n\n第一版文章：[DIY一个自己的音乐播放器](http://hjingren.cn/2017/04/27/%E2%80%99DIY%E4%B8%80%E4%B8%AA%E8%87%AA%E5%B7%B1%E7%9A%84%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/)\n\n第二版文章：[DIY一个人自己的音乐播放器2.0来袭](http://hjingren.cn/2017/06/05/DIY%E4%B8%80%E4%B8%AA%E4%BA%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A82-0%E6%9D%A5%E8%A2%AD/)\n\n\n车已到站✌️。\n\n不知不觉写了这么多，老铁们凑合这看吧😁。\nMagicMusic还在不断努力的改进，觉得还行的可以点个star，**你的star是我继续开源创作的动力**，谢谢！！！\n\n","funding_links":[],"categories":["UI组件"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhzzly%2FMagicMusic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhzzly%2FMagicMusic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhzzly%2FMagicMusic/lists"}