웹 미디로 발가락을 하드웨어에 담그십시오

웹을 선행하는 성숙한 프로토콜을 사용하여 흥미롭고 심지어 맞춤형 하드웨어와 인터페이스 할 수있는 잘 지원되는 브라우저 API가 있다는 것을 알고 있습니까? MIDI와 WebMidi API를 소개하고 프론트 엔드 개발자가 브라우저를 벗어나 하드웨어 프로그래밍 세계에서 JavaScript와 DOM의 상대적인 편안함을 남길 수있는 독특한 기회를 제공하는 방법을 보여 드리겠습니다.

Midi와 Webmidi는 정확히 무엇입니까?

MIDI는 악기가 서로 의사 소통 할 수 있도록 설계된 틈새 프로토콜입니다. 그것은 1983 년에 표준화되었으며 오늘날 음악 산업 회사와 대표로 구성된 조직에 의해 유지됩니다. W3C가 웹 표준을 지시하고 보존하는 방식과 크게 다르지 않습니다.

WebMIDI API는이 프로토콜을 브라우저 기반 구현으로 웹 애플리케이션이 MIDI를 "말하기"하고 사용자 장치에 연결될 수있는 모든 MIDI 캡슐형 하드웨어와 통신 할 수 있습니다.

음악가가 아니야? 괜찮아요! 우리는 전자 악기를 위해 설계된이 간단한 프로토콜을 사용하여 재미 있고, 대화식이며, 완전히 비면증적인 것들을 구축 할 수 있음을 매우 빨리 알게 될 것입니다.

왜 내가 이것을하고 싶습니까?

좋은 질문. 가장 짧은 대답 : 재미 있기 때문에!

그 대답이 당신에게 충분히 만족스럽지 않다면 나는 이것을 제공 할 것입니다 : 물리적 세계와 가상 세계 사이의 경계를 만들어내는 일을 만들어 우리는 대부분의 날을 보내는 것을 보낸다. 창의적인 땜질과 탐색 할 새로운 사용자 인터페이스 및 경험을 고려하고 만들 수있는 기회입니다. 나는 이런 종류의 장난스러운 탐험이 우리가 두뇌의 다른 부분을 사용하게하고 장거리에서 더 나은 개발자를 만드는 데 도움이된다고 생각합니다.

어떤 종류의 물건을 만들 수 있습니까?

시작하려면 무엇이 필요합니까?

WebMidi를 실험하기위한 전제 조건은 다음과 같습니다.

MIDI 컨트롤러

이것은 가장 까다로운 부분 일 수 있습니다. 실험하려면 MIDI 가능 하드웨어 조각을 조달해야합니다. Craigslist, Amazon 또는 Aliexpress에서 저렴한 것을 찾을 수 있습니다. 또는 - 당신이 정말로 야심이 있고 Arduino를 사용할 수 있다면 - 당신은 당신 자신의 직접 구축 할 수 있습니다 (이 기사의 끝을 참조하십시오. 자세한 내용은이 기사의 끝을 참조하십시오).

WebMidi 가능 브라우저

이 브라우저 지원 데이터는 Caniuse의 것입니다. 숫자는 브라우저가 해당 버전에서 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일 / 태블릿

이 글을 쓰는 시점에서 Caniuse.com에 따르면 브라우저의 약 73%가 지원하지만 대부분의 중장기는 Chromium에 의해 수행됩니다. 모든 크롬 기반 브라우저는 전자 앱과 최신 크롬 기반 Microsoft Edge를 포함하는 WebMidi를 지원합니다. 또한 Opera 및 Samsung Internet 브라우저에서도 지원됩니다. Firefox에서는 여전히 논의되고 있지만 나중에 더 빨리 오기를 바랍니다.

안녕하세요, 웹 미디

두 가지를 모두 조달 한 후에는 코드를 작성하기 시작할 수 있습니다! WebMidi와의 작업은 Geolocation 또는 MediaDevices API와 같은 다른 브라우저 API와 함께 작업하는 것과 크게 다르지 않습니다.

높은 수준의 흐름은 다음과 같습니다.

• 브라우저에서 WebMidi API의 가용성을 감지합니다.
• 감지되면 사용자에게 액세스 할 수있는 권한을 요청합니다.
• 허가가 부여되면 이제 연결된 MIDI 장치를 감지하고 통신하는 추가 방법에 액세스 할 수 있습니다.

실제로 보자 :

 if (Navigator에서 "requestMidiaccess") {
  // 웹 미디 API를 사용할 수 있습니다!
}

이제 WebMidi 가능 브라우저에 있다고 가정하면 액세스를 요청하겠습니다.

 navigator.requestmidiaccess ()
. ((Access) = & gt; {
  // 사용자는 우리에게 권한을 부여했습니다. 이제 우리는 할 수 있습니다
  // 연결된 MIDI 가능 장치에 액세스하십시오
  // 사용자의 컴퓨터에.
})
.catch ((오류) = & gt; {
  // 허가가 부여되지 않았습니다. :(
});

