github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

新增播放速率调整功能

pull/1211/head
lyswhut 2023-02-08 18:27:35 +08:00
parent 9522e975a0
commit f809782559
27 changed files with 450 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
publish/changeLog.md
View File

@ -7,6 +7,7 @@
- 新增是否自动下载更新设置，默认开启，可以去设置-软件更新更改
- 新增当前版本更新日志显示弹窗（建议大家阅读更新日志以了解当前版本的变化），在更新版本后将自动弹出
- 新增是否在更新版本的首次启动时显示更新日志弹窗设置，默认开启，可以去设置-软件更新更改
- 新增播放速率调整功能，可以去播放详情页的控制按钮调整，范围限制为x0.5至x2之间（#13）
- 添加wy、tx源逐字歌词的支持
- 添加启动时的数据库表及表结构完整性校验，若未通过校验，则会显示弹窗提示后将该数据库重命名添加`.bak`后缀后重建数据库启动。对于某些人遇到更新到v2.0.0后出现之前收藏的歌曲全部丢失或者歌曲无法添加到列表的问题，可以通过此特性自动重建数据库并重新迁移数据，不再需要手动去数据目录删除数据库

1
src/common/defaultSetting.ts
View File

@ -25,6 +25,7 @@ const defaultSetting: LX.AppSetting = {
'player.isShowTaskProgess': true,
'player.volume': 1,
'player.isMute': false,
'player.playbackRate': 1,
'player.mediaDeviceId': 'default',
'player.isMediaDeviceRemovedStopPlay': false,
'player.isShowLyricTranslation': false,

5
src/common/types/app_setting.d.ts vendored
View File

@ -108,6 +108,11 @@ declare global {
*/
'player.isMute': boolean
/**
* 播放速率
*/
'player.playbackRate': number
/**
* 音频输出设备id
*/

2
src/common/types/desktop_lyric.d.ts vendored
View File

@ -62,6 +62,7 @@ declare namespace LX {
| LyricAction<'set_status', {
isPlay: boolean
line: number
rate: number
played_time: number
}>
| LyricAction<'set_lyric', {
@ -71,6 +72,7 @@ declare namespace LX {
lxlrc: string | null
}>
| LyricAction<'set_offset', number>
| LyricAction<'set_playbackRate', number>
| LyricAction<'set_play', number>
| LyricAction<'set_pause'>
| LyricAction<'set_stop'>

22
src/common/utils/lyric-font-player/font-player.js
View File

@ -28,6 +28,7 @@ const createAnimation = (dom, duration, isVertical) => new window.Animation(new
module.exports = class FontPlayer {
constructor({
time = 0,
rate = 1,
lyric = '',
lineContentClassName = 'line-content',
lineClassName = 'line',
@ -43,6 +44,8 @@ module.exports = class FontPlayer {
this.time = time
this.lyric = lyric
this._rate = rate
this.isVertical = isVertical
this.lineContentClassName = lineContentClassName
@ -136,7 +139,7 @@ module.exports = class FontPlayer {
const dom = document.createElement('span')
dom.textContent = text
const animation = createAnimation(dom, time, this.isVertical)
const animation = createAnimation(dom, time / this._rate, this.isVertical)
this.lrcContent.appendChild(dom)
// lineText += text
@ -186,7 +189,7 @@ module.exports = class FontPlayer {
}
_currentTime() {
return getNow() - this._performanceTime + this._startTime
return (getNow() - this._performanceTime) * this._rate + this._startTime
}
_findcurFontNum(curTime, startIndex = 0) {
@ -201,7 +204,7 @@ module.exports = class FontPlayer {
const currentTime = this._currentTime()
const driftTime = currentTime - curFont.startTime
if (currentTime > curFont.startTime + curFont.time) {
this._handlePlayFont(curFont, driftTime, true)
this._handlePlayFont(curFont, driftTime / this._rate, true)
this.lineContent.classList.add('played')
this.isPlay = false
this.pause()
@ -257,13 +260,13 @@ module.exports = class FontPlayer {
if (driftTime >= 0 || this.curFontNum == 0) {
let nextFont = this.fonts[this.curFontNum + 1]
this.delay = nextFont.startTime - curFont.startTime - driftTime
if (this.delay > 0) {
const delay = (nextFont.startTime - curFont.startTime - driftTime) / this._rate
if (delay > 0) {
if (this.isPlay) {
this.timeoutTools.start(() => {
if (!this.isPlay) return
this._refresh()
}, this.delay)
}, delay)
}
this._handlePlayFont(curFont, driftTime)
return
@ -342,6 +345,13 @@ module.exports = class FontPlayer {
this.curFontNum = this.maxFontNum
}
setPlaybackRate(rate) {
this._rate = rate
if (!this.lines.length) return
if (!this.isPlay) return
this.play(this._currentTime())
}
reset() {
this.pause()
if (this.isLineMode) return this._handlePlayLine(false)

16
src/common/utils/lyric-font-player/index.js
View File

@ -8,6 +8,7 @@ module.exports = class Lyric {
lyric = '',
extendedLyrics = [],
offset = 0,
rate = 1,
lineContentClassName = 'line-content',
lineClassName = 'line',
shadowClassName = 'shadow',
@ -25,6 +26,7 @@ module.exports = class Lyric {
this.lyric = lyric
this.extendedLyrics = extendedLyrics
this.offset = offset
this.rate = rate
this.onPlay = onPlay
this.onSetLyric = onSetLyric
this.onUpdateLyric = onUpdateLyric
@ -50,6 +52,7 @@ module.exports = class Lyric {
this.linePlayer = new LinePlayer({
offset: this.offset,
rate: this.rate,
onPlay: this._handleLinePlayerOnPlay,
onSetLyric: this._handleLinePlayerOnSetLyric,
})
@ -116,6 +119,7 @@ module.exports = class Lyric {
this._lines = lyricLines.map(line => {
const fontPlayer = new FontPlayer({
time: line.time,
rate: this.rate,
lyric: line.text,
extendedLyrics: line.extendedLyrics,
lineContentClassName: this.lineContentClassName,
@ -141,6 +145,7 @@ module.exports = class Lyric {
this._lines = lyricLines.map(line => {
const fontPlayer = new FontPlayer({
time: line.time,
rate: this.rate,
lyric: line.text,
extendedLyrics: line.extendedLyrics,
lineContentClassName: this.lineContentClassName,
@ -200,6 +205,17 @@ module.exports = class Lyric {
this._init()
}
setPlaybackRate(rate) {
this.rate = rate
this.linePlayer.setPlaybackRate(rate)
this._initLines(this.initInfo.lines, this.initInfo.offset, true)
if (this.linePlayer.isPlay) {
const num = this.playingLineNum
this.playingLineNum = 0
this._handleLinePlayerOnPlay(num, '', this.linePlayer._currentTime())
} else this.playingLineNum = 0
}
setVertical(isVertical) {
this.isVertical = isVertical
this._initLines(this.initInfo.lines, this.initInfo.offset, true)

18
src/common/utils/lyric-font-player/line-player.js
View File

@ -38,7 +38,7 @@ const parseExtendedLyric = (lrcLinesMap, extendedLyric) => {
}
module.exports = class LinePlayer {
constructor({ offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) {
constructor({ offset = 0, rate = 1, onPlay = function() { }, onSetLyric = function() { } } = {}) {
this.tags = {}
this.lines = null
this.onPlay = onPlay
@ -49,6 +49,7 @@ module.exports = class LinePlayer {
this.offset = offset
this._performanceTime = 0
this._startTime = 0
this._rate = rate
}
_init() {
@ -119,7 +120,7 @@ module.exports = class LinePlayer {
}
_currentTime() {
return getNow() - this._performanceTime + this._startTime
return (getNow() - this._performanceTime) * this._rate + this._startTime
}
_findCurLineNum(curTime, startIndex = 0) {
@ -146,14 +147,14 @@ module.exports = class LinePlayer {
if (driftTime >= 0 || this.curLineNum === 0) {
let nextLine = this.lines[this.curLineNum + 1]
this.delay = nextLine.time - curLine.time - driftTime
const delay = (nextLine.time - curLine.time - driftTime) / this._rate
if (this.delay > 0) {
if (delay > 0) {
if (this.isPlay) {
timeoutTools.start(() => {
if (!this.isPlay) return
this._refresh()
}, this.delay)
}, delay)
}
this.onPlay(this.curLineNum, curLine.text, currentTime)
return
@ -195,6 +196,13 @@ module.exports = class LinePlayer {
}
}
setPlaybackRate(rate) {
this._rate = rate
if (!this.lines.length) return
if (!this.isPlay) return
this.play(this._currentTime())
}
setLyric(lyric, extendedLyrics) {
// console.log(extendedLyrics)
if (this.isPlay) this.pause()

2
src/lang/en-us.json
View File

@ -218,6 +218,8 @@
"player__play_toggle_mode_off": "Disable",
"player__play_toggle_mode_random": "List Random",
"player__play_toggle_mode_single_loop": "Single Loop",
"player__playback_rate": "Current playback rate:",
"player__playback_rate_reset_btn": "Reset",
"player__playing": "Now playing...",
"player__prev": "Prev",
"player__refresh_url": "Music URL expired, refreshing...",

2
src/lang/zh-cn.json
View File

@ -218,6 +218,8 @@
"player__play_toggle_mode_off": "禁用",
"player__play_toggle_mode_random": "列表随机",
"player__play_toggle_mode_single_loop": "单曲循环",
"player__playback_rate": "当前播放速率：",
"player__playback_rate_reset_btn": "重置",
"player__playing": "播放中...",
"player__prev": "上一首",
"player__refresh_url": "URL过期，正在刷新URL...",

2
src/lang/zh-tw.json
View File

@ -218,6 +218,8 @@
"player__play_toggle_mode_off": "禁用",
"player__play_toggle_mode_random": "列表隨機",
"player__play_toggle_mode_single_loop": "單曲循環",
"player__playback_rate": "當前播放速率：",
"player__playback_rate_reset_btn": "重置",
"player__playing": "播放中...",
"player__prev": "上一首",
"player__refresh_url": "URL過期，正在刷新URL...",

4
src/renderer-lyric/core/lyric.ts
View File

@ -33,6 +33,10 @@ export const setLyricOffset = (offset: number) => {
lrc.setOffset(offset)
}
export const setPlaybackRate = (rate: number) => {
lrc.setPlaybackRate(rate)
}
export const setLyric = () => {
if (!musicInfo.id) return
const extendedLyrics = []

6
src/renderer-lyric/core/mainWindowChannel.ts
View File

@ -1,7 +1,7 @@
import { onProvideMainWindowChannel } from '@lyric/utils/ipc'
import { onBeforeUnmount } from '@common/utils/vueTools'
import { setMusicInfo, setIsPlay } from '../store/action'
import { pause, play, setLyric, setLyricOffset, stop } from './lyric'
import { pause, play, setLyric, setLyricOffset, setPlaybackRate, stop } from './lyric'
import { lyrics } from '@lyric/store/lyric'
let mainWindowPort: Electron.IpcRendererEvent['ports'][0] | null = null
@ -41,12 +41,16 @@ const handleDesktopLyricMessage = (event: LX.DesktopLyric.LyricActions) => {
break
case 'set_status':
setIsPlay(event.data.isPlay)
setPlaybackRate(event.data.rate)
if (event.data.isPlay) play(event.data.played_time)
else pause()
break
case 'set_offset':
setLyricOffset(event.data)
break
case 'set_playbackRate':
setPlaybackRate(event.data)
break
case 'set_pause':
setIsPlay(false)
pause()

4
src/renderer/assets/svgs/plex.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="144" height="144">
<path fill="currentColor" d="M11.5 6C8.467 6 6 8.467 6 11.5L6 36.5C6 39.533 8.467 42 11.5 42L36.5 42C39.533 42 42 39.533 42 36.5L42 11.5C42 8.467 39.533 6 36.5 6L11.5 6 z M 11.5 9L36.5 9C37.878 9 39 10.122 39 11.5L39 36.5C39 37.878 37.878 39 36.5 39L11.5 39C10.122 39 9 37.878 9 36.5L9 11.5C9 10.122 10.122 9 11.5 9 z M 18.167969 13.074219L25.197266 24L18.167969 34.925781L24.644531 34.925781L31.753906 24L24.644531 13.074219L18.167969 13.074219 z" />
</svg>

140
src/renderer/components/base/SliderBar.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div :class="[$style.sliderContent, className]">
<div :class="[$style.slider ]">
<div ref="dom_sliderBar" :class="$style.sliderBar" :style="{ transform: `scaleX(${(value - min) / (max - min) || 0})` }" />
</div>
<div :class="$style.sliderMask" @mousedown="handleSliderMsDown" />
</div>
</template>
<script>
import { ref, onBeforeUnmount } from '@common/utils/vueTools'
// import { player as eventPlayerNames } from '@renderer/event/names'
export default {
props: {
className: {
type: String,
default: '',
},
value: {
type: Number,
required: true,
},
min: {
type: Number,
required: true,
},
max: {
type: Number,
required: true,
},
},
emits: ['change'],
setup(props, { emit }) {
const sliderEvent = {
isMsDown: false,
msDownX: 0,
msDownValue: 0,
}
const dom_sliderBar = ref(null)
const handleSliderMsDown = event => {
sliderEvent.isMsDown = true
sliderEvent.msDownX = event.clientX
sliderEvent.msDownValue = event.offsetX / dom_sliderBar.value.clientWidth
let val = sliderEvent.msDownValue * (props.max - props.min) + props.min
if (val < props.min) val = props.min
if (val > props.max) val = props.max
emit('change', val)
// if (isMute.value) window.app_event.setSliderIsMute(false)
}
const handleSliderMsUp = () => {
sliderEvent.isMsDown = false
}
const handleSliderMsMove = event => {
if (!sliderEvent.isMsDown) return
let value = (sliderEvent.msDownValue + (event.clientX - sliderEvent.msDownX) / dom_sliderBar.value.clientWidth) * (props.max - props.min) + props.min
if (value > props.max) value = props.max
else if (value < props.min) value = props.min
emit('change', value)
}
document.addEventListener('mousemove', handleSliderMsMove)
document.addEventListener('mouseup', handleSliderMsUp)
onBeforeUnmount(() => {
document.removeEventListener('mousemove', handleSliderMsMove)
document.removeEventListener('mouseup', handleSliderMsUp)
})
return {
handleSliderMsDown,
dom_sliderBar,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.slider-content {
flex: none;
position: relative;
width: 100px;
padding: 5px 0;
// margin-right: 10px;
display: flex;
align-items: center;
opacity: .5;
transition: opacity @transition-normal;
&:hover {
opacity: 1;
}
}
.slider {
// cursor: pointer;
width: 100%;
height: 5px;
border-radius: 20px;
overflow: hidden;
transition: @transition-normal;
transition-property: background-color, opacity;
background-color: var(--color-primary-alpha-700);
// background-color: #f5f5f5;
position: relative;
// border-radius: @radius-progress-border;
}
// .muted {
// opacity: .5;
// }
.slider-bar {
position: absolute;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: 0;
transition-property: transform;
transition-timing-function: ease;
width: 100%;
height: 100%;
// border-radius: @radius-progress-border;
transition-duration: 0.2s;
background-color: var(--color-button-font);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.slider-mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
</style>

104
src/renderer/components/common/PlaybackRateBtn.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<material-popup-btn :class="$style.btnContent">
<button :class="[$style.btn, { [$style.active]: playbackRate != 1 }]" :aria-label="`${$t('player__playback_rate')}x${playbackRate}`">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-plex" />
</svg>
</button>
<template #content>
<div :class="$style.setting">
<div :class="$style.info">
<span>x{{ playbackRate }}</span>
<base-btn min @click="handleUpdatePlaybackRate(1)">{{ $t('player__playback_rate_reset_btn') }}</base-btn>
</div>
<base-slider-bar :value="playbackRate" :min="0.5" :max="2" @change="handleUpdatePlaybackRate" />
</div>
</template>
</material-popup-btn>
</template>
<script setup>
// import { computed } from '@common/utils/vueTools'
import { playbackRate } from '@renderer/store/player/playbackRate'
const handleUpdatePlaybackRate = (val) => {
window.app_event.setPlaybackRate(Math.round(val * 10) / 10)
}
// const icon = computed(() => {
// return playbackRate.value == 0
// ? '#icon-volume-off-outline'
// : playbackRate.value < 0.3
// ? '#icon-volume-low-outline'
// : playbackRate.value < 0.7
// ? '#icon-volume-medium-outline'
// : '#icon-volume-high-outline'
// })
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.btnContent {
flex: none;
height: 100%;
}
.btn {
position: relative;
// color: var(--color-button-font);
justify-content: center;
align-items: center;
transition: color @transition-normal;
cursor: pointer;
background-color: transparent;
border: none;
width: 24px;
display: flex;
flex-flow: column nowrap;
padding: 0;
svg {
transition: opacity @transition-fast;
opacity: .5;
// filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
&:hover {
svg {
opacity: .9;
}
}
&:active {
svg {
opacity: 1;
}
}
&.active {
svg {
color: var(--color-primary);
opacity: .8;
}
}
}
.setting {
display: flex;
flex-flow: column nowrap;
padding: 2px 3px;
gap: 8px;
}
.info {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
font-size: 13px;
span {
line-height: 1;
}
}
</style>

133
src/renderer/components/common/VolumeBar.vue
View File

@ -1,133 +0,0 @@
<template>
<div :class="[$style.volumeContent, className]">
<div :class="[$style.volume ]">
<div ref="dom_volumeBar" :class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }" />
</div>
<div :class="$style.volumeMask" @mousedown="handleVolumeMsDown" />
</div>
</template>
<script>
import { ref, onBeforeUnmount } from '@common/utils/vueTools'
// import { player as eventPlayerNames } from '@renderer/event/names'
import { volume, isMute } from '@renderer/store/player/volume'
import { appSetting } from '@renderer/store/setting'
export default {
props: {
className: {
type: String,
default: '',
},
},
setup(props) {
const volumeEvent = {
isMsDown: false,
msDownX: 0,
msDownVolume: 0,
}
const dom_volumeBar = ref(null)
const handleVolumeMsDown = event => {
volumeEvent.isMsDown = true
volumeEvent.msDownX = event.clientX
let val = event.offsetX / dom_volumeBar.value.clientWidth
if (val < 0) val = 0
if (val > 1) val = 1
window.app_event.setVolume(volumeEvent.msDownVolume = val)
// if (isMute.value) window.app_event.setVolumeIsMute(false)
}
const handleVolumeMsUp = () => {
volumeEvent.isMsDown = false
}
const handleVolumeMsMove = event => {
if (!volumeEvent.isMsDown) return
let volume = volumeEvent.msDownVolume + (event.clientX - volumeEvent.msDownX) / dom_volumeBar.value.clientWidth
if (volume > 1) volume = 1
else if (volume < 0) volume = 0
window.app_event.setVolume(volume)
}
document.addEventListener('mousemove', handleVolumeMsMove)
document.addEventListener('mouseup', handleVolumeMsUp)
onBeforeUnmount(() => {
document.removeEventListener('mousemove', handleVolumeMsMove)
document.removeEventListener('mouseup', handleVolumeMsUp)
})
return {
handleVolumeMsDown,
dom_volumeBar,
volume,
isMute,
appSetting,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.volume-content {
flex: none;
position: relative;
width: 100px;
padding: 5px 0;
// margin-right: 10px;
display: flex;
align-items: center;
opacity: .5;
transition: opacity @transition-normal;
&:hover {
opacity: 1;
}
}
.volume {
// cursor: pointer;
width: 100%;
height: 5px;
border-radius: 20px;
overflow: hidden;
transition: @transition-normal;
transition-property: background-color, opacity;
background-color: var(--color-primary-alpha-700);
// background-color: #f5f5f5;
position: relative;
// border-radius: @radius-progress-border;
}
// .muted {
// opacity: .5;
// }
.volume-bar {
position: absolute;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: 0;
transition-property: transform;
transition-timing-function: ease;
width: 100%;
height: 100%;
// border-radius: @radius-progress-border;
transition-duration: 0.2s;
background-color: var(--color-button-font);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.volume-mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
</style>

6
src/renderer/components/common/VolumeBtn.vue
View File

@ -16,7 +16,7 @@
@update:model-value="saveVolumeIsMute($event)"
/>
</div>
<common-volume-bar />
<base-slider-bar :value="volume" :min="0" :max="1" @change="handleUpdateVolume" />
</div>
</template>
</material-popup-btn>
@ -30,6 +30,10 @@ import { computed } from '@common/utils/vueTools'
import { saveVolumeIsMute } from '@renderer/store/setting'
import { volume, isMute } from '@renderer/store/player/volume'
const handleUpdateVolume = (val) => {
window.app_event.setVolume(val)
}
const icon = computed(() => {
return isMute.value
? '#icon-volume-mute-outline'

1
src/renderer/components/layout/PlayDetail/components/ControlBtns.vue
View File

@ -14,6 +14,7 @@ div(:class="$style.footerLeftControlBtns")
button(:class="[$style.footerLeftControlBtn, {[$style.active]: isShowPlayComment}]" @click="toggleVisibleComment" :aria-label="$t('comment__show')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-comment')
common-playback-rate-btn
common-volume-btn
common-toggle-play-mode-btn
button(:class="$style.footerLeftControlBtn" @click="isShowAddMusicTo = true" :aria-label="$t('player__add_music_to')")

21
src/renderer/core/lyric.ts
View File

@ -69,6 +69,7 @@ const handleDesktopLyricMessage = (action: LX.DesktopLyric.WinMainActions) => {
action: 'set_status',
data: {
isPlay: isPlay.value,
rate: appSetting['player.playbackRate'],
line: lyric.line,
played_time: getCurrentTime(),
},
@ -100,6 +101,7 @@ export const init = () => {
setLines(markRawList([...lines]))
setText(lines[0] ?? '', 0)
},
rate: appSetting['player.playbackRate'],
// offset: 80,
})
@ -143,6 +145,25 @@ export const setLyricOffset = (offset: number) => {
}
}
export const setPlaybackRate = (rate: number) => {
lrc.setPlaybackRate(rate)
sendDesktopLyricInfo({
action: 'set_playbackRate',
data: rate,
})
if (isPlay.value) {
setTimeout(() => {
const time = getCurrentTime()
sendDesktopLyricInfo({
action: 'set_play',
data: time,
})
lrc.play(time)
})
}
}
export const setLyric = () => {
if (!musicInfo.id) return
if (musicInfo.lrc) {

5
src/renderer/core/useApp/usePlayer/useLyric.ts
View File

@ -1,4 +1,5 @@
import { onBeforeUnmount, watch } from '@common/utils/vueTools'
import { debounce } from '@common/utils/common'
// import { setDesktopLyricInfo, onGetDesktopLyricInfo } from '@renderer/utils/ipc'
// import { musicInfo } from '@renderer/store/player/state'
import {
@ -8,9 +9,11 @@ import {
stop,
init,
sendInfo,
setPlaybackRate,
} from '@renderer/core/lyric'
import { appSetting } from '@renderer/store/setting'
const handleApplyPlaybackRate = debounce(setPlaybackRate, 300)
export default () => {
init()
@ -30,6 +33,7 @@ export default () => {
window.app_event.on('error', pause)
window.app_event.on('musicToggled', setPlayInfo)
window.app_event.on('lyricUpdated', setLyric)
window.app_event.on('setPlaybackRate', handleApplyPlaybackRate)
onBeforeUnmount(() => {
window.app_event.off('play', play)
@ -38,5 +42,6 @@ export default () => {
window.app_event.off('error', pause)
window.app_event.off('musicToggled', setPlayInfo)
window.app_event.off('lyricUpdated', setLyric)
window.app_event.off('setPlaybackRate', handleApplyPlaybackRate)
})
}

53
src/renderer/core/useApp/usePlayer/usePlaybackRate.ts Normal file
View File

@ -0,0 +1,53 @@
import { onBeforeUnmount, watch } from '@common/utils/vueTools'
import { setPlaybackRate as setPlayerPlaybackRate } from '@renderer/plugins/player'
import { debounce } from '@common/utils'
// import { HOTKEY_PLAYER } from '@common/hotKey'
import { playbackRate, setplaybackRate } from '@renderer/store/player/playbackRate'
import { appSetting, savePlaybackRate } from '@renderer/store/setting'
export default () => {
const handleSavePlaybackRate = debounce(savePlaybackRate, 300)
setplaybackRate(appSetting['player.playbackRate'])
setPlayerPlaybackRate(appSetting['player.playbackRate'])
const handleSetPlaybackRate = (num: number) => {
const rate = num < 0.5 ? 0.5 : num > 2 ? 2 : num
setplaybackRate(rate)
}
// const handleSetPlaybackRateUp = (step = 0.02) => {
// handleSetPlaybackRate(volume.value + step)
// }
// const handleSetPlaybackRateDown = (step = 0.02) => {
// handleSetPlaybackRate(volume.value - step)
// }
// const hotkeyVolumeUp = () => {
// handleSetPlaybackRateUp()
// }
// const hotkeyVolumeDown = () => {
// handleSetPlaybackRateDown()
// }
watch(playbackRate, rate => {
handleSavePlaybackRate(rate)
setPlayerPlaybackRate(rate)
})
watch(() => appSetting['player.playbackRate'], rate => {
setplaybackRate(rate)
})
// window.key_event.on(HOTKEY_PLAYER.volume_up.action, hotkeyVolumeUp)
// window.key_event.on(HOTKEY_PLAYER.volume_down.action, hotkeyVolumeDown)
window.app_event.on('setPlaybackRate', handleSetPlaybackRate)
onBeforeUnmount(() => {
// window.key_event.off(HOTKEY_PLAYER.volume_up.action, hotkeyVolumeUp)
// window.key_event.off(HOTKEY_PLAYER.volume_down.action, hotkeyVolumeDown)
window.app_event.off('setPlaybackRate', handleSetPlaybackRate)
})
}

2
src/renderer/core/useApp/usePlayer/usePlayer.ts
View File

@ -30,6 +30,7 @@ import useVolume from './useVolume'
import useWatchList from './useWatchList'
import { HOTKEY_PLAYER } from '@common/hotKey'
import { playNext, pause, playPrev, togglePlay } from '@renderer/core/player'
import usePlaybackRate from './usePlaybackRate'
export default () => {
@ -40,6 +41,7 @@ export default () => {
usePlayEvent()
useLyric()
useVolume()
usePlaybackRate()
useWatchList()
const handlePlayNext = () => {

8
src/renderer/event/appEvent.ts
View File

@ -50,6 +50,14 @@ export class AppEvent extends Event {
this.emit('setVolume', volume)
}
/**
* 设置播放速率大小
* @param rate 播放速率
*/
setPlaybackRate(rate: number) {
this.emit('setPlaybackRate', rate)
}
/**
* 设置是否静音
* @param isMute 是否静音

16
src/renderer/plugins/player.ts
View File

@ -52,6 +52,16 @@ export const setLoopPlay = (isLoop: boolean) => {
if (audio) audio.loop = isLoop
}
export const getPlaybackRate = (): number => {
return audio?.defaultPlaybackRate ?? 1
}
export const setPlaybackRate = (rate: number) => {
if (!audio) return
audio.defaultPlaybackRate = rate
audio.playbackRate = rate
}
export const getMute = (): boolean => {
return audio?.muted ?? false
}
@ -81,9 +91,9 @@ export const getDuration = () => {
return audio?.duration ?? 0
}
export const getPlaybackRate = () => {
return audio?.playbackRate ?? 1
}
// export const getPlaybackRate = () => {
// return audio?.playbackRate ?? 1
// }
type Noop = () => void

8
src/renderer/store/player/playbackRate.ts Normal file
View File

@ -0,0 +1,8 @@
import { ref } from '@common/utils/vueTools'
export const playbackRate = ref(1)
export const setplaybackRate = (num: number) => {
playbackRate.value = num
}

8
src/renderer/store/setting.ts
View File

@ -57,6 +57,14 @@ export const saveVolumeIsMute = (isMute: boolean) => {
updateSetting({ 'player.isMute': isMute })
}
/**
* 设置播放速率
* @param rate 播放速率
*/
export const savePlaybackRate = (rate: number) => {
updateSetting({ 'player.playbackRate': rate })
}
/**
* 设置是否开启桌面歌词

14
src/renderer/utils/musicSdk/tx/lyric.js
View File

@ -12,6 +12,7 @@ const parseTools = {
rxps: {
info: /^{"/,
lineTime: /^\[(\d+),\d+\]/,
lineTime2: /^\[([\d:.]+)\]/,
wordTime: /\(\d+,\d+\)/,
wordTimeAll: /(\(\d+,\d+\))/g,
timeLabelFixRxp: /(?:\.0+|0+)$/,
@ -42,6 +43,10 @@ const parseTools = {
lxlrcLines.push(line)
lrcLines.push(line)
}
if (this.rxps.lineTime2.test(line)) {
// lxlrcLines.push(line)
lrcLines.push(line)
}
continue
}
@ -105,22 +110,21 @@ const parseTools = {
const rlrcLines = rlrc.split('\n')
let lrcLines = lrc.split('\n')
// let temp = []
const timeTagRxp = /^\[([\d:.]+)\]/
let newLrc = []
rlrcLines.forEach((line) => {
const result = timeTagRxp.exec(line)
const result = this.rxps.lineTime2.exec(line)
if (!result) return
const words = line.replace(timeTagRxp, '')
const words = line.replace(this.rxps.lineTime2, '')
if (!words.trim()) return
const t1 = this.getIntv(result[1])
while (lrcLines.length) {
const lrcLine = lrcLines.shift()
const lrcLineResult = timeTagRxp.exec(lrcLine)
const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
if (!lrcLineResult) continue
const t2 = this.getIntv(lrcLineResult[1])
if (Math.abs(t1 - t2) < 10) {
newLrc.push(line.replace(timeTagRxp, lrcLineResult[0]))
newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
break
}
// temp.push(line)