news 2026/8/24 9:58:10

KaraokeEternal手机端点歌完全指南:曲库、队列、账户三大视图一次看懂

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
KaraokeEternal手机端点歌完全指南:曲库、队列、账户三大视图一次看懂

KaraokeEternal手机端点歌完全指南:曲库、队列、账户三大视图一次看懂

【免费下载链接】KaraokeEternalOpen karaoke party system项目地址: https://gitcode.com/gh_mirrors/ka/KaraokeEternal

KaraokeEternal 是一款可自托管的开源卡拉OK(Karaoke)派对系统,你的手机浏览器就是点歌台——曲库、队列、账户三大视图覆盖点歌全流程,无需安装任何 App,扫码即唱。本文带你快速看懂 KaraokeEternal 手机端点歌的每个界面和常用操作。

上图正是它的核心玩法:上方是手机浏览器的点歌界面,下方是桌面浏览器的全屏播放器,两者通过自托管服务器实时同步。

手机端点歌界面总览

打开 KaraokeEternal 的服务端地址,登录后你会看到底部导航栏的三个入口:

  • 曲库(Library):浏览和搜索歌曲,点一下就进队列
  • 队列(Queue):查看全场点歌顺序,支持插队、跳过等操作
  • 账户(Account):管理个人账号,管理员还能管理房间与用户

三个视图分别对应 src/routes/Library/、src/routes/Queue/、src/routes/Account/ 目录,底部导航由src/components/Navigation/Navigation.tsx渲染,为触屏操作深度优化(桌面端用鼠标拖拽模拟滑动手势)。

曲库视图:快速找到想唱的歌

曲库视图按艺人分组列出全部歌曲,顶部提供搜索和过滤功能:

核心操作很简单:

  1. 点按艺人展开歌单
  2. 再点按歌曲标题,即可加入点歌队列
  3. 发光高亮的歌曲表示即将演唱,方便把握节奏

长按或左滑歌曲还能看到更多选项:

操作说明
📄 获取信息查看歌曲底层媒体文件,并可设置首选版本(仅管理员)
⭐ 星标过滤顶栏可只看自己星标过的歌

💡 一首歌若有多个版本(媒体文件),标题后会出现斜体数字,系统默认使用媒体文件夹列表中优先级最高文件夹里的版本。

曲库界面实现见src/routes/Library/views/LibraryView.tsx,支持 MP3+G(带 CDG 歌词)和 MP4 视频两种格式。

队列视图:公平点歌的核心

队列视图展示你所在房间的已唱、正在唱和接下来要唱的歌曲:

KaraokeEternal 使用**轮转公平算法(round-robin)**自动管理队列,保证人人都有机会,而且不会惩罚后到的朋友——比如晚来的人排在下一位歌手之后就能立刻开唱。该算法实现在src/routes/Queue/selectors/getRoundRobinQueue.ts

左滑队列中的歌曲,会出现这些快捷操作:

操作说明
📄 获取信息查看媒体文件、设置首选版本(仅管理员)
⏭ 立即下一个把歌移到该用户下一首,不影响排队位置
🔄 再次点歌把唱过的歌重新加入队列
⟳ 重新开始从这首歌起重排队列(仅管理员)
⏩ 跳过跳过当前歌曲;长按同时移除该用户后续所有点歌
🗑 移除移除待唱歌曲;长按移除该用户全部点歌

管理员可以管理所有人的点歌,普通用户和访客只能管理自己的。队列服务端逻辑见server/Queue/Queue.ts

账户视图:管理房间、用户与偏好

账户视图让每位用户管理自己的账号,管理员则会看到更多管理面板:

房间管理(仅管理员)

KaraokeEternal 用"房间"按时间场次组织派对,每个房间有独立的点歌队列。建议每场派对新建一个房间、结束后设为关闭状态,而不是反复复用:

房间可配置:

  • 名称:多房间开放时,用户在登录时看到的房间名
  • 密码:可选,登录时需输入
  • 状态open(可登录、可点歌)或closed(不再接受登录和新点歌,房内成员可继续唱完现有队列)
  • 用户:默认仅已有账号的用户可加入,可选允许新用户或访客
  • 二维码:在播放器中显示,扫一下自动跳转到该房间

