1. ryoyakawai

    No comment

    ryoyakawai
Changes in body
Source | HTML | Preview
@@ -88,31 +88,36 @@
<script>
const MIDI = { inputs: [], outputs: [] };
startMIDIAccess();
function startMIDIAccess() {
- navigator.requestMIDIAccess({sysex:false}).then(successCallback, errorCallback);
- function successCallback(access) {
- let iItr = access.inputs.values(), oItr = access.outputs.values();
- for(let i=iItr.next(); !i.done; i=iItr.next()) MIDI.inputs.push(i.value);
- for(let o=oItr.next(); !o.done; o=iItr.next()) MIDI.outputs.push(o.value);
- setDeviceToList('midiinput', MIDI.inputs);
- setDeviceToList('midioutput', MIDI.outputs);
-
- //(!!!!....ここに続けて処理を書く....!!!!)
-
- }
+ navigator.requestMIDIAccess({sysex:false}).then(successCallback, errorCallback)
+         .then(() => {
+ //(!!!!....ここに続けて処理を書く....!!!!)
+ });
+ function successCallback(midiaccess) {
+ const pullDevices = dIterator => {
+ let devices = []
+ for (let o = dIterator.next(); !o.done; o = dIterator.next()) {
+ devices.push(o.value)
+ }
+ return devices;
+ };
+ const midiDevices = {
+ inputs: pullDevices(midiaccess.inputs.values()),
+ outputs: pullDevices(midiaccess.outputs.values())
+ }
+ return midiDevices;
+ };
function errorCallback() {
console.error('[ERROR] requestMIDIAccess()', error);
}
}
function setDeviceToList(elemId, devices) {
let elem = document.querySelector('#' + elemId)
for(let i=0; i<devices.length; i++) {
- let option = document.createElement('option');
- option.text = devices[i].name;
- option.id = devices[i].id;
+ let option = new Option(devices[i].name, devices[i].id);
elem.appendChild(option);
}
}
</script>
</body>
@@ -158,13 +163,11 @@
}
}
function setDeviceToList(elemId, devices) {
let elem = document.querySelector('#' + elemId)
for(let i=0; i<devices.length; i++) {
- let option = document.createElement('option');
- option.text = devices[i].name;
- option.id = devices[i].id;
+ let option = new Option(devices[i].name, devices[i].id);
elem.appendChild(option);
}
}
}());
</script>
@@ -177,5 +180,10 @@
Promise版、async/await版のどちらにも``(!!!!....ここに続けて処理を書く....!!!!)``を挟んでいますが、ここに続けて処理を追加していくことになるのです。Promise版、async/await版のどちらがよさそうですか?
個人的にはasync/await版のが見やすいし、メンテナンスをすることを考えると直感的で分かりやすいくてasync/awaitのがうれしいです。
#まとめ
async/await推し推しで書いてしまいましたが、実際に使ってみると「Promiseには戻れない・・・」と私は感じています。ほんとに見通しもよく、キレイでそして便利なんですよね。ということで、気になる方は是非試してみてくださいっ🎄
+
+
+#更新
+
+- 2018/6/27 シンプルなコードを更新しました