Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38226 > unrolled thread

Web midiAPI get name of sending device

Back to article view | Back to comp.lang.javascript

Contents

  Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-10 00:39 -0700
    Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-10 00:41 -0700
    Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-10 15:21 -0700
      Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-10 15:43 -0700
        Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-10 17:15 -0700
          Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-11 14:32 -0700
            Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-11 15:52 -0700
              Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-12 05:04 -0700
              Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-12 05:21 -0700
              Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-12 05:30 -0700
                Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-12 06:32 -0700
                Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-12 12:16 -0700
                  Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-12 12:55 -0700
                    Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-12 21:11 -0700
                      Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-13 02:16 -0700
                        Re: Web midiAPI get name of sending device "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-03-13 13:27 +0100
                          Re: Web midiAPI get name of sending device "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-03-13 13:34 +0100
                        Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-13 12:47 -0700
      Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-11 03:35 -0700
        Re: Web midiAPI get name of sending device Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-03-11 03:44 -0700
          Re: Web midiAPI get name of sending device "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-03-11 05:21 -0700

Page 1 of 2  [1] 2  Next page →

#38226 — Web midiAPI get name of sending device

When listening to multiple midi Interfaces
I can't see a way to get the informatioon about what port that actually sent the message, i can see it is due to some idiots implemented some weird next looping structure, where you can not get the index of the fucking port sending the message.

And i really can not think up a way to circumvent it?
But there is people more knowledgable then me, basicly i just want pickup and mirror information about what device sent the signal to computer.

function midiPortsListener(){
  var x=0;
  inputs = mid.inputs.values();
  for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
   input.value.onmidimessage = null; 
   var myVar = document.getElementById("inBox" + x).checked;
   console.log("******"+myVar);
   if(myVar==false){  }   
   else if(myVar==true){
   input.value.onmidimessage = onMIDIMessage;
   //Here a message fetched and passed to function onMIDIMessage
   //but input.value.onmidimessage is just the message
   //so where can i fetch the portname, this next thing scan every port
   //i've tried to remove null (messages calls) by adding condition
   // && input.value.onmidimessage != null above but it does not work.
   
   }
   x++;
   
  }
}

//Here is just how the port names listed into the option list
function listInPorts(){
  console.log("***********************listInPorts()");
  var x=0; portstring="<table border='1' bgcolor=cyan width='199'>";
  inputs = mid.inputs.values();
  //List ports in 
  Lportin = mid.inputs.values();
  for (listinput = Lportin.next(); listinput && !listinput.done; listinput = Lportin.next()) {
    var deviceIn = listinput.value.name;
    var optin = document.createElement("option");
    optin.text = deviceIn;
	//document.getElementById("in_portsel").add(optin);
    portstring=portstring+"<tr><td align=right><b>"+optin.text+"<input id='inBox"+x+"' type='checkbox' onChange='midiPortsListener()' checked></b></td></tr> ";
	x++;
  }
   document.getElementById("ports").innerHTML=portstring+"</table>";
}

[toc] | [next] | [standalone]

#38227

Den tisdag 10 mars 2020 kl. 08:39:24 UTC+1 skrev Jonas Thörnvall:
> When listening to multiple midi Interfaces
> I can't see a way to get the informatioon about what port that actually sent the message, i can see it is due to some idiots implemented some weird next looping structure, where you can not get the index of the fucking port sending the message.
> 
> And i really can not think up a way to circumvent it?
> But there is people more knowledgable then me, basicly i just want pickup and mirror information about what device sent the signal to computer.
> 
> function midiPortsListener(){
>   var x=0;
>   inputs = mid.inputs.values();
>   for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
>    input.value.onmidimessage = null; 
>    var myVar = document.getElementById("inBox" + x).checked;
>    console.log("******"+myVar);
>    if(myVar==false){  }   
>    else if(myVar==true){
>    input.value.onmidimessage = onMIDIMessage;
>    //Here a message fetched and passed to function onMIDIMessage
>    //but input.value.onmidimessage is just the message
>    //so where can i fetch the portname, this next thing scan every port
>    //i've tried to remove null (messages calls) by adding condition
>    // && input.value.onmidimessage != null above but it does not work.
>    
>    }
>    x++;
>    
>   }
> }
> 
> //Here is just how the port names listed into the option list
> function listInPorts(){
>   console.log("***********************listInPorts()");
>   var x=0; portstring="<table border='1' bgcolor=cyan width='199'>";
>   inputs = mid.inputs.values();
>   //List ports in 
>   Lportin = mid.inputs.values();
>   for (listinput = Lportin.next(); listinput && !listinput.done; listinput = Lportin.next()) {
>     var deviceIn = listinput.value.name;
>     var optin = document.createElement("option");
>     optin.text = deviceIn;
> 	//document.getElementById("in_portsel").add(optin);
>     portstring=portstring+"<tr><td align=right><b>"+optin.text+"<input id='inBox"+x+"' type='checkbox' onChange='midiPortsListener()' checked></b></td></tr> ";
> 	x++;
>   }
>    document.getElementById("ports").innerHTML=portstring+"</table>";
> }

