이 글은 CyberAgent 19 졸업생 엔지니어 Advent Calendar 2018 14일째 되는 글이다.

이 보도에 관하여

브라우저로 간단하게 악보를 쓸 수 있는 편리한 프로그램 라이브러리 abcjs를 소개합니다.이거 되게 웃긴 얘기예요.

자체석사 연구에서 사용하면 디테일을 만질 기회가 많다

유용한 라이브러리임에도 Qita 기사가 거의 없음

이런 이유로 소개 기사를 썼다.

독자 대상

악보를 사용하는 사람

abcjs를 사용하지 않은 사람

ABC 스펙트럼을 모르는 사람

abcjs 정보

abcjs는 웹에서 악보를 쓸 수 있는 자바스크립트 라이브러리ABC 악보법(이하 ABC)를 사용합니다.@paulrosen씨의 오픈소스 프로젝트에서는 MIT 라이선스를 위해 다양한 곳에서 사용할 수 있습니다.지금도 적극적으로 개발해 새로운 기능의 추가와 업데이트를 빈번히 진행하고 있다.
ABC는'C'를 쓰면'카베'로 변하는 간단한 기법으로, 복잡한 포석과 대규모 점수 기술에는 서툴지만, 대부분의 악보는 ABC를 잘 쓴다.

할 수 있는 일

HTML에 악보 포함

텍스트를 바탕으로 바삭한 악보를 쓰다

악보를 재생하는 MIDI

설치하다.

$ npm i abcjs

넣다

import abcjs from "abcjs";

script 태그로 읽는 URL도 준비됐습니다.

기본용법

'델레미'의 악보를 그리다.디지털 사진은 ABC에서 cde를 만듭니다.

API 사용

abcjs.renderAbc(${楽譜描画先要素のID}, ${ABC});

샘플 코드

Codesandbox

악보를 열심히 써보도록 하겠습니다.

Information Field 쓰기

ABC 본문에 앞서 제목과 작곡가 등의 메타데이터(Information Field)를 기술할 수 있다.

제목: T

T:My Song

작곡가: C

T:My Song
C:stkay

기준 음가 변경: L

ABC가 어떤 내용도 지정하지 않으면 음표는 8분 음표(1/8)를 기준으로 입력된다.이 기준의 음가를 수정하려면 L 필드를 설정하십시오.

T:My Song
C:stkay
L:1/4
CCCC

번호 바꾸기: K

T:My Song
C:stkay
L:1/4
K:G
CCCC

박자 기호 바꾸기: M

T:My Song
C:stkay
L:1/4
K:G
M:1/2
CC

각종 ABC 쓰기

음가를 바꾸다

음가를 바꾸려면 기준 음가의 배수를 사용하세요.

T:My Song
C:stkay
L:1/4
C1/4 C1/2 C C2 C3 C4

소절선을 긋다

|는 소절선이다.

T:My Song
C:stkay
L:1/4
M:4/4
CCCC | CCCC |

경계선을 긋다

텍스트에 공백을 입력하면 음표의 가장자리를 구분할 수 있습니다.

T:My Song
Cstkay
M:4/4
C C CC CCCC

기타 상세한 기법은 ABC 기보법 공식wiki을 보십시오.

라이브 악보 편집

abcjs editor를 사용하면 브라우저에서 악보를 실시간으로 입력할 수 있습니다.

API 사용

new abcjs.Editor(${テキストエリアのID}, {paper_id: ${楽譜描画先要素のID})

샘플 코드

Codesandbox

MIDI

abcjs에서 만든 악보는 MIDI로 재생할 수 있다.

API 사용

abcjs.renderMidi(${シークバー描画先要素のID}, ${ABC})

샘플 코드

Codesandbox

차리다

라이브러리 소스 변경

import abcjs from "abcjs/midi";

MIDI 기능을 사용할 때 가져오기 원본이 바뀝니다!

검색 표시줄에 사용된 font-awesome/CSS 로드

MIDI가 재생성될 때 abcjs에서 검색 표시줄을 그릴 것입니다. 그러나 거기에 사용된 font-awesome/CSS를 따로 읽어야 합니다.

HTML에 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 추가

창고에 있는 CSS 파일https://raw.github.com/paulrosen/abcjs/master/abcjs-midi.css을 복사

더욱 중시하는 사용 방법

악보의 음조를 조절하다

renderAbc에서 지정한 방법과 CSS가 그린 SVG에 직접 적용되는 두 가지 방법.

params로 지정

params세 번째 매개 변수를 교부하는 대상abcjs.renderAbc(${楽譜描画先要素のID}, ${ABC}, ${params});에서 악보의 외관과 레이아웃 등에 대한 매개 변수를 지정할 수 있습니다.
비례를 바꾸어 보는 예Codesandbox

CSS에 스타일 적용

params에서 params를 활성화하면 특정 경로에 스타일을 적용할 수 있습니다.
오선을 붉게 만드는 예(Codesandbox

음표에 지우개 등록

add_classes의 params에 음표에 대한 청소기를 등록할 수 있습니다.
음표를 클릭한 후alert의 예시Codesandbox

총결산

이상은 abcjs의 기본 용법입니다.질문이 있으면 본 보도의 평론란이나 필자twitter에 마음대로 질문하세요.

관련 정보

abcjs 정보

공식 API 문서

abcjs Configurator

API에 설정된 다양한 매개변수를 상호 미리볼 수 있는 웹 사이트

abcjs demo page

abcjs Editor를 테스트할 수 있는 사이트

ABC에 대한 정보

공식 안내서(v2.2)

페이지의 기록을 검색하는 방법입니다.(예를 들어 임시 기호의 기법을 찾으려면 accidental로 검색)

음악 용어의 영역을 모르면 사용하기 어려울 수 있습니다.

마리아의 일본어 번역 안내서(v2.1)

↑ 공식 수첩의 일본어 번역(최신 아님)

Yahoo Groups

ABC의 메일 리스트

매일 ABC의 문법, 소프트웨어 사용법에 대한 질문

abc software packages

ABC를 처리할 수 있는 플랫폼별 소프트웨어 목록

ABC 스펙트럼 예

tune search

ABC 스펙트럼을 검색할 수 있습니다.IMSLP 등에 비해 보고서가 적을 수 있습니다.　　

선전하다.

scrapbox.io는 석사 연구의 일환으로 악보를 잽싸게 쓸 수 있는 크롬 확장hyperscorebox을 개발하고 있다.이것은 Scrapbox의 링크 기능과 ABC의 텍스트 기반 악보를 융합한 강력한 확장 기능이니 반드시 사용하십시오.