Skip to content

Commit 21c41d5

Browse files
committed
新增音量调整
1 parent b270096 commit 21c41d5

6 files changed

Lines changed: 149 additions & 4 deletions

File tree

publish/changeLog.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
### 新增
22

33
- 新增**MAC****Linux**版本(需要的可自行下载)
4+
- 新增音量调整
45
- 新增任务栏播放进度条控制选项(现在可在设置界面关闭在任务栏显示的播放进度)
56
- 新增更新出错时的弹窗提示
67
- 从该版本起,非安装版也会有更新弹窗提醒了,但仍然需要手动下载新版本更新,版本信息可到设置页面查看

src/renderer/components/core/Icons.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
5050
//- path(fill='currentColor' d='M174.522,0h-26.848c-9.885,0-17.897,8.013-17.897,17.899v62.533L37.513,2.522c-3.483-2.406-7.807-2.005-11.072-2.005c-13.061,0-13.004,11.7-13.004,14.666v175.983c0,2.507-0.057,14.666,13.004,14.666c3.265,0,7.589,0.401,11.072-2.005l92.265-77.91v62.016c0,9.885,8.012,17.898,17.897,17.898h26.848c9.885,0,17.898-8.013,17.898-17.898V17.899C192.421,8.013,184.408,0,174.522,0z')
5151
g#icon-sound
5252
// 0 0 291.063 291.064
53-
path(d='M26.512,204.255h18.292l106.48,67.761c12.354,7.855,22.369,2.361,22.369-12.282v-69.397c16.933-8.854,28.501-26.559,28.501-46.983c0-20.425-11.568-38.129-28.501-46.986V31.645c0-14.639-10.18-20.401-22.731-12.873L44.804,82.443H26.512C11.866,82.443,0,94.311,0,108.955v68.789C0,192.387,11.866,204.255,26.512,204.255z')
54-
path(d='M219.791,152.899c-0.818,11.185-4.039,21.758-9.569,31.426c-3.635,6.354-1.43,14.452,4.919,18.087c2.082,1.187,4.34,1.751,6.576,1.751c4.599,0,9.062-2.393,11.517-6.675c7.508-13.138,11.889-27.491,12.986-42.663c1.714-23.397-4.836-46.781-18.455-65.845c-4.256-5.96-12.536-7.332-18.491-3.081c-5.959,4.259-7.337,12.531-3.08,18.491C216.218,118.425,221.055,135.653,219.791,152.899z')
55-
path(d='M290.7,158c3.34-45.736-16.508-89.592-53.097-117.318c-5.841-4.433-14.146-3.27-18.568,2.556c-4.428,5.838-3.283,14.151,2.558,18.568c29.401,22.281,45.355,57.521,42.668,94.252c-2.02,27.636-14.375,53.159-34.787,71.867c-5.396,4.95-5.758,13.339-0.808,18.729c2.609,2.854,6.188,4.298,9.771,4.298c3.194,0,6.41-1.154,8.953-3.484C272.805,224.175,288.184,192.408,290.7,158z')
53+
path(fill='currentColor' d='M26.512,204.255h18.292l106.48,67.761c12.354,7.855,22.369,2.361,22.369-12.282v-69.397c16.933-8.854,28.501-26.559,28.501-46.983c0-20.425-11.568-38.129-28.501-46.986V31.645c0-14.639-10.18-20.401-22.731-12.873L44.804,82.443H26.512C11.866,82.443,0,94.311,0,108.955v68.789C0,192.387,11.866,204.255,26.512,204.255z')
54+
path(fill='currentColor' d='M219.791,152.899c-0.818,11.185-4.039,21.758-9.569,31.426c-3.635,6.354-1.43,14.452,4.919,18.087c2.082,1.187,4.34,1.751,6.576,1.751c4.599,0,9.062-2.393,11.517-6.675c7.508-13.138,11.889-27.491,12.986-42.663c1.714-23.397-4.836-46.781-18.455-65.845c-4.256-5.96-12.536-7.332-18.491-3.081c-5.959,4.259-7.337,12.531-3.08,18.491C216.218,118.425,221.055,135.653,219.791,152.899z')
55+
path(fill='currentColor' d='M290.7,158c3.34-45.736-16.508-89.592-53.097-117.318c-5.841-4.433-14.146-3.27-18.568,2.556c-4.428,5.838-3.283,14.151,2.558,18.568c29.401,22.281,45.355,57.521,42.668,94.252c-2.02,27.636-14.375,53.159-34.787,71.867c-5.396,4.95-5.758,13.339-0.808,18.729c2.609,2.854,6.188,4.298,9.771,4.298c3.194,0,6.41-1.154,8.953-3.484C272.805,224.175,288.184,192.408,290.7,158z')
5656

5757

5858
</template>