By the way i created an open github respitory that can be downloaded and forked.
https://github.com/jonasth/midisequenser

[toc] | [prev] | [next] | [standalone]

#38228

On Tuesday, March 10, 2020 at 2:39:24 AM UTC-5, Jonas Thörnvall wrote:
> When listening to multiple midi Interfaces
> I can't see a way to get the informatioon about what port that actually sent the message, i can see it is due to some idiots implemented some weird next looping structure, where you can not get the index of the fucking port sending the message.
> 
> And i really can not think up a way to circumvent it?
> But there is people more knowledgable then me, basicly i just want pickup and mirror information about what device sent the signal to computer.


```JavaScript
navigator.requestMIDIAccess()
  .then(function(access) {

     // Get lists of available MIDI controllers
     const inputs = access.inputs.values();
     const outputs = access.outputs.values();

     access.onstatechange = function(e) {

       // Print information about the (dis)connected MIDI controller
       console.log(e.port.name, e.port.manufacturer, e.port.state);
     };
  });
```

[toc] | [prev] | [next] | [standalone]

#38229

On Tuesday, March 10, 2020 at 5:21:28 PM UTC-5, Michael Haufe (TNO) wrote:
> On Tuesday, March 10, 2020 at 2:39:24 AM UTC-5, Jonas Thörnvall wrote:
> > When listening to multiple midi Interfaces
> > I can't see a way to get the informatioon about what port that actually sent the message, i can see it is due to some idiots implemented some weird next looping structure, where you can not get the index of the fucking port sending the message.
> > 
> > And i really can not think up a way to circumvent it?
> > But there is people more knowledgable then me, basicly i just want pickup and mirror information about what device sent the signal to computer.
> 
> 
> ```JavaScript
> navigator.requestMIDIAccess()
>   .then(function(access) {
> 
>      // Get lists of available MIDI controllers
>      const inputs = access.inputs.values();
>      const outputs = access.outputs.values();
> 
>      access.onstatechange = function(e) {
> 
>        // Print information about the (dis)connected MIDI controller
>        console.log(e.port.name, e.port.manufacturer, e.port.state);
>      };
>   });
> ```

Other examples of usage:

https://webaudio.github.io/web-midi-api/#midiinputmap-interface
https://webaudio.github.io/web-midi-api/#MIDIPort

https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess

If you for some reason are not using a generic handler, perhaps you can capture the id of the port at the moment you attach the midimessage listener:

```
function myHandler(port,event) {
  ...
}

inputs.forEach( function( port, key ) {
    port.onmidimessage = myHandler.bind(port)
    ...
});
```

[toc] | [prev] | [next] | [standalone]

#38230

On Tuesday, March 10, 2020 at 5:43:12 PM UTC-5, Michael Haufe (TNO) wrote:

> If you for some reason are not using a generic handler, perhaps you can capture the id of the port at the moment you attach the midimessage listener:
> 
> ```
> function myHandler(port,event) {
>   ...
> }
> 
> inputs.forEach( function( port, key ) {
>     port.onmidimessage = myHandler.bind(port)
>     ...
> });
> ```


bugfix:

```
function myHandler(event) {
    var port = this
   ...
}
```

[toc] | [prev] | [next] | [standalone]

#38234

Den onsdag 11 mars 2020 kl. 01:15:46 UTC+1 skrev Michael Haufe (TNO):
> On Tuesday, March 10, 2020 at 5:43:12 PM UTC-5, Michael Haufe (TNO) wrote:
> 
> > If you for some reason are not using a generic handler, perhaps you can capture the id of the port at the moment you attach the midimessage listener:
> > 
> > ```
> > function myHandler(port,event) {
> >   ...
> > }
> > 
> > inputs.forEach( function( port, key ) {
> >     port.onmidimessage = myHandler.bind(port)
> >     ...
> > });
> > ```
> 
> 
> bugfix:
> 
> ```
> function myHandler(event) {
>     var port = this
>    ...
> }
> ```

I do not get it can you explain?

[toc] | [prev] | [next] | [standalone]

#38235

On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:

> I do not get it can you explain?

