MIDI (Musical Instrument Digital Interface)
midi携带的信息:pitch, velocity (how loudly or softly a note is played), vibrato, volume, panning, modulation, and more
midi 发送信息给daw :digital audio workstation convert the signals into written notation,

一 navigator.requestMIDIAccess()
4. request access to any MIDI devices (inputs or outputs) connected to your computer
5. The requestMIDIAccess() method returns a promise,so we need to establish success and failure callbacks.

if (navigator.requestMIDIAccess) {console.log('This browser supports WebMIDI!');
} else {console.log('WebMIDI is not supported in this browser.');
}

二 MIDIAccess
6. contains references to all available inputs (such as piano keyboards) and outputs (such as synthesizers).
7.

navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);function onMIDISuccess(midiAccess) {console.log(midiAccess);var inputs = midiAccess.inputs;var outputs = midiAccess.outputs;
}function onMIDIFailure() {console.log('Could not access your MIDI devices.');
}

三 MIDIMessageEvent

inputs and outputs with a MIDIMessageEvent object.
contain information about the MIDI event such as pitch, velocity (how softly or loudly a note is played), timing, and more.
data array[144, 72, 64] `[what type of command was sent, note value, velocity]
1. type of command
  144 signifies a “note on” event, and 128 typically signifies a “note off” event
2. Note values
  Note values are on a range from 0–127,“middle C” is 60;88-key piano has a value of 21, and the highest note is 108.
3. Velocity values
  a. range from 0–127 (softest to loudest). softest possible “note on” velocity is 1.
  b. A velocity of 0 is sometimes used in conjunction

function getMIDIMessage(message) {var command = message.data[0];var note = message.data[1];var velocity = (message.data.length > 2) ? message.data[2] : 0; // a velocity value might not be included with a noteOff commandswitch (command) {case 144: // noteOnif (velocity > 0) {noteOn(note, velocity);} else {noteOff(note);}break;case 128: // noteOffnoteOff(note);break;// we could easily expand this switch statement to cover other types of commands such as controllers or sysex}
}

`onmidimessage` 监听输入

function onMIDISuccess(midiAccess) {for (var input of midiAccess.inputs.values())input.onmidimessage = getMIDIMessage;}
}function getMIDIMessage(midiMessage) {console.log(midiMessage);
}

例子

参考:
https://www.smashingmagazine.com/2018/03/web-midi-api/

web-midi-api相关推荐

Web MIDI API W3C
Musical Instrument Digital Interface (MIDI) protocol是乐器(instruments),控制器(controllers)和电脑(computers)之 ...
Web MIDI简介
"有关Web MIDI的教程? 在2016年? 你开玩笑的对吧?" 没有! 这不是你的想法! 对于我们自1990年代以来一直使用网络的用户来说," Web MIDI&qu ...
Web MIDI 入门：如何用电子钢琴做一款游戏
译注:本文是作者 Peter Anglea 发布在 <SmashingMagazine>上的一篇介绍 Web MIDI API 及用其开发一款电子钢琴游戏的文章.(转载请注明出处) 原文链 ...
【Web】1326- 深入浅出 Web Audio API
前言 2011被提出,同年草案被Google Chrome和Mozilla Firefox实现在此之前Web音频较为原始,无法应付较为复杂的应用场景,例如Web游戏或互动应用旨在提供全套Web音频 ...
如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音
by _haochuan 通过_haochuan 如何使用Web Audio API听到" Yanny"和" Laurel"的声音 (How you can h ...
CSS Animations vs Web Animations API
作者:Ollie Williams 原文:CSS Animations vs Web Animations API 在 JavaScript 有一个原生动画 API 叫 Web Animations ...
rest服务器性能,基于真实应用环境下的 WEB REST API 性能测试
作为一名自由WEB开发工作者,我对各种框架和技术的性能非常感兴趣,但是我们在网络上看到的测试大多数都只是考虑到 Hello World 的例子. 当我们构建真实的应用程序的时候,有更多的方面需要考虑, ...
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
Web动画API教程：可爱的运动路径（Motion Path)
这是介绍浏览器中web动画API的系列教程的第五篇.如果你有什么问题/想法,或者发现我理解错了规范的内容,或是希望我在接下来的文章中对某部分内容进行探讨的话,请在Twitter给我留言吧~@dancw ...
VMware 虚拟化编程(3) —VMware vSphere Web Service API 解析
目录目录前文列表 VMware vSphere Web Services API VMware vSphere Web Services SDK vSphere WS API 中的托管对象 Man ...

web-midi-api

`onmidimessage` 监听输入

例子

web-midi-api相关推荐

最新文章

热门文章

web-midi-api

onmidimessage 监听输入

例子

web-midi-api相关推荐

最新文章

热门文章

`onmidimessage` 监听输入