MIDIComponent
A MIDI controller sends signals to your computer, similar to a keyboard or a mouse. Most commonly MIDI controllers have buttons, sliders and knobs that you can hook up to software. There is a wide variety of hardware MIDI controllers available on the market, many of them connect over USB. There are also MIDI controller apps, that connect over Bluetooth.
The MIDIComponent gives you the ability to work with MIDI
controllers directly in Framer and in browsers that support the Web MIDI API.
译:MIDI控制器将信号发送到您的计算机,类似于一个键盘或鼠标。最常见的MIDI控制器按钮滑块和旋钮,你可以连接软件。有各种各样的硬件MIDI控制器可在市场上,许多它们通过USB连接。还有MIDI控制器的应用,通过蓝牙连接。
与MIDI MIDIComponent给你的工作能力控制器直接在帧和Web浏览器都支持MIDI API。
Get Started
- Connect a MIDI device
译: MIDI设备连接 - Open Framer and paste the following code
译:打Framer并粘贴以下代码
midi = new MIDIComponent
midi.onValueChange (value, info) ->
print value, info
Now, when you change a button on the MIDI device you will see the values being printed, for example if you move a control from the start to end position:
译:现在,当你改变时,MIDI设备上的一个按钮你会看到打印的值,例如,如果您从开始到结束位置移动控件:
» 0, {source:"111955983", channel:1, control:2}
» 1, {source:"111955983", channel:1, control:2}
» 2, {source:"111955983", channel:1, control:2}
…
» 125, {source:"111955983", channel:1, control:2}
» 126, {source:"111955983", channel:1, control:2}
» 127, {source:"111955983", channel:1, control:2}
By default, MIDIComponent will listen to MIDI signals from all controls and note buttons on all devices coming over any channel. You can use the properties you see printed above to filter the signal events. That way you can hook up control number 2 to a slider, for example:
译:默认情况下,MIDIComponent会听MIDI信号从所有控件,并注意到来所有频道所有设备上的按钮。您可以使用属性你看到上面印有过滤信号事件。这样你就可以控制2号挂钩到一个滑块,例如:
midi = new MIDIComponent
control: 2
slider = new SliderComponent
point: Align.center
max: 127
midi.onValueChange (value) ->
slider.value = value
The output values from MIDI are always between 0 and 127, but if you want to use the value to set a property that has a different range, you can use min and max to modulate the value for you. For example, the RGB components in a color range from 0 to 255, so you can use:
译:从MIDI输出值总是0和127之间,但如果你想使用已拥有不同系列的属性设置的值,可以使用min和max帮你调节值。例如,RGB颜色范围从0到255中的组件,因此您可以使用:
midi = new MIDIComponent
min: 0
max: 255
midi.onValueChange (value) ->
Screen.backgroundColor = new Color
r: value, g: 0, b: 0