compoze/demo/html/helper.jade

music writer

doctype
html(lang="zh-CN")
  head
    meta(charset="utf-8")
    title compoze - 在线乐谱编辑与播放
    meta(name="viewport",content="width=device-width, initial-scale=1")
    link(rel="stylesheet",href="../style/base.css")
    link(rel="stylesheet",href="../style/font.css")
    script(src="../../dist/compoze.js")

    style.
      div.vex-tabdiv {
        font-family: Arial, sans-serif;
        font-size: 18px;
        color: #554;
        white-space: pre;
      }

      div.vex-tabdiv .editor {
        outline: none;
        background: #f0f4f4;
        border: 0 solid;
        border-left: 6px solid #ccc;
        font-family: "Lucida Console", Monaco, monospace;
        font-size: 12px;
      }

      div.vex-tabdiv .editor-error .text {
        font-family: "Lucida Console", Monaco, monospace;
        font-size: 12px;
        color: red;
        padding: 3px;
      }

      div.vex-tabdiv .title {
        font-family: Arial, sans-serif;
        font-size: 18px;
        padding: 10px;
        color: #554;
      }
  body
    div(style="width:980px;margin:60px auto;")
      a(href="/")
        div.logo.icon 

      h2 关于compoze
      p compoze 是一种乐谱编写语言, 通过文本符号在线编写出可播放的五线谱和吉他谱.

      h2 乐谱
      p 使用 'tabstave' 关键字创建一个空白的乐谱
      p 'tabstave' 还可以附带参数. 比如 'tabstave notation=true' 渲染一个标准的六线谱
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true

      h2 乐谱参数
      p.
        示例
        tabstave notation=true 默认包含六线谱和五线谱
        tabstave notation=true tablature=false 只画六线谱
        tabstave notation=true clef=alto 使用低音部
      p 详细参数
      pre.code.
        keyword values
        notation  true/false
        tablature true/false
        clef  treble, alto, tenor, bass, percussion
        key C, Am, F, Dm, Bb, Gm, Eb, Cm, Ab, Fm, Db, Bbm, Gb, Ebm, Cb, Abm, G, Em, D, Bm, A, F#m, E, C#m, B, G#m, F#, D#m, C#, A#m
        time  C, C|, #/#
        tuning  standard, dropd, eb, E/5,B/4,G/4,D/4,A/3,E/3
        tab-stem-direction up, down
        tab-stem true/false
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true clef=bass key=Ab time=C|
          notes 4-5/6

      h2 添加音符
      p 使用 'notes' 关键字来添加音符. 每一个音符的表达格式通常使用 `音高/音阶` 表示六线谱 或者 `品数/弦数` 五线谱.
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true tablature=false
          notes Cn-D-E/4 F#/5

      p 吉他谱的表示方式
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true
          notes 4-5-6/3 10/4


      h2 休止符和小节线
      p 休止符使用 '##' 两个井号表示. 休止符会自动调整高度, 也可以在中间输入0~9数字来调整高度,如: '#0#'
      p 破折号 '|' 代表小节线,用来划分每个节拍单位, 当然, 一般乐谱中的小节线会有很多种.
      pre.
        =|| 双节线
        =|: 重复开始
        =:| 重复结束
        =:: 两头重复
        =|= 结束线
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true tablature=false
          notes 4-5-6/3 ## =|: 5-4-2/3 2/2 =:|

          tabstave notation=true tablature=false
          notes C-D-E/4 #0# =:: C-D-E-F/4 =|=

      h2 推弦
      p 推弦是吉他的常用技巧,要表示推弦, 只需要在两个品数之间用 'b' (取自英文bend,弯曲的意思)连接起来 .
      p 如 '10b12b10' 推一个全音
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave
          notes 4-5-6b7/3 10/4 | 5-4-2/3 2/2

          tabstave
          notes 6-7b9b7/3 7/4 | 9-8-7-6/2

      h2 闷音,颤音,拨弦
      p 'x' 表示闷音, 'v' (vibrato)表示颤音, 'd' (downstroke) 下拨弦, 'u' (upstroke) 上拨弦
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true
          notes 4-5-6b7v/3 10/1 | 5d-4u-Xd/3 2v/2

      h2 和弦
      p 把不用音符用 '.' 点号连接起来表示一个和弦. 如 '4/5.5/6' 或 'C/4.E/4'
      p 当然在吉他谱中, 你可以在和弦中的每一个音符加入推弦,滑音等技巧.
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true tablature=false
          notes (C/4.E/4.G/4) C-E-G/4

          tabstave notation=true
            notes (8/2.7b9b7/3) (5b6/2.5b6/3) 7/4 |
            notes (5/2.6/3.7/4)

      h2 锤弦(hammer-on),勾弦(pull-off), 滑弦(slide)
      p  吉他谱中的锤弦(hammer-on),勾弦(pull-off), 滑弦(slide)只要使用英文字母 'h,p,s'  连接音符即可.
      p 如:单音锤弦技巧 '6h8/3', '6h8p6/3' , 复杂的和弦 '(5/4.5/5)s(7/4.7/5)',
      .compoze
        div.vex-tabdiv(editor="true").
          tabstave
            notes (5/2.5/3.7/4) 5h6/3 7/4 |
            notes t12p7p5h7/4 7/5 5s3/5

          tabstave
            notes (8/2.7b9b7/3) (5b6/2.5b6/3)v 7s0/4 |
            notes (5/2.6/3.7/4)v

          tabstave
            notes (5/4.5/5)s(7/4.7/5)s(5/4.5/5) (5/4.5/5)h(7/5) |
            notes t(12/5.12/4)s(5/5.5/4) 3b4/5 5V/6

      h2 音长,连音
      p 每个音符默认都是1/4节拍的时长. 要定义音符的时长. 使用冒号 ':'+数字 定义一段音符的时长,如':8 5-7s8/5'
      p 目前支持的音长定义有 ':w :h :q :8 :16 :32' 分别打代表 whole, half, quarter, 8, 16, 32分 音长
      br
      p 连音的表示方法 '^3^' (3连音). 连音数前后加上^号.

      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true time=4/4 key=Ab tuning=eb
          notes :8 5-7s8/5 ^3^ :q (5/2.6/3)h(7/3) :8d 5/4 :16 5/5

          tabstave notation=true

          notes :q (8/2.7b9b7/3) (5b6/2.5b6/3)v :8 7s12/4
          notes :16:9s:8:3s:16:0/4


      h2 歌词,注释
      p 注释可以简单的使用 '$' 包裹文本, 乐谱会自动的通过$中间的 ',' 号来分割文本, 和每个音符一一对应位置
      p '$.top.$' 定义文本在上, '$.bottom.$' 定义注释在下

      .compoze
        div.vex-tabdiv(editor="true").
          tabstave notation=true time=4/4 key=Ab tuning=eb
          notes :q 5/5 5/4 5/3 ^3^ $Fi,Ga,Ro!$ :h 4/4 $.top.$ $Blah!$



      .loading.line-scale
        div
        div
        div
        div
        div