compoze
Version:
music writer
220 lines (200 loc) • 8.62 kB
text/jade
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")
link(rel="stylesheet",href="../../lib/editor.md/css/editormd.min.css")
style.
.CodeMirror {
line-height: 1;
position: absolute;
overflow: hidden;
background: white;
color: black;
top: 0;
width: 100%;
font-size: 12px;
}
body
a(href="/")
div.logo.icon 
//- div#start.start.icon 
//- div#stop.stop.icon.hidden 
div(style="text-align:center")
input(style="border:none;border-left:4px solid #eee ; padding:6px; margin: 20px;padding-left: 20px; outline:none; width: 300px;" value="关于compoze")
.container(style="width:100%;max-width:1280px;margin: 0 auto; ")
div#ed(style="width:100%;")
textarea#editor.
compoze 是一种乐谱编写语言, 通过文本符号在线编写出可播放的五线谱和吉他谱.
##乐谱
使用 'tabstave' 关键字创建一个空白的乐谱
'tabstave' 还可以附带参数. 比如 'tabstave notation=true' 渲染一个标准的六线谱
```compoze
tabstave notation=true
```
##乐谱参数
示例
tabstave notation=true 默认包含六线谱和五线谱
tabstave notation=true tablature=false 只画六线谱
tabstave notation=true clef=alto 使用低音部
详细参数
```
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
tabstave notation=true clef=bass key=Ab time=C|
notes 4-5/6
```
##添加音符
使用 'notes' 关键字来添加音符. 每一个音符的表达格式通常使用 `音高/音阶` 表示六线谱 或者 `品数/弦数` 五线谱.
```compoze
tabstave notation=true tablature=false
notes Cn-D-E/4 F#/5
```
吉他谱的表示方式
```compoze
tabstave notation=true
notes 4-5-6/3 10/4
```
##休止符和小节线
休止符使用 '##' 两个井号表示. 休止符会自动调整高度, 也可以在中间输入0~9数字来调整高度,如: '#0#'
破折号 '|' 代表小节线,用来划分每个节拍单位, 当然, 一般乐谱中的小节线会有很多种.
```
=|| 双节线
=|: 重复开始
=:| 重复结束
=:: 两头重复
=|= 结束线
```
```compoze
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 =|=
```
##推弦
推弦是吉他的常用技巧,要表示推弦, 只需要在两个品数之间用 'b' (取自英文bend,弯曲的意思)连接起来 .
如 '10b12b10' 推一个全音
```compoze
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
```
##闷音,颤音,拨弦
'x' 表示闷音, 'v' (vibrato)表示颤音, 'd' (downstroke) 下拨弦, 'u' (upstroke) 上拨弦
```compoze
tabstave notation=true
notes 4-5-6b7v/3 10/1 | 5d-4u-Xd/3 2v/2
```
##和弦
把不用音符用 '.' 点号连接起来表示一个和弦. 如 '4/5.5/6' 或 'C/4.E/4'
当然在吉他谱中, 你可以在和弦中的每一个音符加入推弦,滑音等技巧.
```compoze
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)
```
##锤弦(hammer-on),勾弦(pull-off), 滑弦(slide)
吉他谱中的锤弦(hammer-on),勾弦(pull-off), 滑弦(slide)只要使用英文字母 'h,p,s' 连接音符即可.
如:单音锤弦技巧 '6h8/3', '6h8p6/3' , 复杂的和弦 '(5/4.5/5)s(7/4.7/5)',
```compoze
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
```
每个音符默认都是1/4节拍的时长. 要定义音符的时长. 使用冒号 ':'+数字 定义一段音符的时长,如':8 5-7s8/5'
目前支持的音长定义有 ':w :h :q :8 :16 :32' 分别打代表 whole, half, quarter, 8, 16, 32分 音长
连音的表示方法 '^3^' (3连音). 连音数前后加上^号.
```compoze
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
```
##歌词,注释
注释可以简单的使用 '$' 包裹文本, 乐谱会自动的通过$中间的 ',' 号来分割文本, 和每个音符一一对应位置
'$.top.$' 定义文本在上, '$.bottom.$' 定义注释在下
```compoze
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
//- script(src="../../dist/compoze.js")
script(src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js")
script.
var jQuery = $
//- script(src="../../lib/MIDI/MIDI.min.js")
//- script(src="../../lib/inc/Base64.js")
//- script(src="../../lib/inc/base64binary.js")
script(src="../../lib/editor.md/editormd.js")
script.
$(function(){
editormd({
id: 'ed',
path: '../../lib/editor.md/lib/',
compoze: true,
compozeUrl: '/dist/compoze'
})
})
//- document.getElementById('player').innerHTML = document.getElementById('player').innerHTML.replace(/width=\d+/g, 'width='+window.innerWidth/2)
//- instance = new Vex.Flow.TabDiv(document.getElementById('player'),
//- {
//- instrument: 'acoustic_guitar_steel',
//- soundfont_url: "http://yuepuso.qiniudn.com/"
//- }
//- );
//- document.getElementById('player').style.display = 'block'
//- window.myCodeMirror = CodeMirror.fromTextArea($('#editor')[0], {
//- lineNumbers: true,
//- mode: "javascript",
//- lineWrapping: true,
//- fixedGutter:false
//- });
//- myCodeMirror.on('change',function(){
//- setTimeout(function(){
//- myCodeMirror.setSize(myCodeMirror.getScrollInfo().clientWidth, myCodeMirror.getScrollInfo().height)
//- },200)
//- if(instance.timeoutID) clearTimeout(instance.timeoutID)
//- if(instance.code !== myCodeMirror.getValue().replace(/width=\d+/g, 'width='+window.innerWidth/2)){
//- instance.timeoutID = setTimeout( function(){
//- instance.code = myCodeMirror.getValue().replace(/width=\d+/g, 'width='+window.innerWidth/2);
//- instance.redraw()
//- }, 250);
//- }
//- });
//- $('#start').on('click',function(){
//- instance.player.play()
//- $('#stop').show()
//- $('#start').hide()
//- })
//- $('#stop').on('click',function(){
//- instance.player.stop()
//- $('#start').show()
//- $('#stop').hide()
//- })