사용자가 권한을 부여하는 경우 이제 Midiaccess 인터페이스에 액세스해야합니다. 이를 통해 MIDI 입력을 받고 MIDI 출력을 보낼 수있는 장치 목록을 구축 할 수 있습니다.

다음에 해보자. 이것은 이전 코드 스 니펫에서 우리가 전달한 기능 안에 들어가는 코드입니다.

 const inputs = access.inputs;
const outputs = access.outputs;

// 연결된 각 MIDI 입력 장치를 반복합니다
inputs.foreach ((midiinput) = & gt; {
  // MIDI 입력 장치로 무언가를 수행합니다
});

// 연결된 각 MIDI 출력 장치를 반복합니다
outputs.foreach ((midioutput) = & gt; {
  // MIDI 출력 장치로 무언가를 수행합니다 
});

MIDI 입력과 출력 장치의 차이가 무엇인지 궁금 할 것입니다. 일부 장치는 MIDI 정보 만 컴퓨터에만 보낼 수 있도록 설정되어 있으며 (이들은 입력으로 나열됨) 다른 장치는 컴퓨터로부터 정보를 수신 할 수 있습니다 (출력으로 나타납니다). 장치를 보내거나 수신 할 수 있다는 것은 드문 일이 아니므로 두 가지 아래에 나열되어 있습니다.

이제 우리는 연결된 모든 MIDI 장치를 통해 반복 할 수있는 코드가 있으므로 기본적으로 우리가하고 싶은 두 가지 만 있습니다.

• 입력 장치 인 경우, 우리는 그로부터 방출되는 미디 메시지를 듣고 싶습니다.
• 출력 장치 인 경우 MIDI 메시지를 보내 드릴 수 있습니다.

입력 장치의 들어오는 MIDI 메시지에 응답 할 이벤트 리스너를 설정하기위한 코드는 다른 DOM 이벤트에 대해 설정할 수있는 이벤트 리스너와 매우 유사 해 보입니다.이 경우 우리가 듣고있는 이벤트는 Midimessage 이벤트입니다.

 midiinput.addeventListener ( 'midimessage', (이벤트) = & gt; {
  //`event '객체에는'data '속성이 있습니다
  // 3 숫자 배열이 포함되어 있습니다. 예를 위해 :
  // [144, 63, 127]
})

MIDI 메시지를 출력 장치로 보내 려면 코드를 사용할 수 있습니다.

 출력 ([144, 63, 127]);

여기 에이 대부분이 당신을 위해 함께 모이는 코드 펜 데모가 있습니다. 시스템에 연결된 모든 MIDI 입력 및 출력 장치에 대해 알려 드리며 MIDI 메시지가 발생할 때 들어오는 MIDI 메시지를 표시합니다.

펜을 참조하십시오
George Mandis의 WebMidi 기본 테스트 (@georgemandis)
Codepen에서.

이 시점에서 몇 가지를 궁금해 할 것입니다.

• Midimessage 이벤트를 듣고있을 때는 event.data에서 해당 세 숫자 배열의 머리 나 꼬리를 어떻게 만들려면?
• 왜 MIDI 출력 장치에 3 개의 숫자를 보냈고 왜 그 특정 숫자를 보냈습니까?

이 두 가지 질문에 대한 답은 MIDI 프로토콜이 어떻게 작동하는지와 해결을 위해 설계된 문제를 더 탐구하고 이해하는 데 있습니다.

미디 메시지의 해부학

MIDI 컨트롤러가 다른 MIDI 가능 장치 나 컴퓨터에 "말하면"MIDI 메시지를 보내고받습니다. 이 의사 소통의 기초가되는 프로토콜은 실제로는 상당히 간단하지만 설명 할 때 약간의 장점입니다. 그래도 시도해 볼게요.

모든 MIDI 메시지는 8 비트 (0-255)로 구성된 3 개의 바이트 로 구성됩니다. 이진으로 표시되면 메시지는 다음과 같습니다.

 10010000 | 00111100 | 01111111

MIDI 메시지에는 두 가지 유형이 있습니다 : 상태 및 데이터. 모든 메시지는 하나의 상태 바이트와 두 개의 데이터 바이트로 구성됩니다.

상태 바이트는 다음과 같은 것들을 포함하여 어떤 종류의 메시지가 전달되는지 전달하기위한 것입니다.

• 참고
• 주목하십시오
• 피치 벤드 변화
• 제어/모드 변경
• 프로그램 변경

… 그리고 다른 많은 사람들.

