企业官网建设流程全解析

any-listen歌词显示系统技术实现：从桌面歌词到状态栏歌词

【免费下载链接】any-listenA cross-platform private music playback service项目地址: https://gitcode.com/gh_mirrors/an/any-listen

any-listen是一款跨平台的私人音乐播放服务，其歌词显示系统为用户提供了丰富多样的歌词展示方式，包括桌面歌词、状态栏歌词以及标题栏歌词等。本文将深入探讨any-listen歌词显示系统的技术实现，带你了解从歌词获取到最终展示的完整流程。

歌词数据的获取与处理

any-listen的歌词数据获取主要通过getLyricInfo函数实现，该函数位于packages/web-server/src/app/modules/music/index.ts文件中。它支持从本地文件和在线资源两种途径获取歌词，并对获取到的歌词数据进行缓存和处理。

export const getLyricInfo = async ({ musicInfo, isRefresh, }): Promise<AnyListen.IPCMusic.MusicLyricInfo> => { // 尝试从本地获取歌词 const info = await getLocalLyric({ musicInfo, isRefresh, }) if (info) return info // 本地获取失败则从在线资源获取 return getOnlineLyric({ musicInfo, isRefresh }) }

获取到的歌词数据会经过buildLyricInfo函数处理，该函数位于packages/web-server/src/app/modules/music/shared.ts文件中，负责将原始歌词数据转换为统一的格式，以便后续的解析和展示。

歌词解析与播放同步

歌词的解析和播放同步功能主要由Lyric类实现，该类位于@any-listen/web/lyric-font-player模块中。在packages/view-main/src/modules/lyric/lyric.ts文件中，我们可以看到如何初始化和使用这个类：

import Lyric from '@any-listen/web/lyric-font-player' // 初始化歌词解析器 export const initLyric = () => { const lyric = new Lyric({ // 配置参数 }) // 监听歌词解析事件 lyric.on('loaded', (lines) => { // 处理解析后的歌词行 commit.setLyricLines(lines) }) return lyric }

歌词解析器会将歌词文本解析为带有时间戳的歌词行数组，然后通过lyricEvent事件系统通知UI层更新歌词显示。在packages/view-main/src/modules/lyric/store/event.ts文件中定义了歌词相关的事件：

export const lyricEvent = new Event() as EventType<Event>

多样化的歌词展示方式

桌面歌词

桌面歌词是any-listen最具特色的功能之一，它允许歌词窗口独立于主程序窗口显示，并且可以自由调整位置和大小。桌面歌词的实现主要在packages/view-main/src/modules/lyric/desktopLyric.ts文件中：

export const setLyric = (lyrics: { lrc: string | null; tlrc: string | null; rlrc: string | null; awlrc: string | null }) => { // 发送IPC消息创建或更新桌面歌词窗口 ipcRenderer.send('winMain', { action: 'set_lyric', data: lyrics, }) }

桌面歌词支持多种显示样式，用户可以根据自己的喜好进行自定义。any-listen提供了多种精美的主题背景，如中国风的山水背景：

状态栏歌词

状态栏歌词功能允许用户在系统状态栏或任务栏中显示当前播放的歌词，这对于希望保持桌面整洁的用户来说非常实用。状态栏歌词的实现位于packages/view-main/src/modules/lyric/titleLyric.ts文件中：

const setLyric = (lyric: string | null = lrc, force = false) => { if (lrc != lyric) lrc = lyric if (!enabled || lyric == null) return // 处理歌词文本，提取关键信息 let text = lyric .replace(/\[.*?\]/g, '') .replace(/\s+/g, ' ') .trim() // 更新状态栏歌词 lyricEvent.titleLyricChanged(text) }

播放详情页歌词

在播放详情页中，any-listen提供了带有动画效果的歌词展示，用户可以直观地看到当前播放进度对应的歌词。这部分功能的实现位于packages/view-main/src/components/layout/PlayDetail/RightLyric/useLyric.svelte.ts文件中，主要通过监听歌词行变化事件来实现歌词的滚动和高亮显示：

const unsub2 = lyricEvent.on('lineChanged', (text, line) => { // 更新当前歌词行的显示状态 oldLine = lyricState.line currentLine = line scrollToCurrentLine() })

歌词设置与个性化

any-listen提供了丰富的歌词设置选项，用户可以根据自己的需求进行个性化配置。这些设置项定义在packages/view-main/src/views/Setting/AppSetting/settings.ts文件中：

// 歌词相关设置 { name: 'settings.player.lyric_transition', // 歌词过渡动画设置 }, { name: 'settings.player.lyric_roma', // 罗马音歌词显示设置 }, { name: 'settings.player.title_lyric', // 标题栏歌词显示设置 }, { name: 'settings.player.status_bar_lyric', // 状态栏歌词显示设置 }

用户可以通过这些设置项调整歌词的显示方式、字体大小、颜色等，打造属于自己的个性化歌词体验。any-listen还支持歌词背景的自定义，用户可以选择自己喜欢的图片作为歌词背景，如下面这张青春风格的背景图：

总结

any-listen的歌词显示系统通过模块化的设计，实现了从歌词获取、解析、同步到多样化展示的完整流程。无论是桌面歌词、状态栏歌词还是播放详情页歌词，都体现了any-listen对用户体验的细致考量。通过灵活的配置选项和精美的主题设计，any-listen为用户提供了一个既实用又美观的歌词显示解决方案。

如果你对any-listen的歌词系统感兴趣，可以通过以下路径深入了解其实现细节：

• 歌词核心逻辑：packages/view-main/src/modules/lyric/
• 歌词设置界面：packages/view-main/src/views/Setting/AppSetting/
• 歌词渲染组件：packages/view-main/src/components/layout/PlayDetail/RightLyric/

希望本文能帮助你更好地理解any-listen歌词显示系统的技术实现，如果你有任何问题或建议，欢迎参与到项目的开发中来。

【免费下载链接】any-listenA cross-platform private music playback service项目地址: https://gitcode.com/gh_mirrors/an/any-listen