I'm not sure what else you need an explanation of.
You have your list of inputs and you can obtain the ports by iteration.
You can then attach an event listener to the port and optionally
pass along the port as an extra variable by binding the function;
*though I suspect that midiMessageEvent.target would be the port*
which would make that redundant so it might be worth testing that hypothesis.

In the event handler, you can then access the data, the timestamp
and anything else you might find relevant.

```
inputs.forEach( function( port, key ) {
   console.log(`name: ${port.name}, key: ${key}`)

   port.onmidimessage = onMessage.bind(port)
});

function onMessage(midiMessageEvent) {
    var {data, timeStamp} = midiMessageEvent,
        port = this; 
    //  port = midiMessageEvent.target

    // Do something ...
}
```

[toc] | [prev] | [next] | [standalone]

#38236

Den onsdag 11 mars 2020 kl. 23:52:58 UTC+1 skrev Michael Haufe (TNO):
> On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:
> 
> > I do not get it can you explain?
> 
> I'm not sure what else you need an explanation of.
> You have your list of inputs and you can obtain the ports by iteration.
> You can then attach an event listener to the port and optionally
> pass along the port as an extra variable by binding the function;
> *though I suspect that midiMessageEvent.target would be the port*
> which would make that redundant so it might be worth testing that hypothesis.
> 
> In the event handler, you can then access the data, the timestamp
> and anything else you might find relevant.
> 
> ```
> inputs.forEach( function( port, key ) {
>    console.log(`name: ${port.name}, key: ${key}`)
> 
>    port.onmidimessage = onMessage.bind(port)
> });
> 
> function onMessage(midiMessageEvent) {
>     var {data, timeStamp} = midiMessageEvent,
>         port = this; 
>     //  port = midiMessageEvent.target
> 
>     // Do something ...
> }
> ```

Well i have to try but i am not good with code i do not understand, what is port  in your code? I never seen bind before and is clueless about its function.

function midiPortsListener(){
  var x=0;
  inputs = mid.inputs.values();
  for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
   input.value.onmidimessage = null; 
   var myVar = document.getElementById("inBox" + x).checked;
   console.log("******"+myVar);
   if(myVar==false){  }   
   else if(myVar==true){ 
//input.value.onmidimessage = onMIDIMessage; 
//Something like this?????????
	input.onmidimessage = onMIDIMessage.bind(input);
   }
   x++;
   
  }
}


And how do i extract the "string?" to a variable within the message handling function? 
function onMIDIMessage(message) {
    //Just this?
    mirrorOut = input;
  
}

I am terrible reading others code understanding it, i do not get what bind it what it does and i do not get what port=this is supposed to mean.

I do get that it "probably" bind the portname="input???" to the message?
But how do you extract the "input???" from the message once it is bound and sent to onMIDIMessage(message)

Below here you have my full portaccess file
"Except for all my globally defined variables"

//MIDI ACCESS TO PORTS INITIATED
function midiInitiation(){
if (navigator.requestMIDIAccess) {
  navigator.requestMIDIAccess(
     {sysex: true}
   )
  .then(success,failure );
}
}

//IF MIDI ACCESS FAIL
function failure() {
  console.error('No access to your midi devices.' + +msg)
}

//IF MIDI ACCESS INITIATED
function success(midi) {
 
  mid = midi;
  listInPorts(mid);
  midiPortsListener();
  createOutports(mid);
  listOutPorts(mid);
  init();
}

function listInPorts(){
  console.log("***********************listInPorts()");
  var x=0; portstring="<table border='1' bgcolor=cyan width='199'>";
  inputs = mid.inputs.values();
  //List ports in 
  Lportin = mid.inputs.values();
  for (listinput = Lportin.next(); listinput && !listinput.done; listinput = Lportin.next()) {
    var deviceIn = listinput.value.name;
	
    var optin = document.createElement("option");
    optin.text = deviceIn;
	//document.getElementById("in_portsel").add(optin);
    portstring=portstring+"<tr><td align=right><b>"+optin.text+"<input id='inBox"+x+"' type='checkbox' onChange='midiPortsListener()' checked></b></td></tr> ";
	x++;
  }
   document.getElementById("ports").innerHTML=portstring+"</table>";
}

function midiPortsListener(){
  var x=0;
  inputs = mid.inputs.values();
  for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
   input.value.onmidimessage = null; 
   var myVar = document.getElementById("inBox" + x).checked;
   console.log("******"+myVar);
   if(myVar==false){  }   
   else if(myVar==true){ 
		//	input.value.onmidimessage = onMIDIMessage; 
		input.onmidimessage = onMIDIMessage.bind(input);
		}
   x++;
   
  }
}

