V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Haixiang
V2EX  ›  分享发现

抄了个在线吉他谱编辑器

  •  1
     
  •   Haixiang · 2019-03-04 03:06:52 +08:00 · 4020 次点击
    这是一个创建于 2088 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    和弦组件

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

    <Chord chordName="F"/>
    

    歌词组件

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

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

    最后

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

    16 条回复    2019-03-04 15:13:50 +08:00
    cnzfq
        1
    cnzfq  
       2019-03-04 03:12:57 +08:00 via iPhone
    赞赞赞,很实用的工具,同样是吉他爱好者
    shiny
        2
    shiny  
       2019-03-04 03:14:49 +08:00
    记得有谱么的作者也在 V2EX 上
    davidqw
        3
    davidqw  
       2019-03-04 03:24:47 +08:00
    Cool
    wjm2038
        4
    wjm2038  
       2019-03-04 04:08:44 +08:00
    正文里咋没看到链接啊。。。帮你补一下 https://haixiang6123.github.io/guitar-editor/#/
    murmur
        5
    murmur  
       2019-03-04 08:21:15 +08:00
    搜吉他谱难看是因为他们是故意这么做的 或者都是盗来的资源
    如果你用了弹吧 APP 就知道了真正的排版实力了
    不如做点差异化开发 比如移调后的指法和和弦变换
    Ionian
        6
    Ionian  
       2019-03-04 09:43:00 +08:00 via iPhone
    这是用什么语言写的啊
    hlwjia
        7
    hlwjia  
       2019-03-04 09:52:43 +08:00 via iPhone
    @Ionian 到底有没有看内容。。。
    hlwjia
        8
    hlwjia  
       2019-03-04 09:53:11 +08:00 via iPhone
    赞楼主!同吉他爱好者
    Haixiang
        9
    Haixiang  
    OP
       2019-03-04 11:42:48 +08:00
    @shiny 这就尴尬了
    MikeV2EX
        10
    MikeV2EX  
       2019-03-04 11:54:22 +08:00
    cool
    Haixiang
        11
    Haixiang  
    OP
       2019-03-04 11:58:29 +08:00
    有谱么这个网站挺不错的,当时也看到也是眼前一亮,正好也学了 React 就把组件写下来了...
    Haixiang
        12
    Haixiang  
    OP
       2019-03-04 12:10:13 +08:00
    @murmur 可以的, Idea 不错
    Ionian
        13
    Ionian  
       2019-03-04 13:38:32 +08:00 via iPhone
    @hlwjia 抱歉....很不错的东西!收藏了
    freak118
        14
    freak118  
       2019-03-04 13:48:54 +08:00
    借楼问一下 songsterr 这种在线播放谱子的是怎么做到的啊 有现成的库吗
    jaynie
        15
    jaynie  
       2019-03-04 13:58:51 +08:00
    非常棒!吉他 Girl 感激不尽
    snail1126
        16
    snail1126  
       2019-03-04 15:13:50 +08:00 via Android
    虽然学了很多年也没学会,但还是支持。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1039 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:26 · PVG 06:26 · LAX 14:26 · JFK 17:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.