diff --git a/publish/changeLog.md b/publish/changeLog.md index 2e921f9b..60d51a2e 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,6 +1,7 @@ ### 新增 - 新增**MAC**及**Linux**版本(需要的可自行下载) +- 新增音量调整 - 新增任务栏播放进度条控制选项(现在可在设置界面关闭在任务栏显示的播放进度) - 新增更新出错时的弹窗提示 - 从该版本起,非安装版也会有更新弹窗提醒了,但仍然需要手动下载新版本更新,版本信息可到设置页面查看 diff --git a/src/renderer/components/core/Icons.vue b/src/renderer/components/core/Icons.vue index 740f9d37..5fb446e9 100644 --- a/src/renderer/components/core/Icons.vue +++ b/src/renderer/components/core/Icons.vue @@ -50,9 +50,9 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19 //- 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') g#icon-sound // 0 0 291.063 291.064 - 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') - 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') - 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') + 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') + 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') + 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') diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue index afe86d6a..40e46492 100644 --- a/src/renderer/components/core/Player.vue +++ b/src/renderer/components/core/Player.vue @@ -8,6 +8,13 @@ div(:class="$style.player") div(:class="$style.column1") div(:class="$style.container") div(:class="$style.title") {{title}} + div(:class="$style.volumeContent") + div(:class="$style.volume" @click.stop='handleChangeVolume' :title="`当前音量:${volumeStr}%`") + div(:class="$style.volumeBar" :style="{ width: volumeStr + '%' }") + + //- div(:class="$style.playBtn" @click='handleNext' title="音量") + 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') + use(xlink:href='#icon-sound') div(:class="$style.playBtn" @click='handleNext' title="下一首") 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') use(xlink:href='#icon-nextMusic') @@ -50,6 +57,7 @@ export default { return { show: true, audio: null, + volume: 0, nowPlayTime: 0, maxPlayTime: 0, isPlay: false, @@ -98,6 +106,9 @@ export default { isAPITemp() { return this.setting.apiSource == 'temp' }, + volumeStr() { + return parseInt(this.volume * 100) + }, }, mounted() { this.setProgessWidth() @@ -139,6 +150,9 @@ export default { if (n.toFixed(2) === o.toFixed(2)) return this.sendProgressEvent(n, 'normal') }, + volume(n) { + this.handleSaveVolume(n) + }, }, methods: { ...mapActions('player', ['getUrl', 'getPic', 'getLrc']), @@ -147,9 +161,11 @@ export default { 'fixPlayIndex', 'resetChangePlay', ]), + ...mapMutations(['setVolume']), ...mapMutations('list', ['updateMusicInfo']), init() { - this.audio = document.createElement('audio') + window.a = this.audio = document.createElement('audio') + this.volume = this.audio.volume = this.setting.player.volume this.audio.controls = false this.audio.autoplay = true this.audio.loop = this.setting.player.togglePlayMethod === 'singleLoop' @@ -438,6 +454,17 @@ export default { clearAppTitle() { setTitle() }, + handleChangeVolume(e) { + let val = e.offsetX / 70 + if (val < 0) val = 0 + if (val > 1) val = 1 + if (val > 0.97) val = 1 + this.volume = val + if (this.audio) this.audio.volume = this.volume + }, + handleSaveVolume(volume) { + this.setVolume(volume) + }, }, } @@ -509,6 +536,39 @@ export default { .mixin-ellipsis-1; } +.volume-content { + width: 100px; + display: flex; + align-items: center; + padding: 0 15px; +} + +.volume { + cursor: pointer; + width: 100%; + height: 0.25em; + border-radius: 10px; + // overflow: hidden; + transition: @transition-theme; + transition-property: background-color; + background-color: @color-player-progress; + // background-color: #f5f5f5; + position: relative; + border-radius: @radius-progress-border; +} + +.volume-bar { + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + border-radius: @radius-progress-border; + transition-duration: 0.2s; + background-color: @color-player-progress-bar2; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); +} + .play-btn { + .play-btn { margin-left: 10px; diff --git a/src/renderer/components/material/InputRange.vue b/src/renderer/components/material/InputRange.vue new file mode 100644 index 00000000..d63577a7 --- /dev/null +++ b/src/renderer/components/material/InputRange.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/src/renderer/store/mutations.js b/src/renderer/store/mutations.js index 0d0adb9f..89fdcebc 100644 --- a/src/renderer/store/mutations.js +++ b/src/renderer/store/mutations.js @@ -23,4 +23,7 @@ export default { if (isShow !== undefined) state.version.showModal = isShow if (isError !== undefined) state.version.isError = isError }, + setVolume(state, val) { + state.setting.player.volume = val + }, } diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js index 71c27340..633a4d95 100644 --- a/src/renderer/utils/index.js +++ b/src/renderer/utils/index.js @@ -168,6 +168,7 @@ export const updateSetting = setting => { togglePlayMethod: 'listLoop', highQuality: false, isShowTaskProgess: true, + volume: 1, }, list: { isShowAlbumName: true,