브라우저에 악보를 쓸 수 있는 프로그램 라이브러리 abcjs 소개
9828 단어 abcjs악보JavaScript음악.
이 보도에 관하여
브라우저로 간단하게 악보를 쓸 수 있는 편리한 프로그램 라이브러리 abcjs를 소개합니다.이거 되게 웃긴 얘기예요.
독자 대상
abcjs 정보
abcjs는 웹에서 악보를 쓸 수 있는 자바스크립트 라이브러리ABC 악보법(이하 ABC)를 사용합니다.@paulrosen씨의 오픈소스 프로젝트에서는 MIT 라이선스를 위해 다양한 곳에서 사용할 수 있습니다.지금도 적극적으로 개발해 새로운 기능의 추가와 업데이트를 빈번히 진행하고 있다.
ABC는'C'를 쓰면'카베'로 변하는 간단한 기법으로, 복잡한 포석과 대규모 점수 기술에는 서툴지만, 대부분의 악보는 ABC를 잘 쓴다.
할 수 있는 일
설치하다.
$ 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를 따로 읽어야 합니다.
abcjs.renderAbc(${楽譜描画先要素のID}, ${ABC});
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를 따로 읽어야 합니다.
new abcjs.Editor(${テキストエリアのID}, {paper_id: ${楽譜描画先要素のID})
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 정보
이상은 abcjs의 기본 용법입니다.질문이 있으면 본 보도의 평론란이나 필자twitter에 마음대로 질문하세요.
관련 정보
abcjs 정보
공식 API 문서
abcjs Configurator
abcjs demo page
ABC에 대한 정보
공식 안내서(v2.2)
마리아의 일본어 번역 안내서(v2.1)
Yahoo Groups
abc software packages
ABC 스펙트럼 예
tune search
선전하다.
scrapbox.io는 석사 연구의 일환으로 악보를 잽싸게 쓸 수 있는 크롬 확장hyperscorebox을 개발하고 있다.이것은 Scrapbox의 링크 기능과 ABC의 텍스트 기반 악보를 융합한 강력한 확장 기능이니 반드시 사용하십시오.
Reference
이 문제에 관하여(브라우저에 악보를 쓸 수 있는 프로그램 라이브러리 abcjs 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/stkay/items/08e7fe5ec1f5546f89a8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(브라우저에 악보를 쓸 수 있는 프로그램 라이브러리 abcjs 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/stkay/items/08e7fe5ec1f5546f89a8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)