function createOutports(mid){
  outputs = mid.outputs.values();
  for (var output = outputs.next(); output && !output.done; output = outputs.next()) {
  outportarr.push(output.value);
  }
}

//LISTPORTS AFTER MIDI SUCCESS "CALLED FROM MAIN INIT"
function listOutPorts(mid) {
  PORTout = outportarr[outportindex];
  Lportout = mid.outputs.values();
  for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next()) {
    var deviceOut = listoutput.value.name;
    var optout = document.createElement("option");
    optout.text = deviceOut;
    document.getElementById("out_portsel").add(optout);
  }
}

//MESSAGES SENT TO PORTS

function onMIDIMessage(message) {
  mess = message;
  
  //  console.log(mess.data[0]);
  if (mess.data[0] <240 ) {
    if (SF2PLAY==true) {
       sf2synth(message);
    } else { 
	   playbackPort(message); 
	}
    if (recordmidi) {
			record(message);
    }
	if (echo) {
		echoNotesCanvas(mess);
		checkMessageType(mess);
		drawpiano(mess);
   
   } else {
		checkMessageType(mess);
	}
  } 
}

function checkMessageType(mess) {
	if (mess.data[0] == 254) {
		// typeOfMessage = "ACTIVE SENSE";
	} else if (mess.data[0] > 127 && mess.data[0] < 144) {
		typeOfMessage = "NOTE ON	";
	} else if (mess.data[0] > 143 && mess.data[0] < 167) {
		typeOfMessage = "NOTE OFF  ";
	} else if (mess.data[0] > 223 && mess.data[0] < 240) {
		typeOfMessage = "PITCH BEND";	
	} else if(mess.data[0] > 175 && mess.data[0]< 192 && (mess.data[1]==1 || mess.data[1]==2)) {
		typeOfMessage = "MODULATION";
		document.getElementById("modID").value=mess.data[2];
		
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==7 ) {
		typeOfMessage = "VOLUME";
	    document.getElementById("volID").value=mess.data[2];
	} else if (mess.data[0] == 192 && mess.data[1]>0 && mess.data[1]<128) {
		//typeOfMessage = "PROGRAM CHANGE";
		
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==91 ) {
		typeOfMessage = "REVERB";
		document.getElementById("revID").value=mess.data[2];
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==93 ) {
		typeOfMessage = "CHORUS";
		document.getElementById("chorID").value=mess.data[2];
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==10 ) {
		typeOfMessage = "PAN";	
		document.getElementById("panID").value=mess.data[2];
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==64 ){
		typeOfMessage = "SUSTAIN/HOLD";
		document.getElementById("holdID").value=mess.data[2];
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==74 ) {
		typeOfMessage = "BRIGHTNESS";
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==71 ) {
		typeOfMessage = "HARMONIC CONTENT";
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==73 ) {
		typeOfMessage = "ATTACK TIME";
	} else if(mess.data[0] > 175 && mess.data[0]< 192 &&  mess.data[1]==72 ) {
		typeOfMessage = "RELEASE TIME";
	} else if (mess.data[0] == 176 && mess.data[1]==32){
		if(mess.data[2]==0){ typeOfMessage = "BANK CHANGE TO "+mess.data[2];  }
		else if(mess.data[2]==1){ typeOfMessage = "BANK CHANGE TO "+mess.data[2];}
		else if(mess.data[2]==2){ typeOfMessage = "BANK CHANGE TO "+mess.data[2]; }
		else if(mess.data[2]==3){ typeOfMessage = "BANK CHANGE T0 "+mess.data[2]; }
		else { typeOfMessage = "BANK CHANGE T0 GM"; 
		}	
	} else {
	  typeOfMessage = "OTHER CC";
	}
}

//ECHO *ANY* PLAYED KEY MESSAGE TO THE SELECTED OUTPORT
function playbackPort(mess) {
//console.log("MIDUT "+mess.data[0]+" "+mess.data[1]+" "+mess.data[2]);

if (mess.data[0] == 144 && trackMidiCh != 1) {
   mess.data[0] = NOTE_ON;
}

else if (mess.data[0] == 128 && trackMidiCh != 1) {
  mess.data[0] = NOTE_OFF;
}

else if (mess.data[0] == 176){
	mess.data[0]=175+trackMidiCh;
} 

else if (mess.data[0] == 224){
	mess.data[0]=223+trackMidiCh;
} 

  var noteMessage = [mess.data[0], mess.data[1], mess.data[2]];
  PORTout.send(noteMessage);
}

