[easyscore] 웹에서 악보 그리기

easyscore은 매우 쉽고 간단하게 악보를 그릴 수 있는 모듈이다. 사용법은 easyscore tutorial에 잘 설명되어 있다. 

다만 이 모듈에는 치명적인 문제점이 있는데, 생성자에서 mode가 STRICT로 설정된다는 것이다. 그 결과 strict mode를 풀어주지 않으면 음표를 더도 덜도 말고 딱 4개만 그릴 수 있다. 도대체 왜 이렇게 만든 것인지는 모르겠으나 악보에 음표가 딱 4개만 있는 것은 말이 안되는 일이니까 우리는 이 mode를 변경해야 한다.

---

기존에 easyscore tutorial에 소개된 사용법은 다음과 같다.

var vf = new Vex.Flow.Factory({renderer: {elementId: 'boo'}});
var score = vf.EasyScore();
var system = vf.System();

system.addStave({
  voices: [score.voice(score.notes('C#5/q, B4, A4, G#4'))]
}).addClef('treble').addTimeSignature('4/4');

vf.draw();

 

렌더링 결과

하지만 note의 개수가 4개보다 적거나 많으면 다음의 내부 코드에 걸려 에러를 띄운다.

소스코드를 뜯어보게 만드려고 STRICT mode 같은걸 일부러 만든걸까

아마 [RuntimeError] BadArgument:Too many ticks  와 같은 error를 띄웠던 것 같다. 에러가 발생했을 당시에 에러를 저장해두지 않아서 정확하게 기억이 안난다. 앞으로는 에러가 생길 때마다 메모장에 저장해뒀다가 글을 써야겠다. 

 

해결 방법은 다음과 같이 코드를 수정하면 된다. setStrict(false)가 핵심이다.

const VF = Vex.Flow;
var vf = new VF.Factory({renderer: {elementId: 'boo'}});
var score = vf.EasyScore();
var system = vf.System(); 

var piano = score.factory.Voice();
piano.setStrict(false);
piano.addTickables(score.notes('C#5/q, B4, A4, G#4, B4, A4'))

system.addStave({
  voices: [piano]
}).addClef('treble').addTimeSignature('4/4');

vf.draw();