src/renderer/components/core/Player.vue

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ div(:class="$style.player")
88
div(:class="$style.column1")
99
div(:class="$style.container")
1010
div(:class="$style.title") {{title}}
11+
div(:class="$style.volumeContent")
12+
div(:class="$style.volume" @click.stop='handleChangeVolume' :title="`当前音量:${volumeStr}%`")
13+
div(:class="$style.volumeBar" :style="{ width: volumeStr + '%' }")
14+
15+
//- div(:class="$style.playBtn" @click='handleNext' title="音量")
16+
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
17+
use(xlink:href='#icon-sound')
1118
div(:class="$style.playBtn" @click='handleNext' title="下一首")
1219
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
1320
use(xlink:href='#icon-nextMusic')
@@ -50,6 +57,7 @@ export default {
5057
return {
5158
show: true,
5259
audio: null,
60+
volume: 0,
5361
nowPlayTime: 0,
5462
maxPlayTime: 0,
5563
isPlay: false,
@@ -98,6 +106,9 @@ export default {
98106
isAPITemp() {
99107
return this.setting.apiSource == 'temp'
100108
},
109+
volumeStr() {
110+
return parseInt(this.volume * 100)
111+
},
101112
},
102113
mounted() {
103114
this.setProgessWidth()
@@ -139,6 +150,9 @@ export default {
139150
if (n.toFixed(2) === o.toFixed(2)) return
140151
this.sendProgressEvent(n, 'normal')
141152
},
153+
volume(n) {
154+
this.handleSaveVolume(n)
155+
},
142156
},
143157
methods: {
144158
...mapActions('player', ['getUrl', 'getPic', 'getLrc']),
@@ -147,9 +161,11 @@ export default {
147161
'fixPlayIndex',
148162
'resetChangePlay',
149163
]),
164+
...mapMutations(['setVolume']),
150165
...mapMutations('list', ['updateMusicInfo']),
151166
init() {
152-
this.audio = document.createElement('audio')
167+
window.a = this.audio = document.createElement('audio')
168+
this.volume = this.audio.volume = this.setting.player.volume
153169
this.audio.controls = false
154170
this.audio.autoplay = true
155171
this.audio.loop = this.setting.player.togglePlayMethod === 'singleLoop'
@@ -438,6 +454,17 @@ export default {
438454
clearAppTitle() {
439455
setTitle()
440456
},
457+
handleChangeVolume(e) {
458+
let val = e.offsetX / 70
459+
if (val < 0) val = 0
460+
if (val > 1) val = 1
461+
if (val > 0.97) val = 1
462+
this.volume = val
463+
if (this.audio) this.audio.volume = this.volume
464+
},
465+
handleSaveVolume(volume) {
466+
this.setVolume(volume)
467+
},
441468
},
442469
}
443470
</script>
@@ -509,6 +536,39 @@ export default {
509536
.mixin-ellipsis-1;
510537
}
511538
539+
.volume-content {
540+
width: 100px;
541+
display: flex;
542+
align-items: center;
543+
padding: 0 15px;
544+
}
545+
546+
.volume {
547+
cursor: pointer;
548+
width: 100%;
549+
height: 0.25em;
550+
border-radius: 10px;
551+
// overflow: hidden;
552+
transition: @transition-theme;
553+
transition-property: background-color;
554+
background-color: @color-player-progress;
555+
// background-color: #f5f5f5;
556+
position: relative;
557+
border-radius: @radius-progress-border;
558+
}
559+
560+
.volume-bar {
561+
position: absolute;
562+
left: 0;
563+
top: 0;
564+
width: 0;
565+
height: 100%;
566+
border-radius: @radius-progress-border;
567+
transition-duration: 0.2s;
568+
background-color: @color-player-progress-bar2;
569+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
570+
}
571+
512572
.play-btn {
513573
+ .play-btn {
514574
margin-left: 10px;
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template lang="pug">
2+
input(type="range" :class="[$style.range, min ? $style.min : '']" :disabled="disabled" v-model="val" input="handleInput" @change="handleChange")
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
min: {
9+
type: Boolean,
10+
},
11+
disabled: {
12+
type: Boolean,
13+
default: false,
14+
},
15+
value: {
16+
type: Number,
17+
default: 0,
18+
},
19+
},
20+
data() {
21+
return {
22+
val: 0,
23+
}
24+
},
25+
mounted() {
26+
this.val = this.value
27+
},
28+
methods: {
29+
handleChange(e) {
30+
this.$emit('input', this.val)
31+
this.$emit('change', e)
32+
},
33+
},
34+
}
35+
</script>
36+
37+
38+
<style lang="less" module>
39+
@import '../../assets/styles/layout.less';
40+
41+
.range {
42+
display: inline-block;
43+
border-radius: .25em;
44+
cursor: pointer;
45+
color: @color-btn;
46+
outline: none;
47+
background: transparent;
48+
// background-color: @color-btn-background;
49+
&[disabled] {
50+
opacity: .4;
51+
}
52+
53+
&:hover {
54+
background-color: @color-theme_2-hover;
55+
}
56+
&:active {
57+
background-color: @color-theme_2-active;
58+
}
59+
}
60+
61+
.min {
62+
63+
}
64+
65+
// each(@themes, {
66+
// :global(#container.@{value}) {
67+
// .btn {
68+
// color: ~'@{color-@{value}-btn}';
69+
// background-color: ~'@{color-@{value}-btn-background}';
70+
// &:hover {
71+
// background-color: ~'@{color-@{value}-theme_2-hover}';
72+
// }
73+
// &:active {
74+
// background-color: ~'@{color-@{value}-theme_2-active}';
75+
// }
76+
// }
77+
// }
78+
// })
79+
80+
</style>

src/renderer/store/mutations.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,7 @@ export default {
2323
if (isShow !== undefined) state.version.showModal = isShow
2424
if (isError !== undefined) state.version.isError = isError
2525
},
26+
setVolume(state, val) {
27+
state.setting.player.volume = val
28+
},
2629
}

src/renderer/utils/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ export const updateSetting = setting => {
168168
togglePlayMethod: 'listLoop',
169169
highQuality: false,
170170
isShowTaskProgess: true,
171+
volume: 1,
171172
},
172173
list: {
173174
isShowAlbumName: true,

0 commit comments

Comments
 (0)