[toc] | [prev] | [next] | [standalone]

#38237

Den onsdag 11 mars 2020 kl. 23:52:58 UTC+1 skrev Michael Haufe (TNO):
> On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:
> 
> > I do not get it can you explain?
> 
> I'm not sure what else you need an explanation of.
> You have your list of inputs and you can obtain the ports by iteration.
> You can then attach an event listener to the port and optionally
> pass along the port as an extra variable by binding the function;
> *though I suspect that midiMessageEvent.target would be the port*
> which would make that redundant so it might be worth testing that hypothesis.
> 
> In the event handler, you can then access the data, the timestamp
> and anything else you might find relevant.
> 
> ```
> inputs.forEach( function( port, key ) {
>    console.log(`name: ${port.name}, key: ${key}`)
> 
>    port.onmidimessage = onMessage.bind(port)
> });
> 
> function onMessage(midiMessageEvent) {
>     var {data, timeStamp} = midiMessageEvent,
>         port = this; 
>     //  port = midiMessageEvent.target
> 
>     // Do something ...
> }
> ```

Well i got it working but i am pretty clueless, i doubt i really understand it.
I extract the name and bind it? Hope it just not fetch the last port have to check. And what does this do portname=this?????

function midiPortsListener(){
  var x=0;
  inputs = mid.inputs.values();
  for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
   input.value.onmidimessage = null; 
   var myVar = document.getElementById("inBox" + x).checked;
   console.log("******"+myVar);
   if(myVar==false){  }   
   else if(myVar==true){ 
			//input.value.onmidimessage = onMIDIMessage; 
			portname=input.value.name;
		input.value.onmidimessage = onMIDIMessage.bind(portname);
		}
   x++;
   
  }
}

function onMIDIMessage(message) {
  portname=this;
  console.log(portname);
  mess = message;
  if (mess.data[0] <240 ) {
    if (SF2PLAY==true) {
       sf2synth(message);
    } else { 
	   playbackPort(message); 
	}
    if (recordmidi) {
			record(message);
    }
	if (echo) {
		echoNotesCanvas(mess);
		checkMessageType(mess);
		drawpiano(mess);
   
   } else {
		checkMessageType(mess);
	}
  } 
}

[toc] | [prev] | [next] | [standalone]

#38238

Den onsdag 11 mars 2020 kl. 23:52:58 UTC+1 skrev Michael Haufe (TNO):
> On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:
> 
> > I do not get it can you explain?
> 
> I'm not sure what else you need an explanation of.
> You have your list of inputs and you can obtain the ports by iteration.
> You can then attach an event listener to the port and optionally
> pass along the port as an extra variable by binding the function;
> *though I suspect that midiMessageEvent.target would be the port*
> which would make that redundant so it might be worth testing that hypothesis.
> 
> In the event handler, you can then access the data, the timestamp
> and anything else you might find relevant.
> 
> ```
> inputs.forEach( function( port, key ) {
>    console.log(`name: ${port.name}, key: ${key}`)
> 
>    port.onmidimessage = onMessage.bind(port)
> });
> 
> function onMessage(midiMessageEvent) {
>     var {data, timeStamp} = midiMessageEvent,
>         port = this; 
>     //  port = midiMessageEvent.target
> 
>     // Do something ...
> }
> ```

Miraculously it seem to attach the portname and somehow portname=this extract it? Well it react when i switch interface, but i have no idea if what i did was what you instructed / intended for me to do.

If i do it the wrong way tell me, alot of things like bind and this is  new for me both functional wise and syntactical wise.

I am a dinsosaur i guess lol.

[toc] | [prev] | [next] | [standalone]

#38239

Den torsdag 12 mars 2020 kl. 13:30:54 UTC+1 skrev Jonas Thörnvall:
> Den onsdag 11 mars 2020 kl. 23:52:58 UTC+1 skrev Michael Haufe (TNO):
> > On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:
> > 
> > > I do not get it can you explain?
> > 
> > I'm not sure what else you need an explanation of.
> > You have your list of inputs and you can obtain the ports by iteration.
> > You can then attach an event listener to the port and optionally
> > pass along the port as an extra variable by binding the function;
> > *though I suspect that midiMessageEvent.target would be the port*
> > which would make that redundant so it might be worth testing that hypothesis.
> > 
> > In the event handler, you can then access the data, the timestamp
> > and anything else you might find relevant.
> > 
> > ```
> > inputs.forEach( function( port, key ) {
> >    console.log(`name: ${port.name}, key: ${key}`)
> > 
> >    port.onmidimessage = onMessage.bind(port)
> > });
> > 
> > function onMessage(midiMessageEvent) {
> >     var {data, timeStamp} = midiMessageEvent,
> >         port = this; 
> >     //  port = midiMessageEvent.target
> > 
> >     // Do something ...
> > }
> > ```
> 
> Miraculously it seem to attach the portname and somehow portname=this extract it? Well it react when i switch interface, but i have no idea if what i did was what you instructed / intended for me to do.
> 
> If i do it the wrong way tell me, alot of things like bind and this is  new for me both functional wise and syntactical wise.
> 
> I am a dinsosaur i guess lol.

