這個項目其實是去年期末考復(fù)習(xí)的時候?qū)懙?，因為實在不想?fù)習(xí)所以無聊參照 有譜么 用 React 寫的一個在線吉他譜編輯器。我還將項目里的和弦組件和歌詞組件提取出來放在 npm 上。

Github 在這里

當(dāng)時就覺得這個網(wǎng)站很不錯，玩過吉他的人都知道每次搜吉他譜的時候總會出現(xiàn)譜子要么是 JPG，要么是 PNG，字體大小不樣的問題。雖然問題不是很大，但是就是很難看，而這個網(wǎng)站完美解決了這個問題。

它的渲染吉他譜的思路其實和 Markdown 以及 LaTex 有點像的。不過我寫的在線編輯器可能性能比不上他的，因為每次修改都會重新渲染組件。如果要改進(jìn)這個方面可能還得看看編譯原理才能知道在哪些地方可以提高性能。

和弦組件

Github 在這里

這個和弦組件是用 React 渲染 SVG 來完成的。我稍微看了下“有譜么”的實現(xiàn)，可能他的更人性化一些，而我的可以高度定制。比如可以自定義和弦。

<Chord chordName="F"/>

歌詞組件

Github 在這里

歌詞組件只不過是對和弦組件的再次封裝，只要將和弦組件做個定位就好了，

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

最后

最近想回顧一下這個項目，本來想試試能不能寫一個 Webpack Loader 將文字渲染成 HTML 或者 SVG（也就是右邊的樣式），也算是一個鍛煉吧。