WebMIDI simple Visuals?

Question

I would like to use Webmidi to let a simple black box to turn white for a short time when a specific MIDI note, or any note from a specific MIDI channel is incoming. I have this code but i don't know how to trig the css color change. Thanks!

WebMidi.enable(function(err) { 

if (err) console.log("WebMidi could not be enabled");

var input = WebMidi.inputs[0];


// Listening for a 'note on' message (on channel 1 only) 
input.addEventListener('noteon', 1,
  function(e){ console.log(e); }
);

// Listening to other messages works the same way 
input.addListener('noteoff', "all,"
  function(e){ console.log(e); }
);


}

);

This is not WebMIDI API, I guess it is [webmidi.js](https://github.com/djipco/webmidi). You should to mention it. Also, your question is not about WebMidi, it is about DOM. Learn [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — dani herrera, Jan 27 '19 at 11:13

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

You need to write a custom function that sets the colour of the div. The event listener then triggers the function. This may help:

How to use addEventListener

edited May 23 '17 at 11:46

Community

1
1

answered Jun 26 '16 at 10:04

Atrix

299
2
6

Thanks. I'm a beginner and i don't understand very well how to do the syntax to connect the input.addEventListener to the script that will change the div color – John Intj Jun 26 '16 at 11:39
Well, you should give the div a unique id like this
...
. You can then write JavaScript code that references this unique div id and alters its CSS style properties. – Atrix Jun 26 '16 at 12:56
Ok, Thanks i will try – John Intj Jun 26 '16 at 14:53

score 0 · Answer 2 · answered Jul 22 '16 at 08:55

0

using jquery you can set css attributes like background color using the css() function

for example:

$("p").css("background-color", "yellow");

answered Jul 22 '16 at 08:55

Nikolaus Gradwohl

19,708
3
45
61

WebMIDI simple Visuals?

2 Answers2