javascript - WEB MIDI + CSS 变量

Question

我正在尝试连接 MIDI 控制器以通过“font-variation-settings”css 属性直接控制 CSS 变量。

MIDI 控制数据以 UInt8 数组的形式出现，例如 [176,0,127]，其中第二个值是控制 ID，第三个值是控制值。

元素的 CSS 如下所示：

字体变化设置：'ABC' 99，'DEF 400；

我已经制定了一个基本实现，我可以使用下面的代码更新 ABC。

messageData.data 是 UInt8 数组

if (messageData.data[1] == 0) {
    var abc = messageData.data[2];  
}

var settings = "font-variation-settings: 'ABC' " + abc + ";" ;

text.setAttribute("style", ('font-variation-settings', settings));

问题是，如果我将它扩展为具有两个变量，例如下面的代码。当我移动第二个 MIDI 控件（控制 DEF）时，它会覆盖 ABC 值，而我想将它们一起应用。

if (messageData.data[1] == 0) {
        var abc = messageData.data[2];  
} else (messageData.data[1] == 1) {
        var def = messageData.data[2];  
}

var settings = "font-variation-settings: 'ABC' " + abc + ', DEF' " + def + ";" ;

text.setAttribute("style", ('font-variation-settings', settings));

关于如何克服这个问题的任何想法？