# Struggling with Webmidi library

**URL:** <https://discourse.processing.org/t/struggling-with-webmidi-library/32539>\
**Category:** Libraries\
**Created:** [September 30, 2021, 10:57pm UTC](https://discourse.processing.org/t/struggling-with-webmidi-library/32539 "2021-09-30T22:57:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [September 30, 2021, 10:57pm UTC](https://discourse.processing.org/t/struggling-with-webmidi-library/32539/1 "2021-09-30T22:57:18Z")

</div>

Hi,  
I’m trying to make the simplest implementation of the Webmidi library. I can get my midi controllers to communicate with my sketch, however I’m really struggling with the code structure.

So far I’ve been using:

- This example [https://editor.p5js.org/dbarrett/sketches/HJhBG-LI7](https://editor.p5js.org/dbarrett/sketches/HJhBG-LI7)
- and looked at the API documentation here [https://webmidijs.org/docs/v2.5.3/classes/Input.html](https://webmidijs.org/docs/v2.5.3/classes/Input.html)
- I’ve looked at this code as well, but I don’t really get the syntax [https://log.lab8.cc/post/p5midi/](https://log.lab8.cc/post/p5midi/)

Here is my code:

```auto

function setup() { 
  createCanvas(800, 800);
  background(222);
  strokeWeight(50);
  //midi block
	WebMidi.enable(function (err) {
  if (err) {
      console.log("WebMidi could not be enabled.", err);
  } else {
      console.log("WebMidi enabled!");
    } 
  inputSoftware = WebMidi.inputs[0];
	});
  //EOF midi block
} 

function draw() { 

  inputSoftware.addListener('controlchange', "all",function (e) {
    if(e.controller.number==16){
      var controller1=e.value ;
      console.log(controller1);
    } 

    
  });
}

```

I can see the value of the midi controller within the console.log but just trying to pass the midi controller values to a line() is challenging.

Ideally, I’m looking for a modular structure I can easily use with my existing sketches.

I was thinking maybe I could have this code in a function so I could easily integrate it within existing sketches. Which is leading me to the following code:

```auto
function setup() { 
  createCanvas(800, 800);
  background(222);
  strokeWeight(50);
  //midi block
	WebMidi.enable(function (err) {
  if (err) {
      console.log("WebMidi could not be enabled.", err);
  } else {
      console.log("WebMidi enabled!");
    } 
  inputSoftware = WebMidi.inputs[0];
	});
  //EOF midi block
} 

function draw() { 
 console.log(getMidiControllerValues());
}

function getMidiControllerValues(){
  inputSoftware.addListener('controlchange', "all",function (e) {
    if(e.controller.number==16){
      var controller1=e.value ;
      console.log(controller1);
    } 
    return
  }); 
}

```

This is returning me a lot of “undefined” from the console.log and also it’s very sluggish and erratic (I can’t find the link from myself turning the button and looking at corresponding values in the console.

I’m also trying to return the function value so I can adjust in real time my potentiometer to change y2 value from a line, it doesn’t work, meaning my line isn’t displayed at all. Here is my code

```auto
function setup() { 
  createCanvas(800, 800);
  background(222);
  
  //midi block
	WebMidi.enable(function (err) {
  if (err) {
      console.log("WebMidi could not be enabled.", err);
  } else {
      console.log("WebMidi enabled!");
    } 
  inputSoftware = WebMidi.inputs[0];
	});
  //EOF midi block
} 

function draw() { 
 controller1=getMidiControllerValues();
 strokeWeight(50);
 line(100,100,400,200+controller1);
}

function getMidiControllerValues(){
  inputSoftware.addListener('controlchange', "all",function (e) {
    if(e.controller.number==16){
      var controller1=e.value ;
      return controller1;
    } 
  }); 
}

```

I thought this would have been an easy undertaking but I’m really struggling and I would really appreciate your support if possible.

Thanks

---

<div class="post-metadata">

**Author:** ![djipco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/djipco/32/14601_2.png) [@djipco](https://discourse.processing.org/u/djipco)\
**Post date:** [October 3, 2021, 5:26pm UTC](https://discourse.processing.org/t/struggling-with-webmidi-library/32539/2 "2021-10-03T17:26:38Z")

</div>

There is a major problem with the way your code is structured that explains why it’s sluggish. In p5.js, whatever you put in the `draw()` function gets called on every frame. This means that your `getMidiControllerValues()` function is run on every frame which also means that you are adding a listener on every single frame… After a few seconds, you will already have added a few hundred listeners. After a few minutes, it will be in the thousands. This explains the sluggishness.

Instead, what you need to do is add the listener once in the `setup()` function. Here is a simple example of what I mean:

```auto
// The background color of the stage
let bgColor = "black";

function setup() {
  
  bgColor = color(0, 0, 0);
  
  createCanvas(400, 400);

  WebMidi.enable(function (err) {

    if (err) console.log("WebMidi could not be enabled.", err);
    
    // Visualize available inputs
    console.log(WebMidi.inputs);
    
    const input = WebMidi.getInputByName("PUT CONTROLLER NAME HERE!!");

    // Whenever a key is pressed on your controller, a random color is generated
    // and stored in bgColor.
    input.addListener("noteon", "all", e => {
      let r = random(128,255);
      let g = random(128,255);
      let b = random(128,255);
      bgColor = color(r, g, b);
    });
    
  });

} 

function draw() {
  // bgColor is used to paint the background color
  background(bgColor);
}

```

Hope this helps!