From a5ec36bf8984276478c6633140370168afbb5de8 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Tue, 10 May 2022 11:12:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=BE=E7=BD=AE-=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E8=AE=BE=E7=BD=AE-=E6=98=BE=E7=A4=BA=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E7=BD=97=E9=A9=AC=E9=9F=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish/changeLog.md | 4 ++ src/common/defaultSetting.js | 3 +- src/lang/en-us.json | 5 ++- src/lang/zh-cn.json | 7 +-- src/lang/zh-tw.json | 7 +-- src/main/modules/winLyric/event.js | 1 + src/main/modules/winLyric/rendererEvent.js | 1 + src/renderer-lyric/App.vue | 8 ++-- src/renderer-lyric/components/core/Lyric.vue | 30 +++++++++---- .../core/PlayDetail/LyricPlayer.vue | 21 +++++---- .../core/PlayDetail/components/LyricMenu.vue | 5 +++ src/renderer/core/share/player.js | 1 + .../core/useApp/usePlayer/useLyric.js | 8 +++- .../core/useApp/usePlayer/usePlayer.js | 9 ++-- src/renderer/store/modules/download.js | 8 ++-- src/renderer/store/modules/player.js | 11 +++-- src/renderer/utils/index.js | 8 ++-- .../utils/lyric-font-player/font-player.js | 32 +++++++------- src/renderer/utils/lyric-font-player/index.js | 26 +++++------ .../utils/lyric-font-player/line-player.js | 44 ++++++++++--------- src/renderer/utils/lyric-font-player/utils.js | 4 +- src/renderer/utils/music/wy/lyric.js | 10 +++-- .../views/setting/components/SettingPlay.vue | 2 + src/renderer/views/setting/setting.js | 1 + 24 files changed, 156 insertions(+), 100 deletions(-) diff --git a/publish/changeLog.md b/publish/changeLog.md index 3542e6ec..1daca15b 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,3 +1,7 @@ +### 新增 + +- 新增设置-播放设置-显示歌词罗马音，默认关闭，注：目前只有网易源能获取到罗马音歌词，如果你知道其他源的歌词罗马音获取方式，欢迎PR！ + ### 优化 - 同时删除一首歌以上时将需要二次确认删除 diff --git a/src/common/defaultSetting.js b/src/common/defaultSetting.js index 6903b578..e2928c12 100644 --- a/src/common/defaultSetting.js +++ b/src/common/defaultSetting.js @@ -2,7 +2,7 @@ const path = require('path') const os = require('os') const defaultSetting = { - version: '1.0.56', + version: '1.0.57', player: { togglePlayMethod: 'listLoop', highQuality: false, @@ -12,6 +12,7 @@ const defaultSetting = { mediaDeviceId: 'default', isMediaDeviceRemovedStopPlay: false, isShowLyricTranslation: false, + isShowLyricRoma: false, isS2t: false, // 是否将歌词从简体转换为繁体 isPlayLxlrc: true, isSavePlayTime: false, diff --git a/src/lang/en-us.json b/src/lang/en-us.json index 25f3978a..eb971193 100644 --- a/src/lang/en-us.json +++ b/src/lang/en-us.json @@ -356,7 +356,8 @@ "setting__play_detail_font_size_reset": "Reset", "setting__play_detail_font_zoom": "Zoom the currently playing lyrics", "setting__play_detail_lyric_progress": "Allows to adjust playback progress by lyrics", - "setting__play_lyric_lxlrc": "Use Karaoke-style lyrics playback (if supported)", + "setting__play_lyric_lxlrc": "Play with karaoke-style lyrics (if available)", + "setting__play_lyric_roma": "Show lyrics roman", "setting__play_lyric_s2t": "Convert the playing and downloading lyrics to Traditional Chinese", "setting__play_lyric_transition": "Show lyrics translation", "setting__play_mediaDevice": "Audio output", @@ -364,7 +365,7 @@ "setting__play_mediaDevice_title": "Select a media device for audio output", "setting__play_media_device_error_tip": "This function conflicts with the audio visualization function. You have enabled audio visualization when you started the software this time. This setting is temporarily unavailable. Please restart the software and then modify this setting.", "setting__play_media_device_tip": "This feature conflicts with Audio Visualization, both cannot be enabled at the same time, would you like to turn Audio Visualization off and apply the selected audio output settings?", - "setting__play_quality": "Play 320K quality songs first (if supported)", + "setting__play_quality": "Priority playback of 320K quality songs (if available)", "setting__play_save_play_time": "Remember playback progress", "setting__play_task_bar": "Show playing progress on the taskbar", "setting__play_timeout": "Timed pause", diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json index 222eef4c..795079ec 100644 --- a/src/lang/zh-cn.json +++ b/src/lang/zh-cn.json @@ -356,15 +356,16 @@ "setting__play_detail_font_size_reset": "重置", "setting__play_detail_font_zoom": "缩放当前正在播放的歌词", "setting__play_detail_lyric_progress": "允许通过歌词调整播放进度", - "setting__play_lyric_lxlrc": "使用卡拉OK式歌词播放（如果支持）", + "setting__play_lyric_lxlrc": "使用卡拉OK式歌词播放（如果可用）", + "setting__play_lyric_roma": "显示歌词罗马音（如果可用）", "setting__play_lyric_s2t": "将播放与下载的歌词转换为繁体中文", - "setting__play_lyric_transition": "显示歌词翻译", + "setting__play_lyric_transition": "显示歌词翻译（如果可用）", "setting__play_mediaDevice": "音频输出", "setting__play_mediaDevice_remove_stop_play": "当前的声音输出设备被改变时暂停播放歌曲", "setting__play_mediaDevice_title": "选择声音输出的媒体设备", "setting__play_media_device_error_tip": "此功能与音频可视化功能冲突，你本次启动软件时已启用过音频可视化，此设置暂不可用，请 重启 软件后，再来修改此设置。", "setting__play_media_device_tip": "此功能与音频可视化功能冲突，两者无法同时启用，是否将音频可视化关闭 并 应用所选音频输出设置？", - "setting__play_quality": "优先播放320K品质的歌曲（如果支持）", + "setting__play_quality": "优先播放320K品质的歌曲（如果可用）", "setting__play_save_play_time": "记住播放进度", "setting__play_task_bar": "在任务栏上显示当前歌曲播放进度", "setting__play_timeout": "定时暂停", diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json index b0ac4288..ef966429 100644 --- a/src/lang/zh-tw.json +++ b/src/lang/zh-tw.json @@ -356,15 +356,16 @@ "setting__play_detail_font_size_reset": "重置", "setting__play_detail_font_zoom": "縮放當前正在播放的歌詞", "setting__play_detail_lyric_progress": "允許通過歌詞調整播放進度", - "setting__play_lyric_lxlrc": "使用卡拉OK式歌詞播放（如果支持）", + "setting__play_lyric_lxlrc": "使用卡拉OK式歌詞播放（如果可用）", + "setting__play_lyric_roma": "顯示歌詞羅馬音（如果可用）", "setting__play_lyric_s2t": "將播放與下載的歌詞轉換為繁體中文", - "setting__play_lyric_transition": "顯示歌詞翻譯", + "setting__play_lyric_transition": "顯示歌詞翻譯（如果可用）", "setting__play_mediaDevice": "音頻輸出", "setting__play_mediaDevice_remove_stop_play": "當前的聲音輸出設備被改變時暫停播放歌曲", "setting__play_mediaDevice_title": "選擇聲音輸出的媒體設備", "setting__play_media_device_error_tip": "此功能與音頻可視化功能衝突，你本次啟動軟件時已啟用過音頻可視化，此設置暫不可用，請 重啟 軟件後，再來修改此設置。", "setting__play_media_device_tip": "此功能與音頻可視化功能衝突，兩者無法同時啟用，是否將音頻可視化關閉 並 應用所選音頻輸出設置？", - "setting__play_quality": "優先播放320K品質的歌曲（如果支持）", + "setting__play_quality": "優先播放320K品質的歌曲（如果可用）", "setting__play_save_play_time": "記住播放進度", "setting__play_task_bar": "在任務欄上顯示當前歌曲播放進度", "setting__play_timeout": "定時暫停", diff --git a/src/main/modules/winLyric/event.js b/src/main/modules/winLyric/event.js index 188f6ba8..4e4b8e97 100644 --- a/src/main/modules/winLyric/event.js +++ b/src/main/modules/winLyric/event.js @@ -41,6 +41,7 @@ const setLrcConfig = () => { config: desktopLyric, languageId: global.appSetting.langId, isShowLyricTranslation: global.appSetting.player.isShowLyricTranslation, + isShowLyricRoma: global.appSetting.player.isShowLyricRoma, isPlayLxlrc: global.appSetting.player.isPlayLxlrc, }) if (isLock != desktopLyric.isLock) { diff --git a/src/main/modules/winLyric/rendererEvent.js b/src/main/modules/winLyric/rendererEvent.js index d1c3745a..082aa574 100644 --- a/src/main/modules/winLyric/rendererEvent.js +++ b/src/main/modules/winLyric/rendererEvent.js @@ -28,6 +28,7 @@ mainHandle(ipcWinLyricNames.get_lyric_config, async() => { config: global.appSetting.desktopLyric, languageId: global.appSetting.langId, isShowLyricTranslation: global.appSetting.player.isShowLyricTranslation, + isShowLyricRoma: global.appSetting.player.isShowLyricRoma, isPlayLxlrc: global.appSetting.player.isPlayLxlrc, } }) diff --git a/src/renderer-lyric/App.vue b/src/renderer-lyric/App.vue index c8eee7d4..b4401d94 100644 --- a/src/renderer-lyric/App.vue +++ b/src/renderer-lyric/App.vue @@ -4,7 +4,7 @@ transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") .control-bar(v-show="!lrcConfig.isLock") core-control-bar(:lrcConfig="lrcConfig" :themes="themeList") - core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTranslation="isShowLyricTranslation") + core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTranslation="isShowLyricTranslation" :isShowLyricRoma="isShowLyricRoma") div.resize-left(@mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)") div.resize-top(@mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)") div.resize-right(@mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)") @@ -46,7 +46,8 @@ export default { isZoomActiveLrc: true, }, }, - isShowLyricTranslation: true, + isShowLyricTranslation: false, + isShowLyricRoma: false, isPlayLxlrc: true, themeList: [ { @@ -111,9 +112,10 @@ export default { document.removeEventListener('mouseup', this.handleMouseUp) }, methods: { - handleUpdateConfig({ config, languageId, isShowLyricTranslation, isPlayLxlrc }) { + handleUpdateConfig({ config, languageId, isShowLyricTranslation, isShowLyricRoma, isPlayLxlrc }) { this.lrcConfig = config this.isShowLyricTranslation = isShowLyricTranslation + this.isShowLyricRoma = isShowLyricRoma this.isPlayLxlrc = isPlayLxlrc if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId }, diff --git a/src/renderer-lyric/components/core/Lyric.vue b/src/renderer-lyric/components/core/Lyric.vue index 4527f69d..752d8166 100644 --- a/src/renderer-lyric/components/core/Lyric.vue +++ b/src/renderer-lyric/components/core/Lyric.vue @@ -40,6 +40,10 @@ export default { type: Boolean, default: true, }, + isShowLyricRoma: { + type: Boolean, + default: true, + }, }, data() { return { @@ -74,6 +78,7 @@ export default { lyrics: { lyric: '', tlyric: '', + rlyric: '', lxlyric: '', }, } @@ -143,6 +148,10 @@ export default { this.setLyric() rendererSend(NAMES.winLyric.get_lyric_info, 'status') }, + isShowLyricRoma() { + this.setLyric() + rendererSend(NAMES.winLyric.get_lyric_info, 'status') + }, isPlayLxlrc() { this.setLyric() rendererSend(NAMES.winLyric.get_lyric_info, 'status') @@ -195,6 +204,7 @@ export default { case 'lyric': this.lyrics.lyric = data.lrc this.lyrics.tlyric = data.tlrc + this.lyrics.rlyric = data.rlrc this.lyrics.lxlyric = data.lxlrc this.setLyric() break @@ -211,12 +221,14 @@ export default { this.lyrics.lyric = '' this.lyrics.tlyric = '' this.lyrics.lxlyric = '' + this.lyrics.rlyric = '' this.setLyric() break case 'info': // console.log('info', data) this.lyrics.lyric = data.lrc this.lyrics.tlyric = data.tlrc + this.lyrics.rlyric = data.rlrc this.lyrics.lxlyric = data.lxlrc this.setLyric() this.$nextTick(() => { @@ -343,10 +355,12 @@ export default { rendererSend(NAMES.winLyric.close) }, setLyric() { + const extendedLyrics = [] + if (this.isShowLyricTranslation && this.lyrics.tlyric) extendedLyrics.push(this.lyrics.tlyric) + if (this.isShowLyricRoma && this.lyrics.rlyric) extendedLyrics.push(this.lyrics.rlyric) window.lrc.setLyric( this.isPlayLxlrc && this.lyrics.lxlyric ? this.lyrics.lxlyric : this.lyrics.lyric, - this.isShowLyricTranslation && this.lyrics.tlyric ? this.lyrics.tlyric : '', - // (this.isShowLyricTranslation && this.lyrics.tlyric ? (this.lyrics.tlyric + '\n') : '') + (this.lyrics.lyric || ''), + extendedLyrics, ) }, }, @@ -375,11 +389,11 @@ export default { display: inline-block; } - .font, .translation { + .font, .extended { cursor: grab; } - .translation { + .extended { transition: @transition-theme !important; transition-property: font-size, color; font-size: 0.8em; @@ -396,7 +410,7 @@ export default { .line { color: @color-theme; } - .translation { + .extended { color: @color-theme; } // span { @@ -465,7 +479,7 @@ export default { .draging { :global { .lrc-content { - .font, .translation { + .font, .extended { cursor: grabbing; } } @@ -475,7 +489,7 @@ export default { :global { .lrc-content { &.active { - .translation { + .extended { font-size: .94em; } span { @@ -508,7 +522,7 @@ each(@themes, { :global { .lrc-content { &.active { - .translation { + .extended { color: ~'@{color-@{value}-theme}'; } .line { diff --git a/src/renderer/components/core/PlayDetail/LyricPlayer.vue b/src/renderer/components/core/PlayDetail/LyricPlayer.vue index 40f6c33b..0f07d043 100644 --- a/src/renderer/components/core/PlayDetail/LyricPlayer.vue +++ b/src/renderer/components/core/PlayDetail/LyricPlayer.vue @@ -27,8 +27,10 @@
{{info.text}} -
- {{info.translation}} +
@@ -77,6 +79,7 @@ export default { const lyricInfo = reactive({ lyric: '', tlyric: '', + rlyric: '', lxlyric: '', rawlyric: '', musicInfo: null, @@ -84,6 +87,7 @@ export default { const updateMusicInfo = () => { lyricInfo.lyric = playerMusicInfo.lrc lyricInfo.tlyric = playerMusicInfo.tlrc + lyricInfo.rlyric = playerMusicInfo.rlrc lyricInfo.lxlyric = playerMusicInfo.lxlrc lyricInfo.rawlyric = playerMusicInfo.rawlrc lyricInfo.musicInfo = musicInfoItem.value @@ -94,10 +98,11 @@ export default { lyricMenuXY.y = event.pageY lyricMenuVisible.value = true } - const handleUpdateLyric = ({ lyric, tlyric, lxlyric, offset }) => { + const handleUpdateLyric = ({ lyric, tlyric, rlyric, lxlyric, offset }) => { setMusicInfo({ lrc: lyric, tlrc: tlyric, + rlrc: rlyric, lxlrc: lxlyric, }) // console.log(offset) @@ -189,7 +194,7 @@ export default { transition: @transition-theme; transition-property: padding; - .translation { + .extended { transition: @transition-theme !important; transition-property: font-size, color; font-size: .9em; @@ -205,7 +210,7 @@ export default { .line { color: @color-theme; } - .translation { + .extended { color: @color-theme; } // span { @@ -243,7 +248,7 @@ export default { :global { .lrc-content { &.active { - .translation { + .extended { font-size: .94em; } span { @@ -316,7 +321,7 @@ export default { transition-property: color, font-size; line-height: 1.3; } - .lyricSelectlineTransition { + .lyricSelectlineExtended { font-size: 14px; } .lrc-active { @@ -336,7 +341,7 @@ each(@themes, { color: ~'@{color-@{value}-player-detail-lyric}'; &.active { - .translation { + .extended { color: ~'@{color-@{value}-player-detail-lyric-active}'; } .line { diff --git a/src/renderer/components/core/PlayDetail/components/LyricMenu.vue b/src/renderer/components/core/PlayDetail/components/LyricMenu.vue index 77c2abea..0828c321 100644 --- a/src/renderer/components/core/PlayDetail/components/LyricMenu.vue +++ b/src/renderer/components/core/PlayDetail/components/LyricMenu.vue @@ -114,15 +114,18 @@ export default { const updateLyric = offset => { let lyric = props.lyricInfo.lyric let tlyric = props.lyricInfo.tlyric + let rlyric = props.lyricInfo.rlyric let lxlyric = props.lyricInfo.lxlyric if (offsetTagRxp.test(lyric)) { lyric = lyric.replace(offsetTagAllRxp, `[offset:${offset}]`) if (tlyric) tlyric = tlyric.replace(offsetTagAllRxp, `[offset:${offset}]`) if (lxlyric) lxlyric = lxlyric.replace(offsetTagAllRxp, `[offset:${offset}]`) + if (rlyric) rlyric = rlyric.replace(offsetTagAllRxp, `[offset:${offset}]`) } else { lyric = `[offset:${offset}]\n` + lyric if (tlyric) tlyric = `[offset:${offset}]\n` + tlyric if (lxlyric) lxlyric = `[offset:${offset}]\n` + lxlyric + if (rlyric) rlyric = `[offset:${offset}]\n` + rlyric } if (offset == originOffset.value) { @@ -131,6 +134,7 @@ export default { saveLyric(props.lyricInfo.musicInfo, { lyric, tlyric, + rlyric, lxlyric, }) } @@ -138,6 +142,7 @@ export default { emit('updateLyric', { lyric, tlyric, + rlyric, lxlyric, offset, }) diff --git a/src/renderer/core/share/player.js b/src/renderer/core/share/player.js index ce6ee92a..42ee9203 100644 --- a/src/renderer/core/share/player.js +++ b/src/renderer/core/share/player.js @@ -6,6 +6,7 @@ export const musicInfo = window.musicInfo = reactive({ img: null, lrc: null, tlrc: null, + rlrc: null, lxlrc: null, rawlrc: null, url: null, diff --git a/src/renderer/core/useApp/usePlayer/useLyric.js b/src/renderer/core/useApp/usePlayer/useLyric.js index bb48f7d4..051a0f39 100644 --- a/src/renderer/core/useApp/usePlayer/useLyric.js +++ b/src/renderer/core/useApp/usePlayer/useLyric.js @@ -43,11 +43,14 @@ export default ({ setting }) => { const setLyric = () => { if (!musicInfo.songmid) return + const extendedLyrics = [] + if (setting.value.player.isShowLyricTranslation && musicInfo.tlrc) extendedLyrics.push(musicInfo.tlrc) + if (setting.value.player.isShowLyricRoma && musicInfo.rlrc) extendedLyrics.push(musicInfo.rlrc) lrc.setLyric( setting.value.player.isPlayLxlrc && musicInfo.lxlrc ? musicInfo.lxlrc : musicInfo.lrc, - setting.value.player.isShowLyricTranslation && musicInfo.tlrc ? musicInfo.tlrc : '', + extendedLyrics, ) - setDesktopLyricInfo('lyric', { lrc: musicInfo.lrc, tlrc: musicInfo.tlrc, lxlrc: musicInfo.lxlrc }) + setDesktopLyricInfo('lyric', { lrc: musicInfo.lrc, tlrc: musicInfo.tlrc, rlrc: musicInfo.rlrc, lxlrc: musicInfo.lxlrc }) if (isPlay.value && (musicInfo.url || playMusicInfo.listId == 'download')) { setTimeout(() => { @@ -99,6 +102,7 @@ export default ({ setting }) => { album: musicInfo.album, lrc: musicInfo.lrc, tlrc: musicInfo.tlrc, + rlrc: musicInfo.rlrc, lxlrc: musicInfo.lxlrc, isPlay: isPlay.value, line: lyric.line, diff --git a/src/renderer/core/useApp/usePlayer/usePlayer.js b/src/renderer/core/useApp/usePlayer/usePlayer.js index cb12dbc5..179f5d1e 100644 --- a/src/renderer/core/useApp/usePlayer/usePlayer.js +++ b/src/renderer/core/useApp/usePlayer/usePlayer.js @@ -135,20 +135,22 @@ export default ({ setting }) => { } } const setLrc = (targetSong) => { - getLrc(targetSong).then(({ lyric, tlyric, lxlyric, rawInfo }) => { + getLrc(targetSong).then(({ lyric, tlyric, rlyric, lxlyric, rawInfo }) => { if (targetSong.songmid !== musicInfo.songmid) return return ( setting.value.player.isS2t ? Promise.all([ lyric ? langS2T(lyric) : Promise.resolve(''), tlyric ? langS2T(tlyric) : Promise.resolve(''), + rlyric ? langS2T(rlyric) : Promise.resolve(''), lxlyric ? langS2T(lxlyric) : Promise.resolve(''), ]) - : Promise.resolve([lyric, tlyric, lxlyric]) - ).then(([lyric, tlyric, lxlyric]) => { + : Promise.resolve([lyric, tlyric, rlyric, lxlyric]) + ).then(([lyric, tlyric, rlyric, lxlyric]) => { setMusicInfo({ lrc: lyric, tlrc: tlyric, + rlrc: rlyric, lxlrc: lxlyric, rawlrc: rawInfo.lyric, }) @@ -213,6 +215,7 @@ export default ({ setting }) => { img: null, lrc: null, tlrc: null, + rlrc: null, lxlrc: null, rawlrc: null, url: null, diff --git a/src/renderer/store/modules/download.js b/src/renderer/store/modules/download.js index 6088538a..be2d85e1 100644 --- a/src/renderer/store/modules/download.js +++ b/src/renderer/store/modules/download.js @@ -185,14 +185,14 @@ const getLyric = function(musicInfo, isUseOtherSource, isS2t) { return getLyricFromStorage(musicInfo).then(lrcInfo => { return ( existTimeExp.test(lrcInfo.lyric) - ? Promise.resolve({ lyric: lrcInfo.lyric, tlyric: lrcInfo.tlyric || '' }) + ? Promise.resolve({ lyric: lrcInfo.lyric, tlyric: lrcInfo.tlyric || '', rlyric: lrcInfo.rlyric || '', lxlyric: lrcInfo.lxlyric || '' }) : ( isUseOtherSource ? handleGetLyric.call(this, musicInfo) : music[musicInfo.source].getLyric(musicInfo).promise - ).then(({ lyric, tlyric, lxlyric }) => { - setLyric(musicInfo, { lyric, tlyric, lxlyric }) - return { lyric, tlyric, lxlyric } + ).then(({ lyric, tlyric, rlyric, lxlyric }) => { + setLyric(musicInfo, { lyric, tlyric, rlyric, lxlyric }) + return { lyric, tlyric, rlyric, lxlyric } }).catch(err => { console.log(err) return null diff --git a/src/renderer/store/modules/player.js b/src/renderer/store/modules/player.js index ed904150..d0a7ab1e 100644 --- a/src/renderer/store/modules/player.js +++ b/src/renderer/store/modules/player.js @@ -223,7 +223,7 @@ const actions = { }, async getLrc({ commit, state }, musicInfo) { const lrcInfo = await getStoreLyric(musicInfo) - // lrcInfo = {} + // let lrcInfo = {} // if (lrcRequest && lrcRequest.cancelHttp) lrcRequest.cancelHttp() if (existTimeExp.test(lrcInfo.lyric) && lrcInfo.tlyric != null) { // if (musicInfo.lrc.startsWith('\ufeff[id:$00000000]')) { @@ -242,14 +242,16 @@ const actions = { default: return buildLyricInfo(lrcInfo, musicInfo) } + } else if (lrcInfo.rlyric == null) { + if (musicInfo.source != 'wy') return buildLyricInfo(lrcInfo, musicInfo) } else return buildLyricInfo(lrcInfo, musicInfo) } // lrcRequest = music[musicInfo.source].getLyric(musicInfo) - return getLyric.call(this, musicInfo).then(({ lyric, tlyric, lxlyric }) => { + return getLyric.call(this, musicInfo).then(({ lyric, tlyric, rlyric, lxlyric }) => { // lrcRequest = null - commit('setLrc', { musicInfo, lyric, tlyric, lxlyric }) - return buildLyricInfo({ lyric, tlyric, lxlyric }, musicInfo) + commit('setLrc', { musicInfo, lyric, tlyric, rlyric, lxlyric }) + return buildLyricInfo({ lyric, tlyric, rlyric, lxlyric }, musicInfo) }).catch(err => { // lrcRequest = null return Promise.reject(err) @@ -443,6 +445,7 @@ const mutations = { setLyric(datas.musicInfo, { lyric: datas.lyric, tlyric: datas.tlyric, + rlyric: datas.rlyric, lxlyric: datas.lxlyric, }) }, diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js index b5f38727..85c7899f 100644 --- a/src/renderer/utils/index.js +++ b/src/renderer/utils/index.js @@ -514,13 +514,13 @@ export const parseUrlParams = str => { export const getLyric = musicInfo => rendererInvoke(NAMES.mainWindow.get_lyric, `${musicInfo.source}_${musicInfo.songmid}`) export const getLyricRaw = musicInfo => rendererInvoke(NAMES.mainWindow.get_lyric_raw, `${musicInfo.source}_${musicInfo.songmid}`) -export const setLyric = (musicInfo, { lyric, tlyric, lxlyric }) => rendererSend(NAMES.mainWindow.save_lyric_raw, { +export const setLyric = (musicInfo, { lyric, tlyric, rlyric, lxlyric }) => rendererSend(NAMES.mainWindow.save_lyric_raw, { id: `${musicInfo.source}_${musicInfo.songmid}`, - lyrics: { lyric, tlyric, lxlyric }, + lyrics: { lyric, tlyric, rlyric, lxlyric }, }) -export const setLyricEdited = (musicInfo, { lyric, tlyric, lxlyric }) => rendererSend(NAMES.mainWindow.save_lyric_edited, { +export const setLyricEdited = (musicInfo, { lyric, tlyric, rlyric, lxlyric }) => rendererSend(NAMES.mainWindow.save_lyric_edited, { id: `${musicInfo.source}_${musicInfo.songmid}`, - lyrics: { lyric, tlyric, lxlyric }, + lyrics: { lyric, tlyric, rlyric, lxlyric }, }) export const removeLyricEdited = musicInfo => rendererSend(NAMES.mainWindow.remove_lyric_edited, `${musicInfo.source}_${musicInfo.songmid}`) diff --git a/src/renderer/utils/lyric-font-player/font-player.js b/src/renderer/utils/lyric-font-player/font-player.js index 0240d500..2eb12884 100644 --- a/src/renderer/utils/lyric-font-player/font-player.js +++ b/src/renderer/utils/lyric-font-player/font-player.js @@ -20,14 +20,14 @@ const createAnimation = (dom, duration) => new window.Animation(new window.Keyfr // https://jsfiddle.net/ceqpnbky/1/ module.exports = class FontPlayer { - constructor({ time = 0, lyric = '', translationLyric = '', lineClassName = '', fontClassName = '', translationClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) { + constructor({ time = 0, lyric = '', extendedLyrics = '', lineClassName = '', fontClassName = '', extendedLrcClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) { this.time = time this.lyric = lyric - this.translationLyric = translationLyric + this.extendedLyrics = extendedLyrics this.lineClassName = lineClassName this.fontClassName = fontClassName - this.translationClassName = translationClassName + this.extendedLrcClassName = extendedLrcClassName this.lineModeClassName = lineModeClassName this.shadowContent = shadowContent this.shadowClassName = shadowClassName @@ -40,8 +40,8 @@ module.exports = class FontPlayer { this.fontContent = null - this.timeoutTools = new TimeoutTools() - this.waitPlayTimeout = new TimeoutTools() + this.timeoutTools = new TimeoutTools(80) + this.waitPlayTimeout = new TimeoutTools(80) this._init() } @@ -64,20 +64,20 @@ module.exports = class FontPlayer { this.fontContent.appendChild(this.fontShadowContent) } this.lineContent.appendChild(this.fontContent) - if (this.translationLyric) { - this.translationContent = document.createElement('div') - this.translationContent.style = 'position:relative;display:inline-block;' - this.translationContent.className = this.translationClassName - this.translationContent.textContent = this.translationLyric + for (const lrc of this.extendedLyrics) { + const extendedLrcContent = document.createElement('div') + extendedLrcContent.style = 'position:relative;display:inline-block;' + extendedLrcContent.className = this.extendedLrcClassName + extendedLrcContent.textContent = lrc this.lineContent.appendChild(document.createElement('br')) - this.lineContent.appendChild(this.translationContent) + this.lineContent.appendChild(extendedLrcContent) if (this.shadowContent) { - this.translationShadowContent = document.createElement('div') - this.translationShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;' - this.translationShadowContent.className = this.shadowClassName - this.translationShadowContent.textContent = this.translationLyric - this.translationContent.appendChild(this.translationShadowContent) + const extendedLrcShadowContent = document.createElement('div') + extendedLrcShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;' + extendedLrcShadowContent.className = this.shadowClassName + extendedLrcShadowContent.textContent = lrc + extendedLrcContent.appendChild(extendedLrcShadowContent) } } this._parseLyric() diff --git a/src/renderer/utils/lyric-font-player/index.js b/src/renderer/utils/lyric-font-player/index.js index 637f939c..f2560708 100644 --- a/src/renderer/utils/lyric-font-player/index.js +++ b/src/renderer/utils/lyric-font-player/index.js @@ -6,11 +6,11 @@ const fontTimeExp = /<(\d+),(\d+)>/g module.exports = class Lyric { constructor({ lyric = '', - translationLyric = '', + extendedLyrics = [], offset = 0, lineClassName = '', fontClassName = 'font', - translationClassName = 'translation', + extendedLrcClassName = 'extended', activeLineClassName = 'active', lineModeClassName = 'line', shadowClassName = '', @@ -19,14 +19,14 @@ module.exports = class Lyric { onSetLyric = function() { }, }) { this.lyric = lyric - this.translationLyric = translationLyric + this.extendedLyrics = extendedLyrics this.offset = offset this.onPlay = onPlay this.onSetLyric = onSetLyric this.lineClassName = lineClassName this.fontClassName = fontClassName - this.translationClassName = translationClassName + this.extendedLrcClassName = extendedLrcClassName this.activeLineClassName = activeLineClassName this.lineModeClassName = lineModeClassName this.shadowClassName = shadowClassName @@ -46,7 +46,7 @@ module.exports = class Lyric { this.playingLineNum = -1 this.isLineMode = false - this.linePlayer.setLyric(this.lyric, this.translationLyric) + this.linePlayer.setLyric(this.lyric, this.extendedLyrics) } _handleLinePlayerOnPlay = (num, text, curTime) => { @@ -104,10 +104,10 @@ module.exports = class Lyric { const fontPlayer = new FontPlayer({ time: line.time, lyric: line.text, - translationLyric: line.translation, + extendedLyrics: line.extendedLyrics, lineClassName: this.lineClassName, fontClassName: this.fontClassName, - translationClassName: this.translationClassName, + extendedLrcClassName: this.extendedLrcClassName, lineModeClassName: this.lineModeClassName, shadowClassName: this.shadowClassName, shadowContent: this.shadowContent, @@ -117,7 +117,7 @@ module.exports = class Lyric { return { text: line.text, time: line.time, - translation: line.translation, + extendedLyrics: line.extendedLyrics, dom_line: fontPlayer.lineContent, } }) @@ -126,10 +126,10 @@ module.exports = class Lyric { const fontPlayer = new FontPlayer({ time: line.time, lyric: line.text, - translationLyric: line.translation, + extendedLyrics: line.extendedLyrics, lineClassName: this.lineClassName, fontClassName: this.fontClassName, - translationClassName: this.translationClassName, + extendedLrcClassName: this.extendedLrcClassName, shadowClassName: this.shadowClassName, shadowContent: this.shadowContent, }) @@ -138,7 +138,7 @@ module.exports = class Lyric { return { text: line.text.replace(fontTimeExp, ''), time: line.time, - translation: line.translation, + extendedLyrics: line.extendedLyrics, dom_line: fontPlayer.lineContent, } }) @@ -162,9 +162,9 @@ module.exports = class Lyric { if (this.playingLineNum > -1) this._lineFonts[this.playingLineNum].pause() } - setLyric(lyric, translationLyric) { + setLyric(lyric, extendedLyrics) { this.lyric = lyric - this.translationLyric = translationLyric + this.extendedLyrics = extendedLyrics this._init() } } diff --git a/src/renderer/utils/lyric-font-player/line-player.js b/src/renderer/utils/lyric-font-player/line-player.js index db9b62a8..0987a9f5 100644 --- a/src/renderer/utils/lyric-font-player/line-player.js +++ b/src/renderer/utils/lyric-font-player/line-player.js @@ -11,11 +11,26 @@ const tagRegMap = { const timeoutTools = new TimeoutTools() +const parseExtendedLyric = (lrcLinesMap, extendedLyric) => { + const extendedLines = extendedLyric.split(/\r\n|\n|\r/) + for (let i = 0; i < extendedLines.length; i++) { + const line = extendedLines[i].trim() + let result = timeExp.exec(line) + if (result) { + const text = line.replace(timeExp, '').trim() + if (text) { + const timeStr = RegExp.$1.replace(/(\.\d\d)0$/, '$1') + const targetLine = lrcLinesMap[timeStr] + if (targetLine) targetLine.extendedLyrics.push(text) + } + } + } +} + module.exports = class LinePlayer { constructor({ offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) { this.tags = {} this.lines = null - this.translationLines = null this.onPlay = onPlay this.onSetLyric = onSetLyric this.isPlay = false @@ -28,7 +43,7 @@ module.exports = class LinePlayer { _init() { if (this.lyric == null) this.lyric = '' - if (this.translationLyric == null) this.translationLyric = '' + if (this.extendedLyrics == null) this.extendedLyrics = [] this._initTag() this._initLines() this.onSetLyric(this.lines, this.tags.offset + this.offset) @@ -50,17 +65,15 @@ module.exports = class LinePlayer { _initLines() { this.lines = [] - this.translationLines = [] const lines = this.lyric.split(/\r\n|\r|\n/) const linesMap = {} - // const translationLines = this.translationLyric.split('\n') for (let i = 0; i < lines.length; i++) { const line = lines[i].trim() let result = timeExp.exec(line) if (result) { const text = line.replace(timeExp, '').trim() if (text) { - const timeStr = RegExp.$1 + const timeStr = RegExp.$1.replace(/(\.\d\d)0$/, '$1') const timeArr = timeStr.split(':') if (timeArr.length < 3) timeArr.unshift(0) if (timeArr[2].indexOf('.') > -1) { @@ -70,24 +83,13 @@ module.exports = class LinePlayer { linesMap[timeStr] = { time: parseInt(timeArr[0]) * 60 * 60 * 1000 + parseInt(timeArr[1]) * 60 * 1000 + parseInt(timeArr[2]) * 1000 + parseInt(timeArr[3] || 0), text, + extendedLyrics: [], } } } } - const translationLines = this.translationLyric.split('\n') - for (let i = 0; i < translationLines.length; i++) { - const line = translationLines[i].trim() - let result = timeExp.exec(line) - if (result) { - const text = line.replace(timeExp, '').trim() - if (text) { - const timeStr = RegExp.$1 - const targetLine = linesMap[timeStr] - if (targetLine) targetLine.translation = text - } - } - } + for (const lrc of this.extendedLyrics) parseExtendedLyric(linesMap, lrc) this.lines = Object.values(linesMap) this.lines.sort((a, b) => { return a.time - b.time @@ -172,11 +174,11 @@ module.exports = class LinePlayer { } } - setLyric(lyric, translationLyric) { - // console.log(translationLyric) + setLyric(lyric, extendedLyrics) { + // console.log(extendedLyrics) if (this.isPlay) this.pause() this.lyric = lyric - this.translationLyric = translationLyric + this.extendedLyrics = extendedLyrics this._init() } } diff --git a/src/renderer/utils/lyric-font-player/utils.js b/src/renderer/utils/lyric-font-player/utils.js index 10ebd473..439431fb 100644 --- a/src/renderer/utils/lyric-font-player/utils.js +++ b/src/renderer/utils/lyric-font-player/utils.js @@ -2,12 +2,12 @@ const getNow = exports.getNow = typeof performance == 'object' && window.performance.now ? window.performance.now.bind(window.performance) : Date.now.bind(Date) exports.TimeoutTools = class TimeoutTools { - constructor() { + constructor(thresholdTime = 200) { this.invokeTime = 0 this.animationFrameId = null this.timeoutId = null this.callback = null - this.thresholdTime = 200 + this.thresholdTime = thresholdTime } run() { diff --git a/src/renderer/utils/music/wy/lyric.js b/src/renderer/utils/music/wy/lyric.js index efdc3f09..83ce416f 100644 --- a/src/renderer/utils/music/wy/lyric.js +++ b/src/renderer/utils/music/wy/lyric.js @@ -34,26 +34,30 @@ import { linuxapi } from './utils/crypto' // return lxlyric.trim() // } +// https://github.com/Binaryify/NeteaseCloudMusicApi/pull/1523/files export default songmid => { const requestObj = httpFetch('https://music.163.com/api/linux/forward', { method: 'post', 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36', form: linuxapi({ method: 'POST', - url: 'https://music.163.com/api/song/lyric', + url: 'https://music.163.com/api/song/lyric?_nmclfl=1', params: { id: songmid, - lv: -1, - kv: -1, tv: -1, + lv: -1, + rv: -1, + kv: -1, }, }), }) requestObj.promise = requestObj.promise.then(({ body }) => { if (body.code !== 200 || !body?.lrc?.lyric) return Promise.reject(new Error('Get lyric failed')) + // console.log(body) return { lyric: body.lrc.lyric, tlyric: body.tlyric?.lyric ?? '', + rlyric: body.romalrc?.lyric ?? '', // lxlyric: parseLyric(body.klyric.lyric), } }) diff --git a/src/renderer/views/setting/components/SettingPlay.vue b/src/renderer/views/setting/components/SettingPlay.vue index 1f6cddb6..93ab700f 100644 --- a/src/renderer/views/setting/components/SettingPlay.vue +++ b/src/renderer/views/setting/components/SettingPlay.vue @@ -5,6 +5,8 @@ dd base-checkbox(id="setting_player_save_play_time" v-model="currentStting.player.isSavePlayTime" :label="$t('setting__play_save_play_time')") .gap-top base-checkbox(id="setting_player_lyric_transition" v-model="currentStting.player.isShowLyricTranslation" :label="$t('setting__play_lyric_transition')") + .gap-top + base-checkbox(id="setting_player_lyric_roma" v-model="currentStting.player.isShowLyricRoma" :label="$t('setting__play_lyric_roma')") .gap-top base-checkbox(id="setting_player_auto_skip_on_error" v-model="currentStting.player.autoSkipOnError" :label="$t('setting__play_auto_skip_on_error')") .gap-top diff --git a/src/renderer/views/setting/setting.js b/src/renderer/views/setting/setting.js index 03e0361f..a6ed1489 100644 --- a/src/renderer/views/setting/setting.js +++ b/src/renderer/views/setting/setting.js @@ -10,6 +10,7 @@ export const currentStting = ref({ mediaDeviceId: 'default', isMediaDeviceRemovedStopPlay: false, isShowLyricTranslation: false, + isShowLyricRoma: false, isS2t: false, // 是否将歌词从简体转换为繁体 isPlayLxlrc: true, isSavePlayTime: false,