abcjs.net 은 인터넷 브라우저에 악보를 출력하는 자바스크립트 라이브러리입니다.
<!DOCTYPE HTML> <html> <head> <link href="abcjs-audio.css" media="all" rel="stylesheet" type="text/css" /> <script src="abcjs_basic_5.9.1-min.js" type="text/javascript"></script> </head> <body> <div id="notation"></div> <div id="audio"></div> <script type="text/javascript"> ......... </script> </body> </html>
var cooleys = 'X:1\nT: Cooley\'s\nM: 4/4\nL: 1/8\nR: reel\nK: Emin\nD2|:"Em"EB{c}BA B2 EB|~B2 AB dBAG|"D"FDAD BDAD|FDAD dAFD|\n"Em"EBBA B2 EB|B2 AB defg|"D"afe^c dBAF|1"Em"DEFD E2 D2:|2"Em"DEFD E2 gf||\n|:"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|\n"Em"eB B2 eBgB|eB B2 defg|"D"afe^c dBAF|1"Em"DEFD E2 gf:|2"Em"DEFD E4|]\n';
var visualObj = ABCJS.renderAbc('notation', cooleys)[0]; // 악보 입력
var synthControl = new ABCJS.synth.SynthController(); // 플레이어 선언
synthControl.load("#audio", null, {displayRestart: true, displayPlay: true, displayProgress: true});
synthControl.setTune(visualObj, false);
X: 1
T: Cooley's
M: 4/4
L: 1/8
R: reel
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
위의 마크업 언어는 abc라고 하는 언어입니다. 여기서 매뉴얼을 볼 수 있습니다. 간단하게만 살펴보겠습니다.
X: 에서 K: 까지는 헤더 부분입니다 제목, 작곡가, 박자, 조성 등을 설정하는 부분입니다.
그 밑에는 노트 부분이며 여기에 악보를 기입합니다. 첫번째 마디의 D2에서 D는 음높이이고 뒤 숫자 2는 박자의 상대적 배수입니다.
박자는 L: 에 상대적으로 대응합니다. L: 이 1/8이므로 2를 입력하면 8분음표의 2배가 되어 4분음표가 입력됩니다. /2는 2분의 1배라는 뜻으로 8분음표를 1/2배인 16분음표가 입력됩니다.
마디는 |를 입력합니다. 샤프(♯)는 노트 이름 앞에 “^“, 내추럴(♮)은 “=“, 플랫(♭)은 “_“를 입력합니다.
음높이
박자
아래 예제는 semitone 스케일을 악보로 표시합니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const NAME_COMMON = ["", "C", "C+", "D", "E-", "E", "F", "F+", "G", "A-", "A", "B-", "B"]; | |
| // C2 ^C2 _E2 =E2 ^F2 G2 A2 _B2 c2| | |
| // ^: sharp | |
| // =: natural | |
| // =: flat | |
| function translateToAbcjs(scaleBySemitone){ | |
| console.log(scaleBySemitone) | |
| const outArr = [] | |
| const changedNotes = [] | |
| for(let each of scaleBySemitone){ | |
| console.log(each) | |
| const nameIndex = each > 12 ? each – 12 : each | |
| const octave = each > 12 ? 1 : 0 | |
| console.log("octave", octave) | |
| const note = (_ => { | |
| if(octave == 0){ | |
| return NAME_COMMON[nameIndex].substr(0, 1) | |
| } else if(octave == 1){ | |
| return NAME_COMMON[nameIndex].substr(0, 1).toLowerCase() | |
| } | |
| })() | |
| const postfix = NAME_COMMON[nameIndex].substr(NAME_COMMON[nameIndex].length-1, 1) | |
| console.log(note, postfix) | |
| if(note.toUpperCase() != postfix){ | |
| const prefix = postfix == "+" ? "^" : "_" | |
| changedNotes.push(note) | |
| outArr.push(prefix + note + "2") | |
| } else { | |
| if( changedNotes.indexOf(note) != -1 ){ | |
| outArr.push("=" + note + "2") | |
| } else { | |
| outArr.push(note + "2") | |
| } | |
| } | |
| } | |
| console.log(outArr) | |
| return outArr.join(" ") | |
| } |
1개의 댓글
웹 사이트 예제: 음악 스케일 목록 - BGSMM · 2019년 11월 17일 3:27 오후
[…] 각 목록을 클릭하면 스케일의 정보와 악보, 소리듣기 기능을 제공 (abcjs 이용) […]