webmidi.js usage

[schoko11]

Hi, there a some kind of newbie questions from my site.

I just got a cme WIDI MASTER and i managed it to connect it to my hardware midi device via bluetooth(WIN 10).
For controlling the hardware i used https://openstagecontrol.discourse.group/ before, this way i could "just" focus on controlling it by javascript (and have no to deal a lot with typical gui design stuff). The "problem" here is that it is a server client architecture, and so the initial setups have to be done by the user (and that led to the fact nobody wants to use it -> https://github.com/schoko11/KEKO-Kemper-Control and of course it is a beginner project)

So now i try to make this with webmidi.js.
I choose to do a rather old school approach (i do this on an offline WIN 10 machine, because on linux there seems to be no driver available ( like KORG BLE-MIDI Driver1.12 for WIN 10) and by just linking JS and CSS files locally -> bootstrap should do the trick instead of using angular, etc. )

Main questions / concepts i don't understand yet:

• has webmidi.enable to be called every time when a midi message should be sent ?
• a boilerplate for an midi in event listener (it should be active while loading the page, and stop when closing the web page)
• how can i easily monitor in out midi signals ?
• webmidi.iife.min.js.map file is needed otherwise i get an error(devtools failed to parse sourcemap) in the developer tools ???

this is the js file for tests, loaded at startup (sending cc 48 while loading the page does work like expected)

WebMidi
    .enable({sysex:true}) 
    .then(onEnabled)
    .catch(err => alert(err));

function onEnabled() { 
    console.log(WebMidi.inputs); 
    console.log(WebMidi.outputs); 
    var kemperMidiOut = WebMidi.getOutputByName("WIDI Master OUT")
    var kemperMidiIn = WebMidi.getInputByName("WIDI Master IN")
 
    kemperMidiIn.addListener("controlchange", e => { 
        console.log(`Received 'controlchange' message.`, e); 
        }, 
        {channels: [1, 2, 3]}    
    );
    kemperMidiOut.channels[1].sendControlChange(48,0)  //send cc 48 
    //console.log(WebMidi)  
}

Thanks, and sorry for the bad code formatting, i don't know why...

[djipco]

There's a lot to unpack here. First, I fixed the layout of your code. When you want to display a block of code, you need to enclose it in triple backticks.

 has webmidi.enable to be called every time when a midi message should be sent ?

No. Only once at the beginning.

a boilerplate for an midi in event listener (it should be active while loading the page, and stop when closing the web page)

I'm not sure I understand your question. Unless you really want to listen on channels 1, 2 and 3, you are better off adding the listener to the channel itself:

kemperMidiIn.channels[1].addListener("controlchange", e => { 
  console.log(`Received 'controlchange' message.`, e);
});

how can i easily monitor in out midi signals ?

You can use a 3rd party tool. I use MIDI Monitor on macOS. While I haven't tried it, there's a tool called MIDI View that is cross-platform. You can also add a listener for the "midimessage" event on the input. There's currently no way to listen for outbound messages but that's not a bad idea. I added it to the enhancements to evaluate on the wiki.

webmidi.iife.min.js.map file is needed otherwise i get an error(devtools failed to parse sourcemap) in the developer tools ???

The webmidi.iife.min.js.map file needs to be in the same directory as webmidi.iife.min.js.

[schoko11]

Thank you for the quick answer!

The reason why i asked " if webmidi.enable has to be called more than once " was because i couldn't use kemperMidiIn and kemperMidiOut outside of onEnabled() ...

VAR should make those object global... ?

Listening to outgoing signals would be really fine, my "old" project relies quite a lot on filtering outgoing messages...

[djipco]

VAR should make those object global... ?

No. If you want it global, declare the variable outside the function and assign a value to it inside the function.

Listening to outgoing signals would be really fine, my "old" project relies quite a lot on filtering outgoing messages...

You are the one responsible for sending outbound messages so you can filter them anyway you want without having to add a listener. Adding an event for outbound messages merely adds another way to do it.

[schoko11]

Oh yes! silly me!

[schoko11]

Sorry to get back on this again, and it has maybe nothing to do with webmidi.js

let kemperMidiOut = {};
let kemperMidiIn = {};
WebMidi
    .enable({sysex:true}) 
    .then(onEnabled)
    .catch(err => alert(err));