Thanks Michael!
Now it will tell what port was triggered to send message.
https://midisequenser.000webhostapp.com/

[toc] | [prev] | [next] | [standalone]

#38240

On Thursday, March 12, 2020 at 7:30:54 AM UTC-5, Jonas Thörnvall wrote:
> Den onsdag 11 mars 2020 kl. 23:52:58 UTC+1 skrev Michael Haufe (TNO):
> > On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:
> > 
> > > I do not get it can you explain?
> > 
> > I'm not sure what else you need an explanation of.
> > You have your list of inputs and you can obtain the ports by iteration.
> > You can then attach an event listener to the port and optionally
> > pass along the port as an extra variable by binding the function;
> > *though I suspect that midiMessageEvent.target would be the port*
> > which would make that redundant so it might be worth testing that hypothesis.
> > 
> > In the event handler, you can then access the data, the timestamp
> > and anything else you might find relevant.
> > 
> > ```
> > inputs.forEach( function( port, key ) {
> >    console.log(`name: ${port.name}, key: ${key}`)
> > 
> >    port.onmidimessage = onMessage.bind(port)
> > });
> > 
> > function onMessage(midiMessageEvent) {
> >     var {data, timeStamp} = midiMessageEvent,
> >         port = this; 
> >     //  port = midiMessageEvent.target
> > 
> >     // Do something ...
> > }
> > ```
> 
> Miraculously it seem to attach the portname and somehow portname=this extract it? Well it react when i switch interface, but i have no idea if what i did was what you instructed / intended for me to do.
> 
> If i do it the wrong way tell me, alot of things like bind and this is  new for me both functional wise and syntactical wise.
> 
> I am a dinsosaur i guess lol.


I made a guess without testing. I think you should try to see if the event target is the port. If it is then you wouldn't need nor want the bind:

```
inputs.forEach( function( port, key ) {
   console.log(`name: ${port.name}, key: ${key}`)

   port.onmidimessage = onMessage
});

function onMessage(midiMessageEvent) {
    var {data, timeStamp, target} = midiMessageEvent,
        port = target

    // Do something ...
}
```

[toc] | [prev] | [next] | [standalone]

#38241

Den torsdag 12 mars 2020 kl. 20:16:41 UTC+1 skrev Michael Haufe (TNO):
> On Thursday, March 12, 2020 at 7:30:54 AM UTC-5, Jonas Thörnvall wrote:
> > Den onsdag 11 mars 2020 kl. 23:52:58 UTC+1 skrev Michael Haufe (TNO):
> > > On Wednesday, March 11, 2020 at 4:32:29 PM UTC-5, Jonas Thörnvall wrote:
> > > 
> > > > I do not get it can you explain?
> > > 
> > > I'm not sure what else you need an explanation of.
> > > You have your list of inputs and you can obtain the ports by iteration.
> > > You can then attach an event listener to the port and optionally
> > > pass along the port as an extra variable by binding the function;
> > > *though I suspect that midiMessageEvent.target would be the port*
> > > which would make that redundant so it might be worth testing that hypothesis.
> > > 
> > > In the event handler, you can then access the data, the timestamp
> > > and anything else you might find relevant.
> > > 
> > > ```
> > > inputs.forEach( function( port, key ) {
> > >    console.log(`name: ${port.name}, key: ${key}`)
> > > 
> > >    port.onmidimessage = onMessage.bind(port)
> > > });
> > > 
> > > function onMessage(midiMessageEvent) {
> > >     var {data, timeStamp} = midiMessageEvent,
> > >         port = this; 
> > >     //  port = midiMessageEvent.target
> > > 
> > >     // Do something ...
> > > }
> > > ```
> > 
> > Miraculously it seem to attach the portname and somehow portname=this extract it? Well it react when i switch interface, but i have no idea if what i did was what you instructed / intended for me to do.
> > 
> > If i do it the wrong way tell me, alot of things like bind and this is  new for me both functional wise and syntactical wise.
> > 
> > I am a dinsosaur i guess lol.
> 
> 
> I made a guess without testing. I think you should try to see if the event target is the port. If it is then you wouldn't need nor want the bind:
> 
> ```
> inputs.forEach( function( port, key ) {
>    console.log(`name: ${port.name}, key: ${key}`)
> 
>    port.onmidimessage = onMessage
> });
> 
> function onMessage(midiMessageEvent) {
>     var {data, timeStamp, target} = midiMessageEvent,
>         port = target
> 
>     // Do something ...
> }
> ```

