Parcel은 웹 애플리케이션 번들러로서, 자바스크립트, CSS, 이미지 등의 정적 파일을 번들링하고 기타 작업을 수행할 수 있는 도구입니다. 웹 MIDI는 브라우저에서 MIDI 장치와 상호작용하기 위한 웹 표준입니다. 따라서 Parcel과 웹 MIDI를 함께 사용하려면 몇 가지 설정과 코드 작성이 필요합니다.

1. Parcel 프로젝트 설정: Parcel 프로젝트에서 웹 MIDI를 사용하려면 먼저 Parcel의 기본 설정에 MIDI 지원을 추가해야 합니다. 이를 위해 다음과 같이 프로젝트의 package.json 파일을 열고 browserslist 속성에 “Web MIDI API”를 추가합니다.

"browserslist": [
  "Web MIDI API"
]

1. 웹 MIDI API 지원 확인: Parcel은 자동으로 최신 브라우저에서 웹 MIDI API를 지원하는지 확인합니다. 따라서 문제가 발생하지 않는 한 별도의 설정 없이 Parcel을 실행하면 됩니다. 그러나 특정 MIDI 장치에 연결하려는 경우, 장치가 브라우저에서 인식되는지 확인해야 합니다.

2. MIDI 장치 연결: Parcel 프로젝트에서 MIDI 장치를 연결하려면 다음 단계를 따르세요.

• navigator.requestMIDIAccess() 함수를 사용하여 MIDI 액세스를 요청합니다.
• 사용자가 MIDI 장치에 액세스를 허용하면 MIDIAccess 객체를 반환합니다.
• MIDIAccess.inputs 속성을 사용하여 연결된 MIDI 입력 장치의 목록을 가져옵니다.
• 사용할 MIDI 입력 장치를 선택하여 onmidimessage 콜백 함수를 등록합니다.
• MIDI 이벤트를 수신하기 위해 onmidimessage 콜백 함수를 작성합니다.

다음은 Parcel에서 웹 MIDI를 사용하여 MIDI 이벤트를 간단히 수신하는 예제 코드입니다.

navigator.requestMIDIAccess().then(function(access) {
  // MIDI 액세스 허용 시
  var inputs = access.inputs;
  for (var input of inputs.values()) {
    // MIDI 입력 장치마다 이벤트 수신 처리
    input.onmidimessage = function(event) {
      // MIDI 이벤트 처리
      console.log("Received MIDI event:", event);
    };
  }
}, function(error) {
  // MIDI 액세스 거부 시
  console.error("MIDI access denied:", error);
});

이제 Parcel 프로젝트에서 웹 MIDI를 제어하는 방법을 알게 되었습니다. 이를 사용하여 MIDI 장치의 입력을 받고 처리하는 다양한 기능을 구현할 수 있습니다.