function onEnabled() { 
    console.log(WebMidi.inputs); 
    console.log(WebMidi.outputs); 
    //- array[0] on _midiOutput -> name "WIDI Master OUT" 
    let kemperMidiOut = WebMidi.getOutputByName("WIDI Master OUT")
    let kemperMidiIn = WebMidi.getInputByName("WIDI Master IN") 
    console.log(kemperMidiIn)  
}
console.log(kemperMidiOut)
kemperMidiOut.channels[1].sendControlChange(48,0)  //cc 48 next rig

the last console.log gives back an empty object (while there is no really need to define an empty object, i tried it this way -> i want it to understand).

Thanks!

[djipco]

You will have to read up on how promises work. If you want to display the outputs, you have to wait for the promise returned by calling enable() to resolve. If you move the last console.log() inside the onEnabled() function, you should get the desired output.

[schoko11]

var kemperMidiOut = {};
let kemperMidiIn = {};

let myPromise = new Promise(function(resolve,reject) { 
    if (WebMidi.enable({sysex:true})) {
        console.log("ok")
        resolve();
    } else {
        reject();
    }
});

myPromise.then (
    function() {	
        console.log(myPromise)  //gets promise  {<resolved>: object}
        //something like this did not work 
        //kemperMidiOut = WebMidi.getOutputByName("WIDI Master OUT")
    }).
    catch( 
        err =>  console.log("error" + err)
    );
    
//uncommenting this works
//WebMidi
//    .enable({sysex:true}) 
//    .then(onEnabled) 
//    .catch(err => alert(err));
function onEnabled()  { 
    console.log(WebMidi.outputs[0]); 
    console.log("-------------")
    kemperMidiOut = WebMidi.getOutputByName("WIDI Master OUT")
    kemperMidiOut.channels[1].sendControlChange(48,0)
}
console.log("############")

I really tried a lot but i can't set kemperMidiOut to be global available, i think i really missed the point. Any further help would be really nice...

[djipco]

You are way overdoing it! In version 3 of the library, WebMidi.enable() already returns a promise. The problem is that you declare a local variable with the same name as the global variable. You shouldn't use let in this case.

The enable() method is asynchronous. It takes a little while before it's done. So, until it's done, you cannot use sendControlChange(). By placing it outside the function, you are calling sendControlChange() right after enable() before the promise resolves.

Try something like this:

let kemperMidiOut;
let kemperMidiIn;

WebMidi
    .enable({sysex:true}) 
    .then(onEnabled)
    .catch(err => alert(err));

function onEnabled() { 
  kemperMidiOut = WebMidi.getOutputByName("WIDI Master OUT");
  kemperMidiIn = WebMidi.getInputByName("WIDI Master IN") ;
  kemperMidiOut.channels[1].sendControlChange(48,0)  //cc 48 next rig;
  console.log(kemperMidiOut)
}

[schoko11]

i allready tried what you suggested, but with this solution i don't have a way to supply different parameters(would be doable in supplying parms in "onEnabled" ), and it is executeable once...

let kemperMidiOut = WebMidi
    .enable({sysex:true}) 
    .then(function () {
        kemperMidiOut = WebMidi.getOutputByName("WIDI Master OUT")  
        console.log(WebMidi)
        return kemperMidiOut
    })         
    .catch(err => alert(err));

let kemperMidiIn = WebMidi
    .enable({sysex:true}) 
    .then(function () {
        kemperMidiIn = WebMidi.getOutputByName("WIDI Master In")  
        console.log("then in" + kemperMidiOut)
        return kemperMidiIn
    })         
    .catch(err => alert(err));    

//function to send midi out with async await, because of asynchronity of a promise
const sendKemperMidiOut = async (typ,par1,par2) => {
    const out = await kemperMidiOut;
    if (typ === 'CC') {
        out.channels[1].sendControlChange(par1,par2)
    }
    console.log("async await" + out)
}
console.log("kempermidiout " + kemperMidiOut)
//sendKemperMidiOut('CC',48,0);

i came along with this version, "sendKemperMidiout" can be called as wanted. There will be a lot to learn here, thanks for taking time to reply!