felixhao28 / react-jianpu

A numbered music notation renderer (a.k.a JianPu 简谱)
https://felixhao28.github.io/react-jianpu/
68 stars 32 forks source link

怎样输入新的乐谱? #1

Closed chubbyerror closed 7 years ago

chubbyerror commented 8 years ago

我修改index.js中的简谱部分,修改音符没什么问题,修改音符长度标志就没有参考了。

felixhao28 commented 7 years ago

@chubbyerror 不好意思我才看见。每个小节的长度是固定的,你是不是修改了一个音符的长度忘记调整小节内其他音符了?

chubbyerror commented 7 years ago

修改长度也是无效。 在您给出的例子中并没有8分音符更短的分时音符,不知道您这个简谱是否能有更短的音符输入方式。 另外一套简谱输js中(https://github.com/jianpu/musje)十六分音符的线是在上方,位置错误。 我一直以为简谱Web显示要比五线谱简单的多,结果,简谱才是难度更高的,因为五线谱有很多直接可以用起来。

felixhao28 commented 7 years ago

啊我这个标记语言里是不支持全,2分,4分以外的音符的,但是库本身应该可以,我先自己试试看

felixhao28 commented 7 years ago

简谱毕竟不是一个世界通用的标记方式,所以开发相关工具的人少也是情有可原的。

chubbyerror commented 7 years ago

我明白啊,我一直以为简谱相对图像处理部分少,应该会有更多实例呢,结果很多事并不是想当然。 顺便说一下你的库已经支持8分音符了 1 是四分音符 1- 是二分衣服 1-- 是全音符

1
-

上面的这种是八分音符

简谱准确来说是由 音符音高、音符乐符、音符时分线组成的乐谱部分和乐谱下方的歌词部分两部分组成,其基本对其方式是以音符乐符为基本,音高符号由下至上,分时线由上至下对其。 我在github和google搜索中还没见到web完整正确显示简谱的例子。

felixhao28 commented 7 years ago

我刚刚更新了一个例子,里面有十六分音符和三十二分音符的例子。简谱似乎只能表示到32,不能更细。

https://felixhao28.github.io/react-jianpu/

除了默认的row your boat以外我又加了个susana

tonyfung99 commented 7 years ago

這個markup 和musje 的不同呀

felixhao28 commented 7 years ago

@tonyfung99 我这个markup language是自己拍脑袋想出来的,他那个估计也是。世界上并没有什么公认的简谱标记语言。

felixhao28 commented 7 years ago

但实际上你并不需要什么标记语言,渲染的接口很简单:

<Jianpu
    song={song}
    sectionsPerLine={4}
    alignSections={true}
    highlight={highlightedNote}
/>

song 是一个note的数组,highlightedNote也是一个note。每一个note大概长这样:

{
  "pitch": {
    "base": 60, // 音高,60表示do,每一个数字表示一个半音,比如61表示升do
    "accidental": 0 // 升降音符号。从-2到2分别是:双降号,降号,无,升号,双升号
  },
  "duration": 12, // 8表示四分音符,12=8+4那就是四分音符带个点
  "options": {}, // 目前只有slur这个选项,值可以是"start"或者"end",表示滑音的开始和结束
  "lyrics": {
    "exists": true, // true表示存在歌词
    "content": "Row, ", // 歌词内容
    "hyphen": false // 是否加连字符
  }
}
tonyfung99 commented 7 years ago

@felixhao28 十分感謝。在想有沒有可能一起作一個統一的...

(其實我是iOS Dev,在參考其他人設計的簡譜format 。)

所以markup 最後都是parse 作json 在作render 吧?

我之前的簡譜app : https://itunes.apple.com/hk/app/apas-jian-pu/id970544753?l=zh&mt=8

由於我沒有太多音樂的background 感覺設計出來的format 不好用


{
  "score-header": {
    "page-setting": {
      "page-height": 1200,
      "page-width": 800,
      "page-margins": {
        "left-margin": 56,
        "right-margin": 56,
        "top-margin": 56.6893,
        "bottom-margin": 113.379
      },
      "page-bar-per-row":8,
      "page-number-of-row":10
    },
    "score-title": "浮跨",
    "score-artist": "陳奕迅",
    "score-author": "Tony Fung",
    "time-signature-note-number":4,
    "time-signature-note-value":4, 
    "key-signature":"C Major"
  },
  "score-body": {
     "notes":
[
     {
        "step":"6",
        "beats":4,
        "octave":1,
        "tie":1,
        "lyric":"你"
     },
     {
        "step":".",
        "beats":8,
        "octave":0,
        "tie":2,
        "lyric":""
     },
     {
        "step":"6",
        "beats":4,
        "octave":-1,
        "tie":2,
        "lyric":"當"
     }, 
     {
        "step":".",
        "beats":8,
        "octave":0,
        "tie":3,
        "lyric":""
     }, 
     {
        "step":"1",
        "beats":8,
        "octave":0,
        "tie":0,
        "lyric":""
     }, 
     {
        "step":".",
        "beats":8,
        "octave":0,
        "tie":0,
        "lyric":""
     }
],
"harmony":[

{
   "chord":"Dm",
   "page":1,
   "line":2,
   "x-position":25.5
},
{
   "chord":"Em",
   "page":1,
   "line":4,
   "x-position":50
}

]

  }
}
felixhao28 commented 7 years ago

在想有沒有可能一起作一個統一的...

我没什么精力做这件事情。这需要一个在音乐程序化方面有一定话语权的人或组织来推动。既然你有一个公司做这类app,那么你就可以来制作和推动这个标准。

所以markup 最後都是parse 作json 在作render 吧?

我想尽可能把这个项目做得模块化一些,所以没有加入title,artist,author这样的信息,而只是保留了绘画简谱必要的音符和歌词信息。你可以对比一下这个简谱的教程数数漏掉的信息。

chubbyerror commented 7 years ago

看了一下确实没有32分音符之后的简谱规范,而且一般来说简谱也仅见一些国家的初级音乐教育机构,高级音乐教育都会使用五线谱。这个可能需要找教育机关问询了。 不过为你提供的新的例子表示感谢!