lrc-maker
lrc-maker copied to clipboard
Published
20 hours ago •
magic-akari
magic-akari
Roadmap
本仓库作为我探索前端开发的一个重要实验场。同时具有实用性，至少我自己是这个工具的长期用户。
在此之前，已经验证了接近无脚手架的开发环境。
本仓库中，React 作为全局依赖，且几乎没有第三方依赖，这是为了规避 ESM 的路径解析问题。
时至今日，import-map 作为一个可能的解。但是总体来说这个困境没什么变化。
在此之后，此仓库将会用于探索工具链的使用。
- 此仓库中有部分依赖 TS 独有的特性，会造成迁移困难，如 const enum。会逐渐移除这些特性，并开启 isolatedModules 选项。
- 使用 vite (待定)等现代化工具改善开发体验。makefile 等脚本将会被移除，Dockerfile 也没有继续保留的意义。
- 引入 SWC 作为编译器。可能使用 Rollup/Webpack 叠加 SWC 的 loader 来打包，或者 swcpack 来打包，也可能继续保留 native ESM 状态。web bundle 需要调查一下。
- 代码内部涉及到具体细节的部分，有些比较 hack 的，会替换成常规写法。
- 曾经考虑自己写渲染引擎，把 React 替换下来。但是目前来看这个目标实现难度很大。
技术之外，产品细节
- 通过分析音频数据，自动在打轴的时候吸附音量突变的地方。
难度较大，可能需要先傅立叶变换来去除乐器音，留下人声，然后再设置阈值检测突变。
- drop 一些旧浏览器，如 Edge，旧版本 Safari
- lrc-parser.js 借助 TS 的 references 功能，把整个目录映射到产物，非常 hacky
- 考虑 pnpm 的 monorepo
- 有部分 const enum 被定义在全局类型空间，但是被当作值使用，在 tsc 编译时会被替换成常量。这导致和 tsc 的深度绑定，其他工具无法处理
- 换成普通的 const 变量，其他的元信息写到 html 文件里
- html 文件是通过 renderToStaticMarkup 生成的，且有复杂的 SRI 计算过程。这部分应该能简化
- vite 或许能解决。或者最简单的，两个 html，一个用于开发，另一个用于部署
* 通过分析音频数据，自动在打轴的时候吸附音量突变的地方。难度较大，可能需要先傅立叶变换来去除乐器音，留下人声，然后再设置阈值检测突变。
这个难度不是一般大，建议直接放弃在网页前端搞定它的“幻想” 光是第一步“可能需要先傅立叶变换来去除乐器音，留下人声”，就有极其巨大的工作量，g站上有些项目（含训练模型）有几个G的容量 见这个项目 https://github.com/Anjok07/ultimatevocalremovergui
就是搞前端的话考虑把布局优化一下 👍
下一步：
- svg 优化: https://www.npmjs.com/package/svg-sprite
- Lightning CSS https://lightningcss.dev/
有一些 SVG 被直接放到 React 树中，在 React Reconciliation 中造成了不必要的性能开销， 可以考虑 svg-sprite 技术，在 React 数中留下简单的 svg 引用，或 img src 引用。
postcss 只用到了有限的几个插件，可以被 Lightning CSS 覆盖。