增加ktv模式
宇天
parent
0221d8b8fe
commit
6f72645313
12
Readme.md
12
Readme.md
|
|
@ -18,20 +18,20 @@
|
|||
- [x] 设置本地音乐目录
|
||||
- [x] 缓存歌词
|
||||
- [x] 自动获取专辑封面和歌词,自动更新ID3信息
|
||||
- [ ] 酷狗音乐排行榜
|
||||
- [x] 酷狗歌手列表(完成20%)
|
||||
- [ ] 酷狗音乐MV
|
||||
- [ ] 试听列表
|
||||
- [x] 本地音乐
|
||||
- [x] 设置界面
|
||||
- [x] KTV模式
|
||||
- [x] 歌曲ID3信息修改
|
||||
- [x] 酷狗歌手列表(完成20%)
|
||||
- [ ] 酷狗音乐排行榜
|
||||
- [ ] 酷狗音乐MV
|
||||
- [ ] 试听列表
|
||||
- [ ] 均衡器
|
||||
- [ ] 桌面歌词
|
||||
- [ ] 迷你模式
|
||||
- [ ] KTV模式
|
||||
- [ ] 多媒体快捷键
|
||||
- [ ] 酷狗账号直接登录(犹豫中)
|
||||
- [ ] 铃声制作(犹豫中)
|
||||
- [x] 歌曲ID3信息修改
|
||||
- [ ] 用户评论/点赞(取决于登陆功能是否开发)
|
||||
- [ ] 试听下载
|
||||
- [ ] 歌曲质量选择
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
110
css/app.scss
110
css/app.scss
|
|
@ -52,12 +52,12 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
|||
::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}
|
||||
|
||||
|
||||
.do-mod-app {display:flex;width:100%;height:100%;background:#fff;
|
||||
.do-mod-app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff;
|
||||
|
||||
// 标题栏样式
|
||||
.title-bar {position:relative;z-index:9;display:flex;flex:0 5rem;
|
||||
|
||||
|
||||
|
||||
.menubar {position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0;
|
||||
.btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
|
||||
|
||||
.item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;}
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
|||
}
|
||||
}
|
||||
|
||||
.menubar-win {position:absolute;right:1.2rem;top:0;z-index:99;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
|
||||
.btn-box-win {position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
|
||||
|
||||
.item,.opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem;
|
||||
}
|
||||
|
|
@ -91,21 +91,33 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
|||
}
|
||||
}
|
||||
|
||||
// 工具栏
|
||||
.holder {flex:0 22rem;height:100%;background:nth($cp, 1);}
|
||||
|
||||
.tools {flex:1;padding:1rem;
|
||||
|
||||
.search {position:relative;display:inline-block;line-height:3rem;}
|
||||
.icon {position:absolute;right:0;top:0;width:2.6rem;height:3rem;}
|
||||
input {width:20rem;padding:0 1.3rem;border-radius:1.5rem;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 主体样式
|
||||
.main-body {flex:1;display:flex;
|
||||
|
||||
|
||||
.sidebar {flex:0 1 22rem;position:relative;height:100%;background:nth($cp, 1);
|
||||
// 侧边栏
|
||||
.sidebar {flex:0 22rem;position:relative;height:100%;background:nth($cp, 1);
|
||||
|
||||
// 用户信息
|
||||
.user-box {width:18rem;height:16.5rem;margin:4rem 2rem 0;text-align:center;
|
||||
.user-box {width:18rem;height:16.5rem;margin:0 2rem;text-align:center;
|
||||
|
||||
.avatar {overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .15);}
|
||||
img {width:100%;height:100%;}
|
||||
.uname {line-height:2;font-weight:normal;}
|
||||
}
|
||||
|
||||
// 音乐菜单
|
||||
// 功能菜单导航
|
||||
.music-box {width:100%;height:auto;padding:0 1.5rem;
|
||||
|
||||
dt.title {line-height:4rem;color:nth($cgr, 1)}
|
||||
|
|
@ -118,41 +130,29 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
|||
}
|
||||
}
|
||||
|
||||
// 播放控制按钮
|
||||
.play-contrl {position:absolute;left:0;bottom:0;width:100%;height:8rem;background:rgba(255,255,255,.3);
|
||||
|
||||
.item {position:absolute;top:2rem;width:4rem;height:4rem;line-height:4rem;font-size:3.5rem;text-align:center;color:nth($ct, 2);@include ts();
|
||||
|
||||
&:hover {color:nth($cp, 3)}
|
||||
&:active {color:nth($ct, 1);transform:scale(1.1)}
|
||||
}
|
||||
.prev {left:2.5rem;}
|
||||
.play {left:50%;top:1.5rem;width:5rem;height:5rem;margin-left:-2.5rem;line-height:5rem;font-size:4.5rem;}
|
||||
.next {right:2.5rem;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 主体样式
|
||||
.main {flex:1;display:flex;flex-flow:column wrap;
|
||||
|
||||
// 工具栏
|
||||
.tool-bar {flex:0 1 5rem;padding:1rem;
|
||||
|
||||
.search {position:relative;display:inline-block;line-height:3rem;}
|
||||
.icon {position:absolute;right:0;top:0;width:2.6rem;height:3rem;}
|
||||
input {width:20rem;padding:0 1.3rem;border-radius:1.5rem;}
|
||||
}
|
||||
|
||||
// 功能模块
|
||||
.module {position:relative;flex:1;display:flex;flex-flow:column wrap;}
|
||||
}
|
||||
|
||||
|
||||
.contrl-bar {position:relative;z-index:99;display:flex;flex:0 8rem;background:nth($cp, 1);
|
||||
|
||||
// 播放控制按钮
|
||||
.play-box {flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center;
|
||||
|
||||
.item {flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:nth($ct, 2);@include ts();
|
||||
|
||||
&:hover {color:nth($cg, 1)}
|
||||
&:active {color:nth($ct, 1);transform:scale(1.1)}
|
||||
}
|
||||
.play {font-size:5rem;}
|
||||
}
|
||||
|
||||
// 播放条
|
||||
.play-bar {position:relative;flex:0 1 8rem;display:flex;justify-content:center;align-items:center;background:#f5f6fc;
|
||||
.stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center;
|
||||
|
||||
.song-stat {flex:1;height:8rem;margin:0 2rem 0 0;
|
||||
|
||||
|
|
@ -178,15 +178,47 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 播放状态下的 模糊特效
|
||||
&.blur {background:rgba(255, 255, 255, .85);backdrop-filter:blur(1rem);
|
||||
|
||||
.sidebar {background:rgba(255, 255, 255, .3);
|
||||
|
||||
.play-contrl {background:transparent}
|
||||
.title-bar {
|
||||
.holder {background:rgba(255, 255, 255, .3);}
|
||||
.tools input {background:rgba(255, 255, 255, .8);}
|
||||
}
|
||||
|
||||
.main {
|
||||
.play-bar {background:rgba(255, 255, 255, .35)}
|
||||
.main-body {
|
||||
|
||||
.sidebar {background:rgba(255, 255, 255, .3);}
|
||||
}
|
||||
|
||||
.contrl-bar {background:rgba(255, 255, 255, .35)}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// ktv状态下的 模糊特效
|
||||
&.ktv {
|
||||
.contrl-bar {background:rgba(233, 233, 233, .1);
|
||||
|
||||
.play-box .item,
|
||||
.stat-box .ctrl {color:#fff;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ktv-box {overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:nth($cd, 3);background-size:cover;background-repeat:no-repeat;color:#fff;
|
||||
|
||||
.inner-content {display:flex;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
|
||||
|
||||
.info {flex:1.5;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;padding:0 10rem;line-height:2;text-align:center;
|
||||
|
||||
img {display:block;width:100%;height:auto}
|
||||
h3 {line-height:3;font-size:1.8rem;}
|
||||
}
|
||||
.lrc-box {flex:3.5;}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
80
index.html
80
index.html
|
|
@ -11,17 +11,30 @@
|
|||
<script>window.LIBS_BASE_URL = location.origin + '/dist';window.__ENV_LANG__ = 'zh'</script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
</head>
|
||||
<body class="do-fn-noselect" anot="app" :css="{'background-image':'url(' + curr.cover + ')'}">
|
||||
<body class="do-fn-noselect" anot="app" :css="{'background-image': coverBG}">
|
||||
|
||||
<div class="do-mod-app" :class="{blur: isPlaying}">
|
||||
<div class="do-mod-app" :class="{blur: isPlaying && !ktvMode, ktv: ktvMode}">
|
||||
|
||||
<nav class="menubar do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
|
||||
<div class="title-bar do-fn-drag">
|
||||
|
||||
<nav class="btn-box do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
|
||||
<i class="item quit" :click="quit(false)"></i>
|
||||
<i class="item min" :click="minimize"></i>
|
||||
<i class="item max" :click="maximize"></i>
|
||||
</nav>
|
||||
|
||||
<nav class="menubar-win do-fn-nodrag">
|
||||
|
||||
<!-- 背景点位标签 -->
|
||||
<div class="holder"></div>
|
||||
<div class="tools do-fn-drag">
|
||||
<div class="search do-fn-nodrag">
|
||||
<input class="do-ui-input" placeholder="搜索 音乐/歌手/专辑" value="">
|
||||
<i class="icon do-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="btn-box-win do-fn-nodrag">
|
||||
<div class="opt">
|
||||
<i class="do-icon-menu-right" :click="toggleOptBox"></i>
|
||||
<section class="opt-list" :visible="optBoxShow">
|
||||
|
|
@ -33,16 +46,18 @@
|
|||
<span :click="quit(true)"><i class="do-icon-logout"></i> 退出</span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<span :if="theme === 2">
|
||||
<i class="item do-icon-minimize" :click="minimize"></i>
|
||||
<i class="item do-icon-maximize" :click="maximize"></i>
|
||||
<i class="item do-icon-close" :click="quit(false)"></i>
|
||||
</span>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="main-body">
|
||||
|
||||
<aside class="sidebar do-fn-drag">
|
||||
|
||||
<div class="user-box">
|
||||
|
|
@ -83,7 +98,39 @@
|
|||
</dd>
|
||||
</dl>
|
||||
|
||||
<div class="play-contrl">
|
||||
</aside>
|
||||
|
||||
<content class="module" :include="views" data-cache="true"></content>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="ktv-box"
|
||||
:if="ktvMode"
|
||||
:css="{'background-image': coverBG}">
|
||||
|
||||
<div class="inner-content">
|
||||
<div class="info">
|
||||
<img :attr-src="curr.cover" />
|
||||
|
||||
<h3 :text="curr.title"></h3>
|
||||
<section>歌手: {{curr.artist}}</section>
|
||||
<section>专辑: {{curr.album}}</section>
|
||||
</div>
|
||||
|
||||
<div class="lrc-box">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="contrl-bar">
|
||||
|
||||
<div class="play-box">
|
||||
<span class="item prev s-icon-prev" :click="nextSong(-1)"></span>
|
||||
<span
|
||||
class="item play"
|
||||
|
|
@ -93,26 +140,7 @@
|
|||
<span class="item next s-icon-next" :click="nextSong(1)"></span>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div class="tool-bar do-fn-drag">
|
||||
<div class="search do-fn-nodrag">
|
||||
<input class="do-ui-input" value="">
|
||||
<i class="icon do-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<content class="module" :include="views" data-cache="true"></content>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="play-bar">
|
||||
<div class="stat-box">
|
||||
<div class="song-stat">
|
||||
<canvas ref="player"></canvas>
|
||||
</div>
|
||||
|
|
|
|||
38
js/app.js
38
js/app.js
|
|
@ -31,6 +31,21 @@ const PLAY_MODE = {
|
|||
1: 'single',
|
||||
2: 'random'
|
||||
}
|
||||
const COLORS = [
|
||||
{
|
||||
title: '#62778d',
|
||||
lrc: '#98acae',
|
||||
bar1: '#dae1e9',
|
||||
bar2: '#3fc2a7'
|
||||
},
|
||||
{
|
||||
title: '#fff',
|
||||
lrc: '#d7d8db',
|
||||
bar1: '#454545',
|
||||
bar2: '#fff'
|
||||
}
|
||||
]
|
||||
|
||||
const FONTS_NAME =
|
||||
' Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif'
|
||||
|
||||
|
|
@ -53,6 +68,7 @@ Anot({
|
|||
winFocus: false,
|
||||
mod: 'local',
|
||||
playMode: Anot.ls('play-mode') >>> 0, // 0:all | 1:single | 2:random
|
||||
ktvMode: 0,
|
||||
isPlaying: false,
|
||||
optBoxShow: false,
|
||||
volumeCtrlShow: false,
|
||||
|
|
@ -73,6 +89,13 @@ Anot({
|
|||
return
|
||||
}
|
||||
return '/views/' + this.mod + '.htm'
|
||||
},
|
||||
coverBG() {
|
||||
if (this.curr.cover) {
|
||||
return `url(${this.curr.cover})`
|
||||
} else {
|
||||
return 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -103,6 +126,10 @@ Anot({
|
|||
let ay = ev.pageY - rect.top
|
||||
|
||||
log(aw, ax, ay)
|
||||
if (ax < 80 && this.curr.id) {
|
||||
this.ktvMode = this.ktvMode ^ 1
|
||||
return
|
||||
}
|
||||
if (ax > 124 && ay > 55 && ay < 64) {
|
||||
let pp = (ax - 124) / (aw - 124)
|
||||
this.curr.time = pp * this.curr.duration
|
||||
|
|
@ -217,6 +244,7 @@ Anot({
|
|||
let ry = this.__HEIGHT__ / 2 // 旋转唱片的圆心坐标Y
|
||||
let pw = this.__WIDTH__ - this.__HEIGHT__ - 180 // 进度条总长度
|
||||
let wl = this.__HEIGHT__ + 180 // 文字的坐标X
|
||||
|
||||
const draw = () => {
|
||||
let { time, duration } = this.curr
|
||||
let pp = time / duration // 进度百分比
|
||||
|
|
@ -244,12 +272,12 @@ Anot({
|
|||
this.__CTX__.drawImage(img2, 0, 0, this.__HEIGHT__, this.__HEIGHT__)
|
||||
|
||||
// 歌曲标题和歌手
|
||||
this.__CTX__.fillStyle = '#62778d'
|
||||
this.__CTX__.fillStyle = COLORS[this.ktvMode].title
|
||||
this.__CTX__.font = '56px' + FONTS_NAME
|
||||
this.__CTX__.fillText(`${title} - ${artist}`, wl, 100)
|
||||
|
||||
// 时间
|
||||
this.__CTX__.fillStyle = '#98acae'
|
||||
this.__CTX__.fillStyle = COLORS[this.ktvMode].lrc
|
||||
this.__CTX__.font = '48px' + FONTS_NAME
|
||||
this.__CTX__.fillText(
|
||||
`${time} / ${duration}`,
|
||||
|
|
@ -258,14 +286,14 @@ Anot({
|
|||
)
|
||||
|
||||
// 歌词
|
||||
this.__CTX__.fillStyle = '#98acae'
|
||||
this.__CTX__.fillStyle = COLORS[this.ktvMode].lrc
|
||||
this.__CTX__.font = '48px' + FONTS_NAME
|
||||
this.__CTX__.fillText(`暂无歌词...`, wl, 180)
|
||||
|
||||
// 进度条
|
||||
this.__CTX__.fillStyle = '#dae1e9'
|
||||
this.__CTX__.fillStyle = COLORS[this.ktvMode].bar1
|
||||
this.__CTX__.fillRect(wl, 230, pw, 16)
|
||||
this.__CTX__.fillStyle = '#3fc2a7'
|
||||
this.__CTX__.fillStyle = COLORS[this.ktvMode].bar2
|
||||
this.__CTX__.fillRect(wl, 230, pw * pp, 16)
|
||||
|
||||
this.__DEG__ += 0.01
|
||||
|
|
|
|||
2
main.js
2
main.js
|
|
@ -23,7 +23,7 @@ function createWindow() {
|
|||
win = new BrowserWindow({
|
||||
title: 'sonist',
|
||||
width: 1024,
|
||||
height: 600,
|
||||
height: 640,
|
||||
frame: false,
|
||||
resizable: false,
|
||||
webPreferences: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "sonist",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.9",
|
||||
"description": "Music Player",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
Reference in New Issue