당신이 이것에 대해 뮤지컬 배경에서오고 있다면, 이러한 상태 메시지는 이상하게 보일지 모르지만 그것에 대해 너무 걱정하지 마십시오. 데이터 바이트는 상태에 대한 자세한 정보와 컨텍스트를 제공하기위한 것입니다. 예를 들어, MIDI 피아노를 내 컴퓨터에 연결하고 키를 누르면 메모를 재생하면 메모 바이트와 함께 "Note On"상태를 보냅니다. 어떤 메모를 나타내는 데이터 바이트와 아마도 내가 얼마나 열심히 눌렀는지 표시됩니다.

상태 바이트는 항상 숫자 1과 데이터 바이트로 시작됩니다.

 1x0010000 | 0x0111100 | 0x1111111
    ^상태 ^data1 ^data2

해당 바이트에서 데이터를 표현하기 위해 7 비트를 남기는 데이터 바이트의 경우. 그것은 우리에게 0-127의 정수 범위를 제공합니다.

상태 바이트의 경우 첫 번째 후 다음 3 비트는 상태 메시지 유형을 설명하고 나머지 4 비트는 채널을 설명합니다. 이진 표현을 분해하려면 :

 1x001x0000

이것이 WebMidi 및 JavaScript로 어떻게 해석 되는가

WebMidi API를 사용하여 코드 샘플을 이전에 추측 한 바와 같이, 우리는 이러한 바이너리 표현을 직접 처리하지 않아도됩니다. JavaScript 로이 메시지를 보내고 받으면 다음과 같은 배열을 사용합니다.

 [144, 63, 127]

기존의 뮤지컬 하드웨어로 작업하는 경우 메시지가 어떻게 그리고 왜 그 방식대로 구성되는지에 대한 더 깊은 이해를 얻는 것이 도움이됩니다. 첫 번째 바이트에서 144를 수신하는 것이 첫 번째 채널에서 메모가 켜지고 128은 메모가 꺼져 있음을 나타냅니다.

그러나 우리가 비 근사한 경험을 구축하고 우리 자신의 하드웨어를 만드는 경우,이 숫자는 원하는 것을 대표하도록 용도를 변경할 수 있습니다!

어떤 종류의 하드웨어를 사용할 수 있습니까?

컴퓨터에 연결할 수있는 MIDI 가능 장치는 WebMidi API를 통해 액세스 할 수 있어야합니다. MIDI 데이터를 다른 MIDI 가능 장치로 보낼 수있는 장치를 종종 MIDI 컨트롤러라고합니다. 일반적인 예는이 Korg Nanokey2와 같은 간단한 피아노 스타일 키보드입니다.

그러나 외관과 상호 작용 모드에서 크게 다를 수 있습니다. 버튼은 확실히 일반적이지만 Akai LPD8과 같은 다이얼 또는 압력에 민감한 패드를 포함하는 일부를 찾을 수도 있습니다.

다른 사람들은 매핑 모션 또는 미디 신호에 대한 호흡을 포함하여 더 추상적이고 흥미로운 상호 작용 모드를 사용합니다. 예를 들어,이 컨트롤러 (소스 오디오의 Hothand)는 3 개의 가속도계를 사용하여 손 제스처를 MIDI 메시지에 매핑합니다.

일부 컨트롤러는 MIDI 메시지를 보내고받을 수있어 물리적 세계와 진정한 양방향 대화를 할 수 있습니다. Novation LaunchPad는 전형적인 예입니다. 버튼을 눌러 메시지를 보내고 메시지를 수신하여 장치의 색상을 동적으로 변경할 수도 있습니다.

나만의 하드웨어를 만들 수 있습니까?

그들은 건축하기가 크게 어렵지 않으며 야생에서 많은 홈 양조 미디 컨트롤러를 찾을 수 있습니다. 그들은 서둘러 훨씬 더 정교해질 수 있습니다. 일부는 완전히 바나나가 될 수 있습니다.

자신의 MIDI 컨트롤러를 구축하면 JavaScript의 세계를 벗어나지 만 Arduino 플랫폼에 익숙하거나 관심이 있다면 여전히 놀랍게도 액세스 할 수 있습니다. Adafruit의 Circuit Playground Classic은 시작하기에 좋은 장치이며 장치로 플래시 할 스타터 코드를 찾아 Github의다면 미디 컨트롤러로 만들 수 있습니다.

요약

WebMidi API는 프론트 엔드 개발자가 기본 하드웨어 및 소프트웨어 상호 작용을 실험하기 시작하는 저발로 제공되는 방법입니다. 구현은 다른 하드웨어 웹 API (예 : Bluetooth)와 비교하여 비교적 간단하며 MIDI 표준은 잘 문서화되어 있습니다. 시원한 물건을 실험하거나 구축하기 위해 기존의 MIDI 가능 장치가 많이 있으며, 정말로 전부로 가서 프로젝트를 위해 자신의 Custom MIDI 하드웨어를 구축하고 싶다면 그렇게 할 수 있습니다.

나가서 뭔가를 만들어!

위 내용은 웹 미디로 발가락을 하드웨어에 담그십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!