├── .gitignore ├── .tslint.json ├── ExpressServe ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── Lrc │ │ ├── 学猫叫.json │ │ └── 生日快乐.json │ ├── Music │ │ ├── 学猫叫.mp3 │ │ └── 生日快乐.mp3 │ ├── images │ │ ├── 学猫叫.jpg │ │ └── 生日快乐.jpg │ └── stylesheets │ │ └── style.css ├── readMe.md └── routes │ ├── index.js │ └── users.js ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── Pages ├── Home │ └── Home.vue └── Login │ └── Login.vue ├── assets ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── citou2.png ├── icon │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.svg │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 ├── logo.png ├── timg2.png ├── wmc.jpg ├── zxy.jpg └── 黑胶唱片.psd ├── components ├── BaseAudio.vue ├── MusicBlock.vue ├── MusicList.vue ├── Phonevideo.vue ├── PlayUI.vue ├── SearchComponents.vue ├── cd.vue ├── head.vue ├── login.vue ├── lrc.vue └── lunbo.vue ├── img ├── disc-plus.png ├── disc.png ├── needle.png └── play_btn.png ├── main.js ├── router └── index.js ├── store └── index.js └── views ├── Home.vue ├── Main.vue ├── MusicPlay.vue ├── Search.vue ├── TuiJianMusic.vue ├── User.vue └── login.vue /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | ExpressServe/node_modules 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /.tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "warning", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "quotemark": [ 8 | true, 9 | "single" 10 | ], 11 | "indent": [ 12 | true, 13 | "spaces", 14 | 2 15 | ], 16 | "interface-name": false, 17 | "ordered-imports": false, 18 | "object-literal-sort-keys": false, 19 | "no-consecutive-blank-lines": false, 20 | "no-shadowed-variable": false, 21 | "no-var-requires": false, 22 | "semicolon": false, 23 | "whitespace": false, 24 | "trailing-comma": false, 25 | "no-trailing-whitespace": false, 26 | "variable-name": [ 27 | true, 28 | "ban-keywords", 29 | "check-format", 30 | "allow-leading-underscore" 31 | ], 32 | "no-console": [ 33 | true, 34 | "log", 35 | "error" 36 | ], 37 | "max-classes-per-file": false 38 | } 39 | } -------------------------------------------------------------------------------- /ExpressServe/app.js: -------------------------------------------------------------------------------- 1 | var createError = require('http-errors'); 2 | var express = require('express'); 3 | var path = require('path'); 4 | var cookieParser = require('cookie-parser'); 5 | var logger = require('morgan'); 6 | 7 | var indexRouter = require('./routes/index'); 8 | var usersRouter = require('./routes/users'); 9 | 10 | var app = express(); 11 | 12 | // view engine setup 13 | app.set('views', path.join(__dirname, 'views')); 14 | app.set('view engine', 'jade'); 15 | 16 | app.use(logger('dev')); 17 | app.use(express.json()); 18 | app.use(express.urlencoded({ 19 | extended: false 20 | })); 21 | app.use(cookieParser()); 22 | app.use(express.static(path.join(__dirname, 'public'))); 23 | 24 | app.use('/', indexRouter); 25 | app.use('/users', usersRouter); 26 | 27 | // catch 404 and forward to error handler 28 | app.use(function (req, res, next) { 29 | next(createError(404)); 30 | }); 31 | 32 | // error handler 33 | app.use(function (err, req, res, next) { 34 | // set locals, only providing error in development 35 | res.locals.message = err.message; 36 | res.locals.error = req.app.get('env') === 'development' ? err : {}; 37 | 38 | // render the error page 39 | res.status(err.status || 500); 40 | res.render('error'); 41 | }); 42 | 43 | module.exports = app; -------------------------------------------------------------------------------- /ExpressServe/bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('expressserve:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '3000'); 16 | app.set('port', port); 17 | 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /ExpressServe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expressserve", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "node ./bin/www" 7 | }, 8 | "dependencies": { 9 | "cookie-parser": "~1.4.4", 10 | "debug": "~2.6.9", 11 | "express": "~4.16.1", 12 | "http-errors": "~1.6.3", 13 | "jade": "~1.11.0", 14 | "morgan": "~1.9.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ExpressServe/public/Lrc/学猫叫.json: -------------------------------------------------------------------------------- 1 | { 2 | "sgc": false, 3 | "sfy": false, 4 | "qfy": false, 5 | "lyricUser": { 6 | "id": 554191055, 7 | "status": 99, 8 | "demand": 0, 9 | "userid": 453011212, 10 | "nickname": "摘星星送你", 11 | "uptime": 1525769374445 12 | }, 13 | "lrc": { 14 | "version": 7, 15 | "lyric": "[00:00.000] 作曲 : 小峰峰\n[00:01.000] 作词 : 小峰峰\n[00:05.03]编曲：吕宏斌&塞米七\n[00:05.28]和声：小峰峰\n[00:05.45]混音：陈秋洁\n[00:05.63]制作人：小峰峰\n[00:05.85]唱片：麦袭时代\n[00:06.40]OP：百纳娱乐\n[00:06.93]\n[00:07.96]小潘潘：\n[00:08.31]我们一起学猫叫\n[00:10.58]一起喵喵喵喵喵\n[00:12.60]在你面前撒个娇\n[00:14.71]哎呦喵喵喵喵喵\n[00:16.77]我的心脏砰砰跳\n[00:18.85]迷恋上你的坏笑\n[00:21.31]你不说爱我我就喵喵喵\n[00:24.10]\n[00:24.75]小峰峰：\n[00:26.17]每天都需要你的拥抱\n[00:29.08]珍惜在一起的每分每秒\n[00:33.35]你对我多重要\n[00:35.21]我想你比我更知道\n[00:38.00]你就是我的女主角\n[00:41.34]\n[00:41.80]小潘潘：\n[00:42.80]有时候我懒的像只猫\n[00:45.69]脾气不好时又张牙舞爪\n[00:50.10]你总是温柔的\n[00:51.96]能把我的心融化掉\n[00:54.65]我想要当你的小猫猫\n[00:59.93]\n[01:00.38]合：\n[01:00.70]我们一起学猫叫\n[01:02.69]一起喵喵喵喵喵\n[01:04.72]在你面前撒个娇\n[01:06.81]哎呦喵喵喵喵喵\n[01:08.82]我的心脏砰砰跳\n[01:10.79]迷恋上你的坏笑\n[01:13.42]你不说爱我我就喵喵喵\n[01:16.86]\n[01:17.23]我们一起学猫叫\n[01:19.30]一起喵喵喵喵喵\n[01:21.45]我要穿你的外套\n[01:23.55]闻你身上的味道\n[01:25.62]想要变成你的猫\n[01:27.68]赖在你怀里睡着\n[01:30.17]每天都贪恋着你的好\n[01:33.85]\n[01:50.67]小潘潘：\n[01:51.73]有时候我懒的像只猫\n[01:54.62]脾气不好时又张牙舞爪\n[01:58.95]你总是温柔的\n[02:01.07]能把我的心融化掉\n[02:03.62]我想要当你的小猫猫\n[02:07.97]\n[02:09.19]合：\n[02:09.49]我们一起学猫叫\n[02:11.49]一起喵喵喵喵喵\n[02:13.55]在你面前撒个娇\n[02:15.55]哎呦喵喵喵喵喵\n[02:17.72]我的心脏砰砰跳\n[02:19.77]迷恋上你的坏笑\n[02:22.28]你不说爱我我就喵喵喵\n[02:26.01]\n[02:26.21]我们一起学猫叫\n[02:28.30]一起喵喵喵喵喵\n[02:30.30]我要穿你的外套\n[02:32.38]闻你身上的味道\n[02:34.58]想要变成你的猫\n[02:36.56]赖在你怀里睡着\n[02:39.02]每天都贪恋着你的好\n[02:42.40]\n[02:42.85]我们一起学猫叫\n[02:44.84]一起喵喵喵喵喵\n[02:46.89]在你面前撒个娇\n[02:49.02]哎呦喵喵喵喵喵\n[02:51.14]我的心脏砰砰跳\n[02:53.32]迷恋上你的坏笑\n[02:55.75]你不说爱我我就喵喵喵\n[02:59.12]\n[02:59.47]我们一起学猫叫\n[03:01.59]一起喵喵喵喵喵\n[03:03.66]我要穿你的外套\n[03:05.82]闻你身上的味道\n[03:07.88]想要变成你的猫\n[03:09.98]赖在你怀里睡着\n[03:12.37]每天都贪恋着你的好\n" 16 | }, 17 | "klyric": { 18 | "version": 0, 19 | "lyric": null 20 | }, 21 | "tlyric": { 22 | "version": 0, 23 | "lyric": null 24 | }, 25 | "code": 200 26 | } -------------------------------------------------------------------------------- /ExpressServe/public/Lrc/生日快乐.json: -------------------------------------------------------------------------------- 1 | { 2 | "sgc": false, 3 | "sfy": false, 4 | "qfy": false, 5 | "lyricUser": { 6 | "id": 554191055, 7 | "status": 99, 8 | "demand": 0, 9 | "userid": 453011212, 10 | "nickname": "摘星星送你", 11 | "uptime": 1525769374445 12 | }, 13 | "lrc": { 14 | "version": 7, 15 | "lyric": "[00:00.000] 作曲 : 小峰峰\n[00:01.000] 作词 : 小峰峰\n[00:05.03]编曲：吕宏斌&塞米七\n[00:05.28]和声：小峰峰\n[00:05.45]混音：陈秋洁\n[00:05.63]制作人：小峰峰\n[00:05.85]唱片：麦袭时代\n[00:06.40]OP：百纳娱乐\n[00:06.93]\n[00:07.96]小潘潘：\n[00:08.31]我们一起学猫叫\n[00:10.58]一起喵喵喵喵喵\n[00:12.60]在你面前撒个娇\n[00:14.71]哎呦喵喵喵喵喵\n[00:16.77]我的心脏砰砰跳\n[00:18.85]迷恋上你的坏笑\n[00:21.31]你不说爱我我就喵喵喵\n[00:24.10]\n[00:24.75]小峰峰：\n[00:26.17]每天都需要你的拥抱\n[00:29.08]珍惜在一起的每分每秒\n[00:33.35]你对我多重要\n[00:35.21]我想你比我更知道\n[00:38.00]你就是我的女主角\n[00:41.34]\n[00:41.80]小潘潘：\n[00:42.80]有时候我懒的像只猫\n[00:45.69]脾气不好时又张牙舞爪\n[00:50.10]你总是温柔的\n[00:51.96]能把我的心融化掉\n[00:54.65]我想要当你的小猫猫\n[00:59.93]\n[01:00.38]合：\n[01:00.70]我们一起学猫叫\n[01:02.69]一起喵喵喵喵喵\n[01:04.72]在你面前撒个娇\n[01:06.81]哎呦喵喵喵喵喵\n[01:08.82]我的心脏砰砰跳\n[01:10.79]迷恋上你的坏笑\n[01:13.42]你不说爱我我就喵喵喵\n[01:16.86]\n[01:17.23]我们一起学猫叫\n[01:19.30]一起喵喵喵喵喵\n[01:21.45]我要穿你的外套\n[01:23.55]闻你身上的味道\n[01:25.62]想要变成你的猫\n[01:27.68]赖在你怀里睡着\n[01:30.17]每天都贪恋着你的好\n[01:33.85]\n[01:50.67]小潘潘：\n[01:51.73]有时候我懒的像只猫\n[01:54.62]脾气不好时又张牙舞爪\n[01:58.95]你总是温柔的\n[02:01.07]能把我的心融化掉\n[02:03.62]我想要当你的小猫猫\n[02:07.97]\n[02:09.19]合：\n[02:09.49]我们一起学猫叫\n[02:11.49]一起喵喵喵喵喵\n[02:13.55]在你面前撒个娇\n[02:15.55]哎呦喵喵喵喵喵\n[02:17.72]我的心脏砰砰跳\n[02:19.77]迷恋上你的坏笑\n[02:22.28]你不说爱我我就喵喵喵\n[02:26.01]\n[02:26.21]我们一起学猫叫\n[02:28.30]一起喵喵喵喵喵\n[02:30.30]我要穿你的外套\n[02:32.38]闻你身上的味道\n[02:34.58]想要变成你的猫\n[02:36.56]赖在你怀里睡着\n[02:39.02]每天都贪恋着你的好\n[02:42.40]\n[02:42.85]我们一起学猫叫\n[02:44.84]一起喵喵喵喵喵\n[02:46.89]在你面前撒个娇\n[02:49.02]哎呦喵喵喵喵喵\n[02:51.14]我的心脏砰砰跳\n[02:53.32]迷恋上你的坏笑\n[02:55.75]你不说爱我我就喵喵喵\n[02:59.12]\n[02:59.47]我们一起学猫叫\n[03:01.59]一起喵喵喵喵喵\n[03:03.66]我要穿你的外套\n[03:05.82]闻你身上的味道\n[03:07.88]想要变成你的猫\n[03:09.98]赖在你怀里睡着\n[03:12.37]每天都贪恋着你的好\n" 16 | }, 17 | "klyric": { 18 | "version": 0, 19 | "lyric": null 20 | }, 21 | "tlyric": { 22 | "version": 0, 23 | "lyric": null 24 | }, 25 | "code": 200 26 | } -------------------------------------------------------------------------------- /ExpressServe/public/Music/学猫叫.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/ExpressServe/public/Music/学猫叫.mp3 -------------------------------------------------------------------------------- /ExpressServe/public/Music/生日快乐.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/ExpressServe/public/Music/生日快乐.mp3 -------------------------------------------------------------------------------- /ExpressServe/public/images/学猫叫.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/ExpressServe/public/images/学猫叫.jpg -------------------------------------------------------------------------------- /ExpressServe/public/images/生日快乐.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/ExpressServe/public/images/生日快乐.jpg -------------------------------------------------------------------------------- /ExpressServe/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 4 | } 5 | 6 | a { 7 | color: #00B7FF; 8 | } 9 | -------------------------------------------------------------------------------- /ExpressServe/readMe.md: -------------------------------------------------------------------------------- 1 | # musicplayer 实战项目 音乐播放器后端代码 2 | -------------------------------------------------------------------------------- /ExpressServe/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('index', { title: 'Express' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /ExpressServe/routes/users.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET users listing. */ 5 | router.get('/', function(req, res, next) { 6 | res.send('respond with a resource'); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # musicplayer 实战项目 音乐播放器 2 | 3 | # 制作步骤和心得 4 | 5 | ## 2019/6/27 6 | 7 | - 今天整理了项目 8 | - 项目当前功能，播放音乐，根据歌词文件加载歌词 9 | - 歌曲播放完毕后，暂停播放 10 | - 播放的黑胶唱片中间加上了专辑的图片，并且能跟随唱片旋转 11 | 12 | ## 2019/7/1 13 | 14 | - 重新构思了下播放器，决定从新写，只保留控件部分，界面重新开始做 15 | 16 | ## 2019/7/3 17 | 18 | - 重新开始做首页 19 | 20 | ## 2019/10/25 21 | 22 | - 开始重新写 23 | - 前后台都在这个项目里 24 | - 重新整理的项目目录 25 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "musicplayer", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.0", 12 | "core-js": "^2.6.5", 13 | "qs.js": "^0.1.12", 14 | "vue": "^2.6.10", 15 | "vue-axios": "^2.1.4", 16 | "vue-router": "^3.0.6", 17 | "vuex": "^3.1.1" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.8.0", 21 | "@vue/cli-plugin-eslint": "^3.8.0", 22 | "@vue/cli-service": "^3.8.0", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "less": "^3.9.0", 27 | "less-loader": "^5.0.0", 28 | "vue-template-compiler": "^2.6.10" 29 | }, 30 | "eslintConfig": { 31 | "root": true, 32 | "env": { 33 | "node": true 34 | }, 35 | "extends": [ 36 | "plugin:vue/essential", 37 | "eslint:recommended" 38 | ], 39 | "rules": {}, 40 | "parserOptions": { 41 | "parser": "babel-eslint" 42 | } 43 | }, 44 | "postcss": { 45 | "plugins": { 46 | "autoprefixer": {} 47 | } 48 | }, 49 | "browserslist": [ 50 | "> 1%", 51 | "last 2 versions" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | musicplayer 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/Pages/Home/Home.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/Pages/Home/Home.vue -------------------------------------------------------------------------------- /src/Pages/Login/Login.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/Pages/Login/Login.vue -------------------------------------------------------------------------------- /src/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/1.jpg -------------------------------------------------------------------------------- /src/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/2.jpg -------------------------------------------------------------------------------- /src/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/3.jpg -------------------------------------------------------------------------------- /src/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/4.jpg -------------------------------------------------------------------------------- /src/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/5.jpg -------------------------------------------------------------------------------- /src/assets/citou2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/citou2.png -------------------------------------------------------------------------------- /src/assets/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1560922094566'); /* IE9 */ 3 | src: url('iconfont.eot?t=1560922094566#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('iconfont.woff?t=1560922094566') format('woff'), 6 | url('iconfont.ttf?t=1560922094566') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1560922094566#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-bofang:before { 19 | content: "\e66a"; 20 | } 21 | 22 | .icon-shangyigeshangyiqu:before { 23 | content: "\e670"; 24 | } 25 | 26 | .icon-shunxubofang:before { 27 | content: "\e671"; 28 | } 29 | 30 | .icon-suijibofang:before { 31 | content: "\e672"; 32 | } 33 | 34 | .icon-xiayigexiayiqu:before { 35 | content: "\e674"; 36 | } 37 | 38 | .icon-zanting:before { 39 | content: "\e677"; 40 | } 41 | 42 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/icon/iconfont.eot -------------------------------------------------------------------------------- /src/assets/icon/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(i){var t,e='',c=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(c&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()};document.addEventListener("DOMContentLoaded",c,!1)}else document.attachEvent&&(l=t,a=i.document,n=!1,(o=function(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(o,50)}e()})(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,e())});function e(){n||(n=!0,l())}var l,a,n,o}(function(){var t,c;(t=document.createElement("div")).innerHTML=e,e=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",function(t,c){c.firstChild?function(t,c){c.parentNode.insertBefore(t,c)}(t,c.firstChild):c.appendChild(t)}(c,document.body))})}(window); -------------------------------------------------------------------------------- /src/assets/icon/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/icon/iconfont.woff -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/icon/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/timg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/timg2.png -------------------------------------------------------------------------------- /src/assets/wmc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/wmc.jpg -------------------------------------------------------------------------------- /src/assets/zxy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/zxy.jpg -------------------------------------------------------------------------------- /src/assets/黑胶唱片.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/assets/黑胶唱片.psd -------------------------------------------------------------------------------- /src/components/BaseAudio.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 63 | 64 | 69 | -------------------------------------------------------------------------------- /src/components/MusicBlock.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 46 | -------------------------------------------------------------------------------- /src/components/MusicList.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 58 | 59 | 75 | -------------------------------------------------------------------------------- /src/components/Phonevideo.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 36 | 37 | 39 | -------------------------------------------------------------------------------- /src/components/PlayUI.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 150 | 151 | -------------------------------------------------------------------------------- /src/components/SearchComponents.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 54 | -------------------------------------------------------------------------------- /src/components/cd.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 28 | 29 | 30 | 110 | -------------------------------------------------------------------------------- /src/components/head.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | 27 | 28 | q -------------------------------------------------------------------------------- /src/components/login.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /src/components/lrc.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 94 | 95 | 145 | -------------------------------------------------------------------------------- /src/components/lunbo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 42 | -------------------------------------------------------------------------------- /src/img/disc-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/img/disc-plus.png -------------------------------------------------------------------------------- /src/img/disc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/img/disc.png -------------------------------------------------------------------------------- /src/img/needle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/img/needle.png -------------------------------------------------------------------------------- /src/img/play_btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/img/play_btn.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router/index' 6 | import store from './store/index' 7 | 8 | import axios from 'axios' 9 | import VueAxios from 'vue-axios' 10 | 11 | Vue.use(VueAxios, axios); 12 | 13 | Vue.config.productionTip = false 14 | 15 | /* eslint-disable no-new */ 16 | new Vue({ 17 | el: '#app', 18 | router, 19 | store, 20 | render: h => h(App) 21 | }) -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import home from '../views/Home.vue' 4 | import login from '../views/login.vue' 5 | import Main from '../views/Main.vue' 6 | import Search from '../views/Search.vue' 7 | import TuiJian from '../views/TuiJianMusic.vue' 8 | import PlayUI from '../components/Phonevideo.vue' 9 | 10 | Vue.use(Router) 11 | 12 | export default new Router({ 13 | routes: [{ 14 | path: '/', 15 | redirect: '/Main' 16 | }, 17 | 18 | { 19 | path: '/login', 20 | component: login 21 | }, 22 | { 23 | path: '/Main', 24 | component: Main, 25 | redirect: '/Main/home', 26 | children: [{ 27 | path: '/Main/home', 28 | component: home 29 | }, { 30 | path: '/Main/Liest', 31 | component: TuiJian 32 | }, { 33 | path: '/Main/Search', 34 | component: Search 35 | }] 36 | }, 37 | { 38 | path: '/player', 39 | component: PlayUI 40 | } 41 | ] 42 | }) -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import vue from 'vue' 2 | import vuex from 'vuex' 3 | 4 | vue.use(vuex); 5 | 6 | const store = new vuex.Store({ 7 | state: { 8 | isplay: false, 9 | jindu: 0, 10 | shijian: 0, 11 | playstate: 1, 12 | playtime: 0, 13 | jinduLock: 0, 14 | alltime: 0 15 | }, 16 | mutations: { 17 | setplay(state, value) { 18 | state.isplay = value; 19 | }, 20 | setjindu(state, value) { 21 | state.jindu = value; 22 | if (value == 100) 23 | state.isplay = false; 24 | }, 25 | setshijian(state, value) { 26 | state.shijian = value; 27 | }, 28 | settime(state, value) { 29 | state.playtime = value; 30 | }, 31 | setjindulock(state, value) { 32 | state.jinduLock = value; 33 | }, 34 | setalltime(state, value) { 35 | state.alltime = value; 36 | }, 37 | }, 38 | actions: { 39 | setPlayFun(context, value) { 40 | context.commit("setplay", value); 41 | }, 42 | setjinduFun(context, value) { 43 | context.commit("setjindu", value); 44 | }, 45 | setshijianFun(context, value) { 46 | context.commit("setshijian", value); 47 | }, 48 | settimeFun(context, value) { 49 | context.commit("settime", value); 50 | }, 51 | setjindulockFun(context, value) { 52 | context.commit("setjindulock", value); 53 | }, 54 | setalltimeFun(context, value) { 55 | context.commit("setalltime", value); 56 | }, 57 | initPlay(context) { 58 | context.commit("setjindu", 0); 59 | context.commit("setshijian", 0); 60 | context.commit("settime", 0); 61 | context.commit("setjindulock", 0); 62 | context.commit("setalltime", 0); 63 | context.commit("setplay", true); 64 | } 65 | } 66 | }); 67 | 68 | export default store; -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 29 | 30 | 32 | 33 | -------------------------------------------------------------------------------- /src/views/Main.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 50 | 51 | 70 | -------------------------------------------------------------------------------- /src/views/MusicPlay.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | 36 | 38 | -------------------------------------------------------------------------------- /src/views/Search.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /src/views/TuiJianMusic.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 20 | -------------------------------------------------------------------------------- /src/views/User.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CallZero/MusicPlayer/051dbe38017656308bef458087e507cdb428fbaa/src/views/User.vue -------------------------------------------------------------------------------- /src/views/login.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 21 | --------------------------------------------------------------------------------