我写了一个完全在浏览器里运行的 LRC 歌词编辑器

做它的原因很简单:我想有一个干净、本地、不用安装、也不用上传任何东西的歌词工具。市面上很多歌词编辑器要么需要下载安装,要么要把音频传到服务器,我都不太喜欢。于是干脆自己写一个。

在线地址是:https://lrc.ichochy.com

截图

它能做什么?

  • 直接在浏览器里打开,导入本地音频(MP3、WAV、FLAC、M4A、OGG 等),马上就能看到波形图。
  • 歌词以时间轴上的“块”的形式呈现,你可以直接拖动来微调时间戳,精度自动吸附到 0.01 秒。
  • 双击就能改文字,点击空白处可以跳转播放位置。
  • 播放时当前歌词会高亮,轨道会自动滚动跟随。
  • 支持导入和导出标准 LRC 文件,元数据(标题、艺术家、专辑等)也可以一起编辑。
  • 最重要的是:所有数据都只在你本地处理,不会上传到任何服务器。

界面我做成了近黑底 + 珊瑚橙的配色,会自动跟随系统深色/浅色主题,手机和电脑都能用。

术上我怎么实现的

整个项目是纯静态的,没有后端、没有数据库。

用了原生 HTML + CSS + JavaScript(ES Module),波形和播放控制用了 WaveSurfer.js(我把它本地内置了,不依赖 CDN)。音频参数是直接从文件头解析的,尽量保证采样率、码率这些信息准确。

代码已经开源放在 GitHub:

怎么用?

  1. 打开 https://lrc.ichochy.com
  2. 导入你的音频文件
  3. 导入已有 LRC,或者直接从空白开始做
  4. 边听边拖、边改
  5. 导出就行

不需要注册,不需要登录,打开就能用。

1 个赞

这种阶梯式分布歌词的形式,实际使用体验其实不怎么好。我要看完整的歌词,不仅需要水平拖滚动条,还需要垂直调整。

而且前奏较长的时候,还会出现很大面积的空白。

这种操作方式也不是很舒服。鼠标拖动的不确性比较大(可能与 DPI 设置或硬件自身的特性有关),而且拖一个滑块来回对轴也是很疲惫的。

最好还是千千静听那种,按某一快捷键或按钮,自动为当前行歌词添加时间标签,然后将焦点放到下一行。

建议参考一下歌词滚动姬,那边的交互做得就不错。

1 个赞

感谢使用,我的主要场景是调整时间戳,按空格暂停,点击每句歌词,然后左右拖动对其波谱,来确定时间戳的位置。

lrc先用ai生成,然后同时导入到系统。

预览波谱时,可视化左右拖动歌词,精确的来调整时间戳。

自动回中一直跳动,体验感不太好,后期看能不能调整一下。

阶梯设计为了完整的展示每条歌词,这样能直观的对应,需要上下、左右来回的调整,确实有点繁琐。

正常那样垂直排列不是更直观吗?

我是为了和音频波谱对齐,方便通过波谱图形来定位时间戳,左右拖动对齐波谱就能快速定位时间戳。

AI 生成的LRC,时间戳有错误,不是很准确,有的有错位。同时导入,查看波谱的波峰波谷就可发现时间戳的准确性,然后左右拖动快速的调整时间戳。不必要从头听到尾,一个一个的打断点。

我似乎明白您的意思了,您的工具是调整 LRC,而非制作 LRC、手动打轴的,那歌词滚动姬和千千静听那种交互确实不适合您。

可否这样:波谱垂直放置,这样每句歌词只在波谱上占据一个字符的高度,比较紧凑。

竖着排版这个很不错,支持点赞!!! :grin:
我怎么没有想到,思维太局限了,想着裁剪视屏,左右拖动了………………
等下要deepseek改一版看看

1 个赞

已经重构改为纵向了,有时间看看。

横排好还是竖排好………

我倒是很好奇ai做出来的lrc基本不能用吧……如果要自己后续调整可能一开始自己听的时候按按空格就做好了。(网易云音乐网页版的右边有一个【补充或修改歌曲资料】,可以自己做歌词,甚至一键可以上传,那个其实挺好用的,不需要自己准备音频)

AI生成字幕,时间戳不太准,有些需要编辑下。

可以做一些听力资料的字幕

形式上不错,可是密度有点太低了,一个屏幕才显示 10 s 的音频。

建议加个自由缩放功能,允许用户自定义单位时间需要用多大的画面显示。

我个人倾向于竖排,原因前面已经讲过了。

其实……对照频谱调整歌词,会不会是个伪需求?歌曲一般都有伴奏,人声部分和伴奏部分混在一起,其实从频谱上看不出什么东西。

这种听力材料应该更适合。这种材料一般没有伴奏,无人声的地方就是直线,很好区分。

可能需要重新考虑一下软件的定位。

看来是的,听你一说还真是这样,看来太局限了,只有自己用到,自娱自乐,哈哈……

其实……对照频谱调整歌词,会不会是个伪需求?歌曲一般都有伴奏,人声部分和伴奏部分混在一起,其实从频谱上看不出什么东西。

可以先用AI分轨工具比如Ultimate Vocal Remover

也是个办法,不过有些挨得比较近的唱词之间,频谱上的区分可能并不清晰。

另外,如果需要引用别人的话,可以先选中要引用的内容,再点击浮动工具栏中的 “引用” 按钮:

这是规范的引用方法。如此操作,引用块左上角会显示被引用人,右上角会显示 “展开” 和 “转到引用的帖子” 按钮。

1 个赞