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 스케일을 악보로 표시합니다.


문의 | 코멘트 또는 yoonbumtae@gmail.com  donaricano-btn


1개의 댓글

웹 사이트 예제: 음악 스케일 목록 - BGSMM · 2019년 11월 17일 3:27 오후

[…] 각 목록을 클릭하면 스케일의 정보와 악보, 소리듣기 기능을 제공 (abcjs 이용) […]

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다