개요

이전에는 업무 관계로 인해 AUDIO, MIDI 관련 작업의 영향을 받아 다음과 같은 기사를 발견했다.
여기에 사용된 웹 MIDI API를 사용하면 오디오와 midi용 테스트 애플리케이션을 쉽게 만들 수 있기 때문에 그것에 대해 여기에 두고 싶습니다.
최종적으로raspberry pi + USB 키보드 + 소형 모니터로 합성기 같은 걸 만들면 좋겠다고 생각해요 (나중에 AWS에 연주 정보를 주고 연주 일지를 구름 위에 남겨두고... 그럴 수 있을지 없을지 계획하고 있어요)

이른바 웹 MIDI api

우선 웹 MIDI api는 웹 브라우저를 통해 MIDI 기기(USB 키보드, 오디오 인터페이스, 전자악기 등)와 통신하는 API다.
한 마디로 하면 웹 브라우저를 조작하면 MIDI 장치를 조작할 수 있고 MIDI 장치를 조작하면 웹 브라우저를 통해 소리를 낼 수 있다.

원래 MIDI는...

쉽게 말해 MIDI는 연주 메시지다.
wav 파일과 mp3 파일 등에는 곡 자체가 포함되어 있고,midi 파일에는 이 곡의 연주 정보가 포함되어 있다.따라서mid 파일은 재생기기에 따라 소리가 현저하게 달라진다.
참고로 MIDI 데이터를 사용하는 이유는 WAv 데이터와 mp3 데이터보다 MIDI 데이터의 사이즈가 훨씬 작고 시스템 자원을 이용하여 개발한 정보도 연주 정보 이외의 데이터 교환을 할 수 있기 때문이다(다른 장점이 있다고 생각한다).

환경 만들기

다음 두 가지 소프트웨어가 필요합니다.링크에서 설치하십시오.
(구글 크롬 이외의 브라우저도 사용할 수 있을 것 같지만 확인되지 않았습니다)
- vs code
- google chrome
또한 다음 링크에서 웹 MIDI api에 사용할 소스 코드를 가져옵니다.
https://github.com/ryoyakawai/x-webmidi/archive/0.10.23.zip
【추기】현황은chromium시스템의 브라우저에서만 실행할 수 있음@nagtkk입니다. 알림 감사합니다.
https://caniuse.com/#feat=midi

이루어지다

(javascript의 학습 부족으로 인해 나중에 업데이트할 계획입니다.)

부팅 방법

우선 vscode를 열고 '확장 기능' 이나 'extension' (아래 그림의 파란색으로 둘러싸인 아이콘) 을 누르고 '라이브 서버' (아래 그림의 빨간색으로 둘러싸인 내용) 를 설치하십시오.

다음에 vscode로 'midiPlayground' 폴더를 엽니다."src"폴더의 "keyboard.html"을 오른쪽 단추로 클릭합니다.
이렇게 하면 아래 그림과 같이 창이 나타나서 Open with Live Server를 클릭합니다.
이렇게 하면 구글 크롬이 열리고 프로그램이 열립니다.

실제 부팅 화면

실제 가동 화면은 다음과 같다.
나는 키보드를 누르는 곳을 통해 소리가 날 것이라고 생각한다.또'프로그램'의 빨간 가로대를 이동하면 키보드를 눌렀을 때의 소리(MIDI가 말한 프로그램 전환 정보를 내는 것)를 바꿀 수 있다.

성과물

이번에 만든 물건은 아래 링크된 곳에 있습니다.자유롭게 사용하세요.
https://github.com/tomsWalker/webAPP/tree/master/midiPlayground

참고 문헌