抄了个在线吉他谱编辑器

[Haixiang]

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

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

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

和弦组件

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

<Chord chordName="F"/>

歌词组件

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

<Lyrics isEmbedChord={true}>
    [F] Good morning!
</Lyrics>

最后

最近想回顾一下这个项目，想试试能再多加一些功能什么的。

[cnzfq]

赞赞赞，很实用的工具，同样是吉他爱好者

[shiny]

记得有谱么的作者也在 V2EX 上

[davidqw]

Cool

[wjm2038]

正文里咋没看到链接啊。。。帮你补一下 https://haixiang6123.github.io/guitar-editor/#/

[murmur]

搜吉他谱难看是因为他们是故意这么做的 或者都是盗来的资源
如果你用了弹吧 APP 就知道了真正的排版实力了
不如做点差异化开发 比如移调后的指法和和弦变换

[Ionian]

这是用什么语言写的啊

[hlwjia]

@Ionian 到底有没有看内容。。。

[hlwjia]

赞楼主！同吉他爱好者

[Haixiang]

@shiny 这就尴尬了

[MikeV2EX]

cool

[Haixiang]

有谱么这个网站挺不错的，当时也看到也是眼前一亮，正好也学了 React 就把组件写下来了...

[Haixiang]

@murmur 可以的, Idea 不错

[Ionian]

@hlwjia 抱歉....很不错的东西！收藏了

[freak118]

借楼问一下 songsterr 这种在线播放谱子的是怎么做到的啊 有现成的库吗

[jaynie]

非常棒！吉他 Girl 感激不尽

[snail1126]

虽然学了很多年也没学会，但还是支持。