不一样的音乐
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
screenshots
src
static
.babelrc
.editorconfig
.gitignore
.postcssrc.js
LICENSE
README.md
index.html
package.json

README.md

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();  
});  

👉老铁们,准备发车(技能点):

👉坐好,出发

实现的功能

1、首页

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

2、底部播放控件

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

3、播放页面

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

4、播放列表

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

5、排行榜

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

6、音乐搜索

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

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

侧边栏

  • 头像
  • 菜单
    • 个人中心

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

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

车已到站✌️

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

广告

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