五线谱练习应用开发笔记 1——需求以及技术选型

最近写博客实在没啥动力，感觉不到必要性。最近考虑捡起吉他时，突然意识到我需要去学习识别五线谱中各音位置，音程，各种调号等，而开源的应用非常少，难以找到符合我需求的，于是就考虑自己去编写相关应用以满足我练习的需要。

需求

于是首先需要确定需求：

1. 识别各个调下各个位置上的音名（虽然我的需求仅限于 G 谱号，但考虑到某种通用性，也要能够涉及到其它谱号）
2. 识别各个调下两个音之间的音程
3. 识别各个调下的和弦
4. 识别调号
5. 识别特定调号（大小调）下各个位置的唱名
6. ……一些相关吉他的需求，但这个之后再说
7. 对上述的各种功能，需要对任何作答都做出记录以在之后进行统计

这些需求都是根据符号去获取其意义，也可能有与其相反的需求，比如根据音名，和弦名去在五线谱上标识出来，这要求需要学习（开发）对五线谱的交互，会更复杂一些。

拍号，以及时值，重复记号等符号先暂且不涉及，这些东西更适合使用 ear master 去学习。上述的内容都能够熟练后，我也能更加轻松地去使用 ear master，可以说这是预科了。

每个需求都单独分个模块是合理的，而它们都需要去先能够渲染五线谱以及音符，该功能需要首先去实现（这个使用外部框架，对相关乐理的抽象也需要围绕该框架）。

技术选型

该项目显然并不需要后端，因此是纯前端项目，其中语言 typescript，框架仍使用 react（香！），但具体使用什么 ui 框架，抑或是不使用任何 ui 框架还不确定，我还是有点想要自己大展拳脚一番的，如果不使用 ui 框架的话，一定要去使用 styled-component。

至于五线谱的渲染，使用 vexflow，它的效果看起来还不错，但使用似乎比较复杂，需要专门去学习，至少把我的需求需要使用的部分都涉及到。

关于乐理库，本打算自己去实现，但发现要考虑的东西很多，没有那种精力（和能力！当前我的乐理知识也是半斤八两，虽然实现当前所需的功能还是绰绰有余就是了），考虑使用现成的库，当前考虑使用 tonal。

一个需要注意的地方是，这个框架整体是命令式的，需要将其抽象为声明式的React组件，这可能需要弄点底层的玩意了。

于是，第一步是很明显的，先去学习vexflow，将其封装成为react组件（只需能够展示一行，或者一个小节五线谱即可），并为相关乐理建模，这之后才能正式开始。

fight！一切哲学家都用自己的方式去解释世界，而问题在于改变世界。