웹 Bluetooth에서 Bluetooth로 MIDI 장치 사용
13597 단어 webmusicWebBluetooth
Bluetooth MIDI를 지원하는 기기는 웹 Bluetooth를 사용하여 웹 브라우저와 연결하는 방법을 설명하기 위해 샘플 코드, 라이브러리 등을 사용합니다.
웹 MIDI API와 어떻게 다릅니까?장점은?
OS와 브라우저, 웹 MIDI API, 웹 블루투스 관계
Web MIDI API는 W3C 표준화된 MIDI 장치와 웹 브라우저를 연결하는 API이다.
'MIDI 장치'가 더 정확하게 말하자면'USB MIDI 장치'다. 웹 브라우저는 OS가 제공하는 MIDI 장치를 자바스크립트의 API로 제공한다.따라서 컴퓨터에 연결된 USB MIDI 장치는 OS에 인식돼야 하므로 이제 블루투스 MIDI 장치를 컴퓨터와 연결해 사용하려면 OS 고유의 유틸리티를 이용해 사전에 연결 작업을 해야 한다.
뭐가 좋아요?
Bluetooth MIDI
Bluetooth MIDI는 "MIDI 기기를 무선으로 컴퓨터에 연결해 사용할 수 있다"는 장점이 있다.하지만 메시지 발송 지연 문제가 있어 장면을 선택한 것 같다.(특히 프로그램)
개인적인 생각으로.
Bluetooth MIDINAMM Show에서 Miselu씨로부터 강력한 발표를 받아 제 마음속에 남았습니다!2013년이나 2014년이라고 생각해요.
Miselu 덕분에 개인적으로 MIDI 기기가 무선 기기가 됐다고 생각합니다.무선을 너무 좋아해 주셔서 진심으로 감사드립니다.감사합니다!
웹 Bluetooth와 Bluetooth MIDI의 이점
앞서 쓴'OS 인식이 필요하다'는 부분은 사실상 상당히 번거롭다. 정통하지 않은 사용자가 볼 수 없는 메뉴에서 블루투스 MIDI 기기를 식별해 OS에 연결해야 하기 때문에 Experience에서는 Bad 상태다.그러나 웹 블루투스를 사용하면 웹 브라우저에서만 블루투스 MIDI 기기의 연결과 차단이 가능하기 때문에 확장량이 크게 늘었다.
사이트 제목
우선 사용자로서 사용할 때의 간편한 체험을 해보세요.(Bluetooth MIDI 시스템 필요...: 내가 사용하는 장치
사이트 설명
Bluetooth 아이콘을 클릭/클릭하면 장치 검색이 시작됩니다.그리고 웹 브라우저가 보낸 지시에 따라 연결이 완료됩니다.
바로 코드를 써보도록 하겠습니다.
좋은 일만 있는 것 같은데 어렵죠?
(또는 코드를 여러 번 쓰고 싶지 않아서) 도서관으로 사용했어요.이 라이브러리는 현재 MIDI의 INPUT만 지원합니다.
위와 같은 시위 행진의 코드는 이↓다.
MIDI Message Viewr: GitHub
웹 블루투스에서 가장 짧은 Bluetooth MIDI +α하면파초↓.
sample_qiita.html
<html>
<head>
<title>Bluetooth MIDI Over Web Bluetooth | Sample Code</title>
<style>
.start-ble {
background-color: #bdbdbd;
border: none;
border-radius: 3px;
color: #ffffff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline:0;
}
.connected {
background-color: #4285f4 !important;
}
.message {
width: 400px;
padding: 20px;
}
</style>
</head>
<body>
<button id="start-ble" class="start-ble">Connect BLE MIDI Device</button>
<div id="message" class="message"></div>
<script type="module">
import { BLEMIDIUtils } from "./scripts/blemidiutils.js";
import { MIDIMessageUtils } from "./scripts/midimessageutils.js";
let startButton = document.querySelector("#start-ble");
let msgArea = document.querySelector("#message");
let bleMIDIUtls = new BLEMIDIUtils();
let midiMsgUtls = new MIDIMessageUtils();
bleMIDIUtls.setMIDIParser(midiMsgUtls.parseMIDIMessage.bind(midiMsgUtls));
let state = bleMIDIUtls.getDeviceConnected();
bleMIDIUtls.setnMidiEventHandleCallback( event => {
// MIDIメッセージを受け取るとevent.detailにMIDIメッセージが格納され、
// ここで受け取れますので、実行した動作をここに書くことが可能です。
let out = [];
for(let key in event.detail.property) {
out.push(key + " :: " + event.detail.property[key]);
}
msgArea.innerHTML = out.join("<br />")
});
bleMIDIUtls.setConnectedBleCallback( event => {
// 接続完了時に実行されます。
// 例えば、接続されたことUIに反映させる動作の指定が可能です。
startButton.innerHTML = "Disconnect BLE MIDI Device";
startButton.classList.add('connected');
console.log('[Device Connected]');
});
bleMIDIUtls.setDisconnectedBleCallback( event => {
// 切断完了時に実行されます。
// 例えば、切断されたことUIに反映させる動作の指定が可能です。
startButton.innerHTML = "Connect BLE MIDI Device";
startButton.classList.remove('connected');
msgArea.innerHTML = "";
console.log('[Device Disconnected]');
});
document.querySelector("#start-ble").addEventListener('mousedown', event => {
// 検索開始、切断を行うコードの例です。
// 以下は、ボタンが押されたときに検索開始、切断と同時にボタンの装飾を更新しています。
if(!bleMIDIUtls.getDeviceConnected()) {
bleMIDIUtls.startBle.bind(bleMIDIUtls)(event);
} else {
bleMIDIUtls.endBle.bind(bleMIDIUtls)(event);
}
}, false);
</script>
</body>
</html>
setnMidiEventHandleCallback()에 자신이 하고 싶은 동작을 적어서 할 수 있다.총결산
Bluetooth MIDI 장치를 웹 브라우저에 간단히 연결할 수 있습니다.블루투스로 제어하는 프로그램을 만들려면 반드시 사용하십시오👍
Reference
이 문제에 관하여(웹 Bluetooth에서 Bluetooth로 MIDI 장치 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryoyakawai/items/200b3b05d8bd0096f68d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
