12 |
13 |
Midi Logger
14 |
15 |
16 | This Midi Logger will print any midi input to your browser to the table below, with new signals appearing at the top. This is all possible because of the Web Midi API.
17 |
18 |
19 |
20 | Please note
21 |
22 | -
23 | Midi channel messages are zero indexed, but controllers often label channels starting from 1. This means that if your controller has channels labelled 1 to 16, data it sends will be from 0 - 15.
24 |
25 | -
26 | If you connect a new Midi device, you may need to restart your browser for it to be detected.
27 |
28 |
29 |
30 |
31 |
32 |
33 |
100 |
101 |
102 |
103 |
104 |
105 | | Time |
106 | Channel |
107 | Channel message |
108 | Channel message desc |
109 | Data byte 1 |
110 | Data byte 2 |
111 | Manufacturer |
112 | Model |
113 |
114 |
115 |
116 |
" );
91 | arrTableMarkup.push ( "| " );
92 | arrTableMarkup.push ( event.timeStamp );
93 | arrTableMarkup.push ( " | " );
94 | arrTableMarkup.push ( "" );
95 | arrTableMarkup.push ( this.printNumberinBase(((event.data[0] % 16)), $("#channel-message-format").val(), 15).toUpperCase() ); // channel
96 | arrTableMarkup.push ( " | " );
97 | arrTableMarkup.push ( "" );
98 | arrTableMarkup.push ( this.printNumberinBase((event.data[0]), $("#channel-message-format").val(), 255).toUpperCase() );
99 | arrTableMarkup.push ( " | " );
100 | arrTableMarkup.push ( "" );
101 | arrTableMarkup.push ( this.calculateChannelMessageType(event.data[0]) );
102 | arrTableMarkup.push ( " | " );
103 | arrTableMarkup.push ( "" );
104 | if ($("#show-note-name").prop('checked')){
105 | arrTableMarkup.push ( this.midiNumberToNoteName(event.data[1]) );
106 | } else {
107 | arrTableMarkup.push ( this.printNumberinBase((event.data[1]), $("#data-byte-format").val(), 127).toUpperCase() );
108 | }
109 | arrTableMarkup.push ( " | " );
110 | arrTableMarkup.push ( "" );
111 | if (typeof event.data[2] !== "undefined"){
112 | arrTableMarkup.push ( this.printNumberinBase((event.data[2]), $("#data-byte-format").val(), 127).toUpperCase() );
113 | }
114 | arrTableMarkup.push ( " | " );
115 | arrTableMarkup.push ( "" );
116 | arrTableMarkup.push ( event.currentTarget.manufacturer );
117 | arrTableMarkup.push ( " | " );
118 | arrTableMarkup.push ( "" );
119 | arrTableMarkup.push ( event.currentTarget.name );
120 | arrTableMarkup.push ( " | " );
121 | arrTableMarkup.push ( "
" );
122 |
123 | if (this.rowCounter < this.maxRows){
124 | this.rowCounter++;
125 | } else {
126 | $('.js-midi-log-table tr:last').remove();
127 | }
128 | $(".js-table-head-row").after(arrTableMarkup.join('') );
129 | }
130 |
131 | this.calculateChannelMessageType = function(number){
132 | // http://www.earlevel.com/main/1996/08/14/midi-overview/
133 | switch (Math.floor(number/16)) {
134 | case 8:
135 | return "Note off";
136 | case 9:
137 | return "Note on";
138 | case 10:
139 | return "Polyphonic key pressure";
140 | case 11:
141 | return "Mode change";
142 | case 12:
143 | return "Program change";
144 | case 13:
145 | return "Monophonic key pressure";
146 | case 14:
147 | return "Pitch bend";
148 | }
149 | }
150 |
151 |
152 |
153 | this.printNumberinBase = function(decimalNumber, base, maxValue){
154 | if (base == "dec"){
155 | var maxLength = (maxValue + "").length;
156 | var paddedOutput = this.pad(decimalNumber, maxLength)
157 | return paddedOutput;
158 | } else if (base == "bin"){
159 | var maxLength = maxValue.toString(2).length;
160 | var paddedOutput = this.pad(decimalNumber.toString(2), maxLength)
161 | return paddedOutput;
162 | } else if (base == "hex"){
163 | var maxLength = maxValue.toString(16).length;
164 | var paddedOutput = this.pad(decimalNumber.toString(16), maxLength)
165 | return paddedOutput;
166 | }
167 | }
168 |
169 | this.midiNumberToNoteName = function(midiNumber){
170 | return MIDIUtils.noteNumberToName(midiNumber);
171 |
172 | }
173 |
174 | this.pad = function(num, size) {
175 | var s = num+"";
176 | while (s.length < size) s = "0" + s;
177 | return s;
178 | }
179 | }
180 |
--------------------------------------------------------------------------------
/js/WebMIDIAPI.js:
--------------------------------------------------------------------------------
1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o