新增设置-播放设置-显示歌词罗马音

publish/changeLog.md

@@ -1,3 +1,7 @@
+### 新增
+
+- 新增设置-播放设置-显示歌词罗马音，默认关闭，注：目前只有网易源能获取到罗马音歌词，如果你知道其他源的歌词罗马音获取方式，欢迎PR！
+
 ### 优化
 
 - 同时删除一首歌以上时将需要二次确认删除

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,

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",

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": "定时暂停",

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": "定時暫停",

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) {

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,
   }
 })

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
     },

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 : '',
+        extendedLyrics,
-        // (this.isShowLyricTranslation && this.lyrics.tlyric ? (this.lyrics.tlyric + '\n') : '') + (this.lyrics.lyric || ''),
       )
     },
   },
@@ -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 {

src/renderer/components/core/PlayDetail/LyricPlayer.vue

@@ -27,8 +27,10 @@
     <div :class="[$style.lyricSelectContent, 'select', 'scroll', 'lyricSelectContent']" v-if="isShowLrcSelectContent" @contextmenu="handleCopySelectText">
       <div v-for="(info, index) in lyric.lines" :key="index" :class="[$style.lyricSelectline, { [$style.lrcActive]: lyric.line == index }]">
         <span>{{info.text}}</span>
-        <br v-if="info.translation"/>
+        <template v-for="(lrc, index) in info.extendedLyrics" :key="index">
-        <span :class="$style.lyricSelectlineTransition">{{info.translation}}</span>
+          <br />
+          <span :class="$style.lyricSelectlineExtended">{{lrc}}</span>
+        </template>
       </div>
     </div>
   </transition>
@@ -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 {

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,
       })

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,

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,

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])
+          : Promise.resolve([lyric, tlyric, rlyric, lxlyric])
-      ).then(([lyric, tlyric, 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,

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 }) => {
+          ).then(({ lyric, tlyric, rlyric, lxlyric }) => {
-            setLyric(musicInfo, { lyric, tlyric, lxlyric })
+            setLyric(musicInfo, { lyric, tlyric, rlyric, lxlyric })
-            return { lyric, tlyric, lxlyric }
+            return { lyric, tlyric, rlyric, lxlyric }
           }).catch(err => {
             console.log(err)
             return null

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 })
+      commit('setLrc', { musicInfo, lyric, tlyric, rlyric, lxlyric })
-      return buildLyricInfo({ lyric, tlyric, lxlyric }, musicInfo)
+      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,
     })
   },

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}`)
 

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.timeoutTools = new TimeoutTools(80)
-    this.waitPlayTimeout = new TimeoutTools()
+    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) {
+    for (const lrc of this.extendedLyrics) {
-      this.translationContent = document.createElement('div')
+      const extendedLrcContent = document.createElement('div')
-      this.translationContent.style = 'position:relative;display:inline-block;'
+      extendedLrcContent.style = 'position:relative;display:inline-block;'
-      this.translationContent.className = this.translationClassName
+      extendedLrcContent.className = this.extendedLrcClassName
-      this.translationContent.textContent = this.translationLyric
+      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')
+        const extendedLrcShadowContent = document.createElement('div')
-        this.translationShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;'
+        extendedLrcShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;'
-        this.translationShadowContent.className = this.shadowClassName
+        extendedLrcShadowContent.className = this.shadowClassName
-        this.translationShadowContent.textContent = this.translationLyric
+        extendedLrcShadowContent.textContent = lrc
-        this.translationContent.appendChild(this.translationShadowContent)
+        extendedLrcContent.appendChild(extendedLrcShadowContent)
       }
     }
     this._parseLyric()

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()
   }
 }

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 (const lrc of this.extendedLyrics) parseExtendedLyric(linesMap, lrc)
-    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
-        }
-      }
-    }
     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) {
+  setLyric(lyric, extendedLyrics) {
-    // console.log(translationLyric)
+    // console.log(extendedLyrics)
     if (this.isPlay) this.pause()
     this.lyric = lyric
-    this.translationLyric = translationLyric
+    this.extendedLyrics = extendedLyrics
     this._init()
   }
 }

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() {

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),
     }
   })

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

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,