gropramming: 001 - Web MIDI API

hey everybody its Jake right now I think a lot of us are going through some stuff with everything that's going on and so I figured it would probably be a good time to have some fun and do some coding so this is a series that I'm currently calling grow cramming which is just going to be fun kind of off-the-cuff programming today we're going to get into MIDI and MIDI controllers and we're gonna learn how they work and then we are going to use them to do fun things in a web browser so this is going to cover modules JavaScript modules it's we're gonna basically cover the MIDI API which is kind of experimental it works in Chrome and edge right now and we're just going to do it all as vanilla as possible so we're gonna be just dealing with the core bits here of JavaScript HTML and CSS so I've done some work to kind of like make some headway so that we're not wasting a bunch of time because there's a bunch of things we could waste time on but I kind of built kind of a MIDI library for us so that we can kind of like get a jump start here so first things first let's take a peek at our setup so we've got a project folder called 0:01 midi got an index dot HTML app das app dot CSS and then a script folder with a MIDI J s which is my MIDI library so let's look at index dot HTML here we are pulling in a font called luckiest guy from google fonts we are pulling in our app dot CSS file and then down here we are using script type module for our script MIDI JS file and our app dot JS file the reason we are doing type module is because we want to be able to import from other files so I believe we have to include both of these here once they're registered as modules we can then refer to them like this so I'm gonna import MIDI from script / MIDI and so if we look at scripts MIDI here script / MIDI export class MIDI so when we import MIDI we are grabbing whatever is exported in this file called MIDI so let's take a peek at so one thing you need to know with type module is that just opening this as a static file isn't gonna work we have to actually run like it under local host and the easiest way to do that is gonna be on a Mac we've got simple HTTP server which like let's look here Python m simple HTTP server and then we specify a port this comes by default on a Mac I think Python is like 2.7 or something if you're using a later version of Python there's another command to run a local server static file server but basically we get into the folder which is 0 0 1 MIDI that's this folder then we just run this and whatever is in that folder is going to be available at local host port 3000 right so here's here's our file here so if you remember we're logging MIDI so here it is I have some base style that I've applied to app dot CSS right now so you can ignore all of that that's why we get a black background it's just a little gradient we can get into that later I'm gonna hide our terminal so app tjs is importing and then logging MIDI we've got app dot CSS which has some blank kind of just base stuff that we're going to be using and then MIDI J's has two classes we're gonna ignore MIDI event for a second because that's where most of my work went and it's like well we can look at it it's a lot of this stuff like we're basically describing different MIDI events and giving them names and so we don't want to look at that right now we're gonna hide that so we've got this MIDI class that's exported and let's take a peek at the MIDI API so this is on mdn we can see that MIDI is available through this thing called access and what access is is access is kind of this gateway it's almost like permission so by saying navigator dot request MIDI access the browser can use that as an opportunity to be like I'm gonna show it confirm to the user that says hey are you sure you want to be using this like do you want this website to have access to your MIDI controllers then the user can click yes or no we see it all the time with like microphones and cameras it's a similar sort of idea that because MIDI API isn't fully implemented that stuff doesn't necessarily exist yet but the methods do so if we want to access a MIDI controller we have to go through this request MIDI access which returns a promise so let's take a peek at that so I have a constructor on my class which constructor gets called when you do this you've seen this before right so when I call new MIDI new class MIDI and I say okay here's here's a string that I'm passing in that is what's going into the constructor in this case it wants an event as a parameter and we'll get into that on a second in a second so it wants a function called an event it can be called whatever you want but it's going to be run whenever an event occurs and you can think of an event as I touch something on a MIDI controller I moved a knob I plugged something in I unplug something this function is going to be called whenever that happens doesn't care what it is it's just gonna always call that function whenever anything happens we're defining inputs and outputs which we'll get into in just a second so that's all happening and that's just two empty objects that's all happening when we create a new MIDI initialize is where we're going to do this request MIDI access this is the thing that's going to get us access to MIDI controllers that are plugged in I am returning a promise here so that when we call this method we can be like MIDI dot initialized dot then because it's an asynchronous thing that happens so we're returning a new promise and a promise is basically like wait until I do something I'll tell you when it's time to continue and that's when we call resolve whenever we want it to resolve whenever the promises resolved so if I say I'm going to tell you a number that's a promise and then I say three that's resolved if I can't think of a number I'm gonna tell you a number I forgot what all the numbers are in the world that's an error and that calls reject right so I can't resolve the promise because I can't give you a three so then a reject is what happens so that syntax ends up being let's say we have a midi equals a new midi and then we're gonna call midi dot initialize which returns a new promise so we can even say cons promise equals that so our promise when it resolves this will be called so let's say it was a number like we said so the promises I'm gonna give you a number then we can just learn remember when I can't give you a number that's what doc catches for and so then we could say console dot error whatever the error is and let's say catch gives you an error so this is the reject of the promise and then this is the resolve of the promise so if I said resolve 3 that would be dot then alert 3 I said dot reject I has no numbers that's gonna be our error right here okay that's promises for some of you that might have been redundant but we're just gonna keep going here all right so we're requesting mini access and hopefully we're being granted access so it's promising us access so in our dot then we're gonna get access that's this line right here function access in access we have inputs and outputs and access requires us to access it like this so we can be like constant inputs is access dot inputs dot values which is a function that will return inputs same for outputs what's an input what's an output an input when we tap this that's an input I am sending data from here to the computer output is when the computer is like hey light up the midi-controller light up this square our computer can do that that's this is then an output so when this is plugged in we're gonna get one input and one output because it's both so inputs is an iterator let's take a peek at iterator so an iterator is kind of like an object and it's kind of like an array the way we access everything in an iterator instead of being like inputs dot for each or outputs dot for each or for let I equals 0 I is less than inputs dot length I plus plus instead of doing like a for loop or anything like that in that way we do a for loop like this for cons input of inputs for const output of outputs that's how we iterate through an iterator so what we're doing is we're calling initialize input on each input in inputs when we get access in fact let's just look at this so we are going to console dot log puts and outputs all right here's our MIDI we gotta go back to our app j/s I'm gonna say new MIDI Const MIDI equals new MIDI MIDI dot initialize dot then we're just gonna console down log initialized okay okay here we go it might throw an error here looks like we're fine so here's our inputs and here's our outputs to iterators now they look empty right let's let's actually do this so that we can see it alright inputs is an iterator outputs is an iterator there's no value in this there are actually values let's do this so for each input of inputs for each output of outputs we're gonna initialize an input I'll put it up or initialize an output so when we initialize this input I'm going to console dialog input when we initialize the output we will console that log the output okay so what we're gonna do is we're going to go through each of these inputs so the iterator we're going to go through each of these outputs which is this iterator for each one we are going to initialize them and when we initialize each of them we're just going to login it what's this we have two different things we've got MIDI input that's our each input we got a MIDI output logged down here which is each output let's take a peek at what an input is and might as well look at an output to now you'll see these look very similar so our input has an on MIDI message but other than that it's very similar to the connection ID manufacturer name state type version on state change so the versions the same the type of our input is input the type of our outputs output the state of the input and output are both connected the name is both it's the same for each of them it's just the MPD to 18 that's actually this name here MPD to 18 and it's manufactured by a chi which is the manufacturer name right here then we get a unique ID for both the input and the output so the output for some reason it's negative and the input is positive that doesn't matter all that matters is that we're we're getting a unique ID for each of them the connection is closed we could talk about that later but on MIDI message is going to be right now it's nothing but that's going to be a function that we're gonna say whenever this input gets a MIDI message do something that's going to go here note how that isn't available for an output because outputs don't have that okay so we've initialized our input and output let us continue with this little bit of knowledge here so if we go back and look at MIDI access you see this access on state change which is a function that is basically going to say whenever you unplug or plug in a device call this function doesn't matter if it's this device I have a keyboard over here I could plug that in this will get called because I have access to all MIDI that's what we requested access for so after we've requested access if anything plugs in or gets unplugged that's when this is happening so we can do add eventlistener state change and that's going to bring in an event and an event has a property called port so Y dot port we're just destructuring it here so this is the same thing as doing this event and then port becomes event at port etc etc it's way easier to just D structure right like this so that's what I'm doing because it's always going to be the same type of event so it's always going to have port so we're just going to adduce right here and we're basically saying if the port dot type is an input so if you remember here this is the port remember we got a dot type of input for our inputs and a dot type output for our outputs if it's if the type is input and the state is connected initialize again so this is we're calling this up here when we load the page this is needing to initialize the input again if we plug in another MIDI device we want to initialize that one too that's all this is is it saying if it's connected then we want to initialize it if it's not connected then it means we just unplugged it so we're going to call a method called teardown input here's the same thing except instead of inputs it's for our output so we're causing calling initialize output for if it's an output being connected and then we tear it down if it's being disconnected all the teardown is is we're basically ignore the send event but basically we have an inputs object on this class and an outputs object and we're basically deleting it from that object on teardown so if it doesn't exist return otherwise delete it from our internal memory that way we're not storing all this information when we unplug a MIDI device because we're gonna plug dit back in we're gonna reinitialize it so we don't want it to be there we want a new instance the send event all it does is it calls our on event handler which is what we passed into the constructor up here on event send event just takes an input or an output and sends a new MIDI event which is this big class up here which we don't need to worry about right now so it's going to call our call back with a new event I'm just wrapping an event so that it makes more sense to all of us which would be way easier so I'm gonna uncomment this I'm gonna comment this I'm gonna uncomment this gonna remove that move this so the only thing that's missing now is what happens when I press down that is our MIDI message remember on MIDI message that was undefined right here on MIDI message that's what this is input add eventlistener MIDI message so you can look at that here MIDI input dot on MIDI message this is in the MIDI input doksan mdn we can see that chrome edge maybe Firefox no Internet Explorer no Safari of course so I'm MIDI message we're going to be getting an event that has data and we're sending that data along and what's really interesting here I'm not gonna send this event I'm just gonna console dialog data this is why I'm not explaining MIDI event in detail it's because MIDI event class down here exists just to make data pretty I'm gonna log it raw for us right here and we're about to see it so we've initialized I'm going to just clear the console I'm going to tap a button tap another button I'm gonna turn a knob and let's tap a button again so I'll tap one really quick let's clear we'll look at a tap all right this is this is event data so this is what we're logging on MIDI message this 144 means note on so it means key down this one to eight means key up or finger off the button 48 represents which button I tapped so if I tap another one we get 49 here's another one 50 will go back to 49 etc etc so this is key down on 49 this is key up on button 49 and then this last one is 0 to 127 which represents how hard I pressed so I just pressed 50 a little bit lighter so now we're 36 notice how you can't there's no velocity to a Kia there's no like off speed there's only on speed so that's why the 127 and 136 those are different varying how hard I tabbed but the key off or the note off that's always going to be zero because there's no velocity to that action okay that's just buttons so now I'm gonna turn a knob and so 176 represents a knob being turned it's not always a knob in this case it's a knob but 176 represents hey a knob is being turned number 9 represents which knob so I got another one that's three I got another one that's 12 13 14 15 so there's six knobs 3 9 12 13 14 15 that's just this MIDI device if I plugged in my keyboard different knobs would be different numbers and all this stuff the reason it is the ones it is right now is because the manufacturer said hey I'm just gonna I'm gonna use these numbers to represent these notes there's only a certain amount of numbers you have access to as a manufacturer of a MIDI controller so we're just using they're just using the ones that they wanted to use and for us it's 3 9 12 13 14 15 the pads are 36 37 38 blah blah blah all the way to 51 so I have 36 to 51 on my pads and I've got 3 9 12 to 15 or whatever for my knobs that's exclusive to this because that's what the manufacturer wanted to do now with our knob 9 is the knob remember the same way 3 is the knob here that last value is on a scale from 0 to 127 how far have you turned the knob so I'm gonna go all the way to the left we're at zero all the way to the right or at 127 it's wonderful right well there's still more so we were talking about tapping so you can see I'm tapping and we've got our 144 and 128 for note on and note off now what happens if I hold it what's this well this MIDI controller has what's called oh shoot what is it going it's basically pressure-sensitive I've got it I've got it labeled up here after touch right so we touched that's our note on then after touch is what happens after that point now you have two types of after touch type a of after touch is called it's a poly poly synth I have to touch polyphonic aftertouch polyphonic aftertouch just means that when I'm doing after touch which is holding down and doing pressure-sensitive it's tied to that button normal after touch is not now what's the difference so what this device actually is doing see how it's two values 208 and then another number so we've got 208 82 we've got two 879 we've got 208 67 that second value is on a scale of 127 how hard are we pushing after we started pushing so note on now we're pushing how hard are we pushing on a scale of 0 to 127 that's that second value the 208 represents after touch what's sad is there's no association between the after touch and that button so I'm gonna just press one down here you'll see what I mean in a second so I'm pressing one down and now I'm doing after touch on another button you can see my top hand here is pushing down both of these are firing after touch but we don't know which after touches which so we don't know which button is being pressed down which heaviness that is normal after touch polyphonic aftertouch which is not 208 and this may be controller doesn't support is what number is polyphonic aftertouch that's 160 so 208 is up here or after touch polyphonic aftertouch is here now why is Paulie and phonic after touch cool polyphonic aftertouch means this event for after touch has three values not - it would have 160 which is hey this is Pavan again after touch then it would have a number which would be which pad then it would have 0 to 127 which is how hard that way you would know when this is streaming through which pad is being pressed unfortunately we don't have that access right now I don't have a device that allows for polyphonic aftertouch but that doesn't matter we can use this because we're only going to worry about one button at a time right now so anyways that's what this logging is doing is giving us that data remember this set of three numbers or two numbers that's data instead we're gonna call send event where we pass our device information and our data information into a new event and this thing just creates something it's gonna be a lot easier for us to understand than a bunch of random numbers that was a little exhausting but we'll get there it'll make sense in a second all right so here's our mini library I'm going to be giving this to you you'll have access to this this file is pretty straightforward like most of this code for event is turning numbers into text we know what things are and I got this information from these two sites which looked like this and are really boring so here's polyphonic aftertouch for number 160 the second value is the node number the third value is pressure during all of this I basically transformed into this so that we don't have to read old archaic PDFs okay wonderful let's move this down let's open up our app here so we need on event so if you remember the MIDI when we construct it we're passing in a function called an event and then when we send an event it's gonna call out of it so in our j/s what we need to do is we need a function here let's just call this handle event function handle event remember this is gonna take an event which is my special thing that was created we're just gonna cause the dialogue event I'll spell it correctly - okay well looks like we already got some events let's take a peek at them we're not gonna console.log video we don't need that okay yeah that's fine and I just I don't know what which of my things is causing this it's really annoying let's go into this mode and look at info only okay much better all right so we've got three events we've got a device connected another device connected and another device connected let's expand these here so these are my event this is my event like API so a and B are going to be values whenever a value occurs in the case of connected there is no value so here's our device it's an output and this device is an input so what we're basically getting is hey a new input was connected and another new input was connected or an output was connected down here the input gets duplicated and that's because it basically occurs twice because this state change also gets called when you refresh the page so this fires and then this fire so we get two logs on page load but I promise that's the only time there's duplicates it doesn't occur for output which is very interesting and it's probably just the way the browser's handling it right now okay let's simplify this here by saying on this we're gonna grab the device we're gonna get the type we're gonna get a and B and we'll just do device dot type device name and then we'll leave that alone for now okay input this is MPD 218 for DES that's just the name of this device so we're logging that device type and that device name I accidentally touched something which is why that happened six times okay now let's look at the time and in fact since we only have this single item what I'm going to do is I'm just going to do the we're not going to log the device information right now just the type so we've got two devices connected and now I'll keep device type in here that's whether or not it's an input or an output because that might be helpful for now while we're trying to understand what's going on so input device connected output device connected initialize happens then after that we got another input for device connected now what I'm gonna do is unplug this oh wow look at that input disconnected output disconnected plug back in what happen that didn't hold on that's supposed to fire let's look what's wrong here console.log court got a little loops in this stuff happens all the time so refresh maybe there was an error do I not okay device connected what's unplug there's are disconnected okay we're connected again okay that's working I'm I think it might have been my cable let me just it's never the code it's always the cable if only that were true okay okay okay there we go all right so that's our plugging in unplugging now what happens when I tap something oh we got a note on and a note off let me turn a knob code change that's the name of a knob turning whoo we got a little after touch cuz I'm still holdin it down note off so note on after touch no it off very cool so let's focus on a single knob right now so we're going to focus on this knob right here and the way we're gonna focus on this is by saying if type is equal to remember mode change that's coming from right here that's just the type of event then that's the only time we're gonna log this stuff okay so now there we go okay now let's go ahead and say if the type is equal to mode change and let's just log let's log A and B and see what's in there okay so we've got a value what's only along a really quick so we've get a value which is nine remember that's our ID a ratio is what that is on a scale of 0 to 127 which we don't care about right now we just care about the identifier of 9 and the label is mode so it's which which mode is changing in our case that's the knob number 9 that's the mode the value is going to be in B so first of all let's say if the type is equal to mode change and a dot value is equal to 9 then console dialogue B so now this should only occur when I turn that one knob everything else is now working so if you look turn this knob everything moves turn this knob nothing loose tap these nothing moves that's because we're looking for the mode change type of event and only when it's knob with a value of 9 so that's a value not then we're logging B and we're going to want to get that ratio so this is going to give us 0 to 1 which is pretty nice so with that value that's all the way to the left all the way to the right but this value we can do stuff so let me let me do a little I'm gonna grab some code basically I am going to grope ramming is going to be split up into a crazy thing here you'll see alright so we're gonna have a ratio of 1 to start text is going to be its the h1 ID equals text so we're gonna grab that here and when we draw after we initialize we're gonna set the internet Gmail to be grope ramming and it's gonna look like this so this is coming from our CSS I am going to quickly add I've got some animation stuff it's not that crazy there's not a lot of stuff in here I'll let you go through it on your own there we go okay it's working basically each of these letters is a span and so we're applying some animation on each letter so this is really fun so now what we're gonna do is I have in the CSS I'm using CSS variables to define a ratio of one ratio is being used for the opacity and it's being used for the scale for ratio here so if I change the ratio to be 0.5 we get 0.5 opacity 0.5 scale and bring it back to one full opacity full-scale grow cramming it's fun and difficult to say I'm gonna give this to you so you can look at that we're going to close it now so remember we have a variable called scale that influences the scale and opacity of this element this h1 element so that's this guy right here I'm gonna take this ratio and let's just say if we're turning that knob remember bida ratio is 0 to 1 already so we're gonna say ratio equals this whoops note how that doesn't do anything right I'm turning the knob nothing's happening that's because it's just a number right what we really want to do is now use this ratio to update the CSS variable the way you do that is not one would think so the best way to do it is you could think of it as oh just do text dot style dot you know - - ratio equals goodness gracious you could think of it in these terms this doesn't work for two reasons first of all that's not how you set a variable on an element second of all we don't want to be doing that on this event we only want to change a value on that event and then use requestanimationframe to actually animate that change so for now what we're gonna do is we're gonna say ratio equals betta ratio then here we're gonna have our animate which will take that ratio first of all let's request animation frame mate and then what its gonna do is it's gonna take the text dot style dot set property this is how you set a variable and then we're just gonna say ratio is equal to whatever our ratio is then we just need to start that loop animate so animate which will request the next animation frame to call it again and then it's just always updating the property ratio to be whatever we've changed this to in the meantime so this is changing this this is independent of that reading this value on every animation frame which means let's go here get this in view look what we have here oh my gosh so all the way off all the way on wonderful okay one last thing I've got that going let's make sure that it's always this device because we're making sure that it's always this knob right so let's call this knob and up here we'll do constant equals this I know how funny that is to some of you then let's log the device so we know what we got here a call so dialogue device we need to get the name so we can validate the name the name is MPD 218 comes device equals this so if device is not whoops vice name is not equal to this and we return so we're saying this is the knob we care about and as the device we care about now I'm also going to create a new value called pad and I know I know that I want to use pad 48 here and so else if type equals note on and remember this is going to be our pad number a is going to be our pad number so when this is being pressed for the first time we're going to say on equals true and let me just put let on equal false then we'll say else if type equals note off and it's our pad off her on equals false the same thing as all else if type is equal to let's let's long our type we want to get the after touch so if type is equal to after touch now remember there's no ID on after touch so what we want to say is and on so if we've pressed on we haven't let go and we're getting an after touch then ratio equals a DA aftertouch only has one value so we only have a we don't have B okay what is this doing let's actually console the log the dot ratio so when pad 48 is being pressed its refresh here's our ratio so our size is based on how hard I'm pressing this down now how do we know which one that is I know that 48 that one because I know that 40 it's that one but let's do something else let's make it light up let's use this as an output and this is one last quick thing before we finish here okay so let's take function will do notify that's what we'll call it and that is going to notify us which pad it's going to light up the correct pad and it's just going to blink it so we'll just say so I happen to know I should add this to my MIDI library what's added to the mini library notify hi and this is going to take a let's just call it a pad number well let's just call it a message and a message is going to look like it's going to look like that three array data that we were sending earlier so what we're gonna do is object dot values this dot outputs dot for each so this is going to take every output and we're gonna just output dot send message so we're going to send this message that gets passed into notify to every output that exists on the midi controller okay and you know what we'll say we pass in the name of the device to if output dot name is equal to whatever name we pass in or if there is no name then we send it so this will only send whatever output we we're gonna use this device name in that call and we're gonna say if that output has that name then send this event cool so notify it what we're gonna do is we're going to take our MIDI we're gonna say MIDI notify and there's going to be some data which will define in a second and the name is device okay so we are going to send an array of data to a device let's yep let's call notify up here when we initialize and we're gonna make a loop so we're gonna send a note on then 100 milliseconds later a note off then a note on again then a note off then a note on we're gonna call something over and over again the best way to do that is going to be just recursively defining this in a loop function so the loop is basically going to take it's gonna be in here and then we'll start the loop down here so the data we're gonna send I happen to know that the note off event equals 128 and the note on event which is going to light it up it's gonna be 144 so note off will turn the light off note on will turn the light on that's what we're going for on channel 1 which don't worry about it channels like walkie talkie we get 16 channels we're only worried about one so none of this matters channel 2 would be 129 channel 3 would be 130 it's a whole nother thing for a whole another time okay so we want to send first a note on that's the first parameter the second parameter is which pad so we already know pad 48 and then a value 0 to 127 so this is going to be our note on information so instead of this I'm just gonna say send this note on event let's see if this works by itself I'm gonna put this right here and we are going to refresh boom see that lit up wonderful so the note on event is working and then we are going to set time out note off pad zero and then device to make sure it's this device and that needs to be in a function which will then what are we missing here goodness this is getting long okay maybe notify that we're gonna do that after 100 milliseconds and then we are going to set interval loop every 200 milliseconds so every 200 milliseconds gonna call this actually we'll just do it every 100 milliseconds this is the this this is way better no it needs to be different times sorry almost had an idea I was going to call the note off at the beginning but then we're gonna be flashing so fast you won't even notice it so we'll call the note off 50 milliseconds we'll set an interval every 100 seconds and look what we have here I don't know if you could see that with the frame rate I'm going to slow it down just in case but it's flashing I'm going to slow this down to 100 and then call this every 200 boom there we go that's a little bit slower and if we wanted to we could slow down even more now I'm fine with that but let's say I'm holding it down I want the light to respond so all we need to do here is say if we aren't holding it down remember this is set one note is on honest true so as long as on is false let's just actually do this if if it's on we're just going to return out of this function otherwise we're gonna call these two things so that is gonna flash but if I hold this down it's gonna stay down it's not going to accidentally call it off or anything like that and then as soon as I let go it's going again because we're off perfect and actually I just saw a bug so if I am you want to say if we're not on and then we're also going to do it down here I know it's a little redundant but this is for the best so that when this thing gets called remember it's scheduling at 100 milliseconds in the future and so we want to check to make sure we're still not on at that point in the future otherwise it'll go on I press then the scheduled off happens while I'm holding it down we don't want that to happen we want to check if I'm holding it at that point so we check it again right here inside of the function that's set timeout okay so we have a flashing dot to know which thing to do and we've got a knob that can control that too now when you're doing this you're gonna have to specify your device name up here the pad ID and the knob way you're gonna do that is you're gonna look at a dot value for the knob ID so when you touch that knob what's a dot value when it's a mode change when it's a note on note off you want to see what a dot value is there as well that'll tell you what pad number to put in this 48 and then after touch is you might have you might have to use paw polyrhythmic what is the polyphonic I didn't have to look polyphonic aftertouch you might have polyphonic aftertouch in which case B ratio would be this and then you don't even have to track on and off you can just do a dot value is equal to pad that's what polyphonic aftertouch will give you is it'll give you this which we don't have so anyways this was rough but it's meant to be rough because this stuff is always rough I hope you were able to at least get a little bit from this let me bring my face back this was fun one little last thing here then I'm gonna drop in so that you get to see I made another fun function which I'll leave in the code that does basically I can notify animation so these are a bunch of different pad numbers in a certain order so that when I reload this page I get this great imagine all the fun things you can do especially with other types of controllers that light up anyways hey sorry I forgot to mention I have got something to help you kind of figure out what your device does it uses the same library that I'm going to give you access to via github put that in the comments but it's a code pen so this is the pen I'll include a link to it in the description but basically any device that's plugged in it uses the same API and tells you each event so I can just tap something here let me get out of the way I'm and then maybe we'll zoom in move this over but I am tapping a button and it's telling me the event type value a which is a note of 36 and then value B which is velocity of 0 here's our after touch with different pressure zero of 57 84 um you know what while we're here let's just make this show a little bit more history I don't know why I keep sending that twice but folks we're about to quickly fix this on the fly if initialize input if return this is this was happening earlier we were getting double events this will fix it see how this is occurring twice that's because it's being initialized twice because of the way this thing works so basically is firing two for every event that is now fixed and I'm gonna fix that in the original source code too so now when we run this we should only get one event per yeah there we go perfect okay cool that was my bed you learn everyday right here let's just change it here too so I'll show you when we initialize the input that was occurring twice we basically just need to say if this already exists return and that is not how you spell return perfect that way we're not adding two listeners that's what was happening okay cool so I'll show you I'll send you a link to this that way when you plug in a device you'll be able to see all of its information here and you won't need to like set up the code to get that information you can just look here figure out all this stuff and then you can kind of plug it in I wrote some helpful notes here like there's a log on line 23 to figure out what these are etc etc I put some other comments in here I have to kind of help out I also neglected to talk about some of the CSS I put some helper comments here just to describe what all of this is it's really less complicated than you think I need to put a comment here as well anyways I hope this was helpful thank you stay optimistic just in general but also encode stuff gets easier and I'm sure everything else is going on well - all right take care

Channel: Jake Albaugh

Views: 2,025

Keywords: html, css, javascript, web development, midi

Id: 556e3cLWusc

Length: 57min 30sec (3450 seconds)

Published: Thu Apr 09 2020