My skills about events only reach to you create a listener, but in midi api it seem implicit? I am not familiar with target.

But i see "in your code", that you seem to say there is three parts in the midiMessageEvent "that the midiAPI created, ...because i have not..."

I have generated timestamps myself are you saying they are autogenerated together with the port and in the "autogenerated as part of a sent message with 3 parts"?

[toc] | [prev] | [next] | [standalone]

#38242

On Thursday, March 12, 2020 at 2:55:43 PM UTC-5, Jonas Thörnvall wrote:
> 
> My skills about events only reach to you create a listener, but in midi api it seem implicit? I am not familiar with target.
> 
> But i see "in your code", that you seem to say there is three parts in the midiMessageEvent "that the midiAPI created, ...because i have not..."
> 
> I have generated timestamps myself are you saying they are autogenerated together with the port and in the "autogenerated as part of a sent message with 3 parts"?

According to the spec [1] MIDIMessageEvent has a data property. MIDIMessageEvent inherits from Event. Event has a target and a timeStamp property [2]. To quote:

"An event object implementing this interface is passed to a MIDIInput's onmidimessage handler when MIDI messages are received. Note that the DOM Event timeStamp attribute is defined as a DOMHighResTimeStamp, and represents the high-resolution time of when the event was received or is to be sent."


[1] <https://webaudio.github.io/web-midi-api/#MIDIMessageEvent>
[2] <https://dom.spec.whatwg.org/#event>

[toc] | [prev] | [next] | [standalone]

#38243

Den fredag 13 mars 2020 kl. 05:11:58 UTC+1 skrev Michael Haufe (TNO):
> On Thursday, March 12, 2020 at 2:55:43 PM UTC-5, Jonas Thörnvall wrote:
> > 
> > My skills about events only reach to you create a listener, but in midi api it seem implicit? I am not familiar with target.
> > 
> > But i see "in your code", that you seem to say there is three parts in the midiMessageEvent "that the midiAPI created, ...because i have not..."
> > 
> > I have generated timestamps myself are you saying they are autogenerated together with the port and in the "autogenerated as part of a sent message with 3 parts"?
> 
> According to the spec [1] MIDIMessageEvent has a data property. MIDIMessageEvent inherits from Event. Event has a target and a timeStamp property [2]. To quote:
> 
> "An event object implementing this interface is passed to a MIDIInput's onmidimessage handler when MIDI messages are received. Note that the DOM Event timeStamp attribute is defined as a DOMHighResTimeStamp, and represents the high-resolution time of when the event was received or is to be sent."
> 
> 
> [1] <https://webaudio.github.io/web-midi-api/#MIDIMessageEvent>
> [2] <https://dom.spec.whatwg.org/#event>

 var {data, timeStamp, target} = midiMessageEvent,
So in your line above data, timeStamp, target are reserved words or created vars for holding the "three attributes?" of object midiMessageEvent which you "extract/read out"? You could had called them ini, mini, moe it is not reserved words?

When you read out these object "attributes?" is the order of importance, or could it as well been.

var {target, timeStamp, data} = midiMessageEvent

is midiMessageEvent an event or an object "i can see it says event but...", i think the language of Javascript start to get overpopulated with unnecessary lingo that do not directly help.

[toc] | [prev] | [next] | [standalone]

#38244

<jonas.thornvall@gmail.com> wrote on 13 Mar 2020 in comp.lang.javascript: 
> So in your line above data, timeStamp, target are reserved words 
> or created vars for holding the "three attributes?

let {data, timeStamp, target} = midiMessageEvent,

is an equivalent of:

let timeStamp = midiMessageEvent.timeStamp;
let data = midiMessageEvent.data;
let target = midiMessageEvent.target;

=====================================

let ascii = {
    a: 97,
    b: 98,
    c: 99
};

let {a, b, c} = ascii;

a // returns: 97

var {c, a, b} = ascii;

// 'var' above required,as:
// let {c, a, b} = ascii;
// would give error: "Identifier 'c' has already been declared"
// {c, a, b} = ascii;
// would give error: "Uncaught SyntaxError: Unexpected token '='"

