抄了个在线吉他谱编辑器

这个项目其实是去年期末考复习的时候写的，因为实在不想复习所以无聊参照 有谱么 用 React 写的一个在线吉他谱编辑器。我还将项目里的和弦组件和歌词组件提取出来放在 npm 上。

Github 在这里

当时就觉得这个网站很不错，玩过吉他的人都知道每次搜吉他谱的时候总会出现谱子要么是 JPG，要么是 PNG，字体大小不样的问题。虽然问题不是很大，但是就是很难看，而这个网站完美解决了这个问题。

它的渲染吉他谱的思路其实和 Markdown 以及 LaTex 有点像的。不过我写的在线编辑器可能性能比不上他的，因为每次修改都会重新渲染组件。如果要改进这个方面可能还得看看编译原理才能知道在哪些地方可以提高性能。

和弦组件

Github 在这里

这个和弦组件是用 React 渲染 SVG 来完成的。我稍微看了下“有谱么”的实现，可能他的更人性化一些，而我的可以高度定制。比如可以自定义和弦。

<Chord chordName="F"/>
复制代码

歌词组件

Github 在这里

歌词组件只不过是对和弦组件的再次封装，只要将和弦组件做个定位就好了，

<Lyrics isEmbedChord={true}>
    [F] Good morning!
</Lyrics>
复制代码

最后

最近想回顾一下这个项目，本来想试试能不能写一个 Webpack Loader 将文字渲染成 HTML 或者 SVG（也就是右边的样式），也算是一个锻炼吧。

转载于:https://juejin.im/post/5c7ca046e51d457cd40503c6