⚠️ 删除房间会同时删除其队列,本场的点歌历史将丢失。

用户与偏好设置(仅管理员)

  • 用户面板:创建、编辑、删除用户账号
  • 偏好设置
    • 媒体文件夹:添加含歌曲的文件夹并扫描入库,拖拽调整顺序即调整多版本优先级
    • ReplayGain(防削波):读取 ReplayGain 标签自动均衡歌曲音量,建议媒体已正确打标时开启

我的账号

所有用户都可以在此修改用户名、密码、显示名和头像,或退出登录。账户界面实现见src/routes/Account/views/AccountView.tsx

播放器视图:点歌闭环的最后一环

播放器其实就是 App 的一部分,但建议全屏运行在连接音响和显示器的设备上。以管理员身份登录房间后,顶部会出现播放器链接,点一下即可启动;也可手动访问/player路径:

房间里有播放器后,手机上就会出现播放和显示控制按钮(管理员和当前演唱者始终可见)。播放器支持 MP4 视频、CDG 歌词叠加和音乐同步的 WebGL 可视化效果。相关实现位于src/routes/Player/

🎯 小提示:在播放器内部(而非远程设备)首次启动播放,可避免浏览器的自动播放限制。

快速上手三步

  1. 部署服务器:在 Windows、Mac、树莓派或 NAS 上安装并运行 KaraokeEternal Server,数据全部存储在你自己的服务器上
  2. 建号 + 加曲库:首次访问创建管理员账号,然后在账户视图的偏好设置中添加媒体文件夹,等待扫描完成
  3. 启动播放器开唱:点 Start Player 启动全屏播放,朋友们扫码进房,在曲库视图点歌即可 🎤

KaraokeEternal 完全自托管、无广告、无遥测,曲库、队列、账户三大视图加上全屏播放器,一套系统就能撑起一场体面的 KTV 派对。

【免费下载链接】KaraokeEternalOpen karaoke party system项目地址: https://gitcode.com/gh_mirrors/ka/KaraokeEternal

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/24 9:57:11

本地部署离线翻译服务:MTranServer 50ms 实战指南

本地部署离线翻译服务:MTranServer 50ms 实战指南 【免费下载链接】MTranServer Offline translation model server with low resource consumption, fast speed, and private deployment capability. 低资源占用速度快可私有部署的离线翻译模型服务器 项目地址: …

作者头像 李华
网站建设 2026/8/24 9:55:12

SAP第二代增强:从函数模块到可配置架构的演进与实践

1. 项目缘起:从“打补丁”到“搭积木”的演进在ERP这类大型企业应用软件的定制化开发中,我们经常会遇到一个经典难题:标准功能无法完全满足某个特定客户的独特业务流程。十多年前,当我第一次接触SAP系统时,面对这种需求…

作者头像 李华
网站建设 2026/8/24 9:54:27

LeetCode面试经典150题高效刷题指南与实战技巧

1. LeetCode面试经典150题的价值与定位在程序员求职的竞技场上,LeetCode就像一把双刃剑——用得好能劈开大厂offer的大门,用不好反而会陷入无效刷题的泥潭。我花了三个月时间系统攻克这150道高频面试题,最大的收获不是刷题数量,而…

作者头像 李华
网站建设 2026/8/24 9:51:19

泛素化修饰:如何精准调控蛋白质命运与细胞信号网络?

简述: 泛素化作为一种动态、可逆的蛋白质翻译后修饰,通过E1-E2-E3级联酶促反应将泛素分子共价连接至底物蛋白,调控蛋白质降解、信号转导、DNA修复及免疫应答等关键生命过程。泛素链的连接多样性(同型/异型、直链/分支)…

作者头像 李华
网站建设 2026/8/24 9:48:08

DriftScript:为非公理推理智能体设计的高级编程语言

1. 项目概述:当智能体需要“思考”而非“计算”时如果你和我一样,在尝试构建能真正“理解”环境并做出“合理”决策的智能体时,被传统编程范式和通用编程语言(如Python、Java)的局限性折磨过,那么DriftScri…

作者头像 李华