a // returns: 97

var {c, a, e} = ascii;

e // returns: undefined

let {c: qq, a: ww, b: ee} = ascii;

ww // returns: 97
qq // returns: 99

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#38245

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 13 Mar 2020 in 
comp.lang.javascript:

> <jonas.thornvall@gmail.com> wrote on 13 Mar 2020 in comp.lang.javascript: 
>> So in your line above data, timeStamp, target are reserved words 
>> or created vars for holding the "three attributes?
> 
> let {data, timeStamp, target} = midiMessageEvent;
> 
> is an equivalent of:
> 
> let timeStamp = midiMessageEvent.timeStamp;
> let data = midiMessageEvent.data;
> let target = midiMessageEvent.target;

Or:

let {data, timeStamp, target} = midiMessageEvent;

is shorthand for:

let {data: data, timeStamp: timeStamp, target: target} = midiMessageEvent;




-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#38246

On Friday, March 13, 2020 at 4:16:37 AM UTC-5, Jonas Thörnvall wrote:
> Den fredag 13 mars 2020 kl. 05:11:58 UTC+1 skrev Michael Haufe (TNO):
> [...]
>
>  var {data, timeStamp, target} = midiMessageEvent,
> So in your line above data, timeStamp, target are reserved words or created vars for holding the "three attributes?" of object midiMessageEvent which you "extract/read out"? You could had called them ini, mini, moe it is not reserved words?

They're variables created for holding the values of the corresponding properties on the object.

See Evertjan's response for explanation. Also:

<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment>

> var {target, timeStamp, data} = midiMessageEvent
> 
> is midiMessageEvent an event or an object "i can see it says event but...", i think the language of Javascript start to get overpopulated with unnecessary lingo that do not directly help.

It's an event object. I called it that to make it clear which type of event.

[toc] | [prev] | [next] | [standalone]

#38231

Den tisdag 10 mars 2020 kl. 23:21:28 UTC+1 skrev Michael Haufe (TNO):
> On Tuesday, March 10, 2020 at 2:39:24 AM UTC-5, Jonas Thörnvall wrote:
> > When listening to multiple midi Interfaces
> > I can't see a way to get the informatioon about what port that actually sent the message, i can see it is due to some idiots implemented some weird next looping structure, where you can not get the index of the fucking port sending the message.
> > 
> > And i really can not think up a way to circumvent it?
> > But there is people more knowledgable then me, basicly i just want pickup and mirror information about what device sent the signal to computer.
> 
> 
> ```JavaScript
> navigator.requestMIDIAccess()
>   .then(function(access) {
> 
>      // Get lists of available MIDI controllers
>      const inputs = access.inputs.values();
>      const outputs = access.outputs.values();
> 
>      access.onstatechange = function(e) {
> 
>        // Print information about the (dis)connected MIDI controller
>        console.log(e.port.name, e.port.manufacturer, e.port.state);
>      };
>   });
> ```

Isn't your example dealing with if the device is attached or not? not if it sending messages?

I want to see which of the midimessages responsible for a midimessage, when it is generated.

[toc] | [prev] | [next] | [standalone]

#38232

Den onsdag 11 mars 2020 kl. 11:35:52 UTC+1 skrev Jonas Thörnvall:
> Den tisdag 10 mars 2020 kl. 23:21:28 UTC+1 skrev Michael Haufe (TNO):
> > On Tuesday, March 10, 2020 at 2:39:24 AM UTC-5, Jonas Thörnvall wrote:
> > > When listening to multiple midi Interfaces
> > > I can't see a way to get the informatioon about what port that actually sent the message, i can see it is due to some idiots implemented some weird next looping structure, where you can not get the index of the fucking port sending the message.
> > > 
> > > And i really can not think up a way to circumvent it?
> > > But there is people more knowledgable then me, basicly i just want pickup and mirror information about what device sent the signal to computer.
> > 
> > 
> > ```JavaScript
> > navigator.requestMIDIAccess()
> >   .then(function(access) {
> > 
> >      // Get lists of available MIDI controllers
> >      const inputs = access.inputs.values();
> >      const outputs = access.outputs.values();
> > 
> >      access.onstatechange = function(e) {
> > 
> >        // Print information about the (dis)connected MIDI controller
> >        console.log(e.port.name, e.port.manufacturer, e.port.state);
> >      };
> >   });
> > ```
> 
> Isn't your example dealing with if the device is attached or not? not if it sending messages?
> 
> I want to see which of the midimessages responsible for a midimessage, when it is generated.

Sorry which of the mididevices that sent message, that is what i am after, not if it is connected.

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web