webMidiLog.html

<html>

<head>
	<meta charset="utf-8"/>
	<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==" />
	<title>webMidiLog</title>

</head>

<body>
	<h1>webMidiCircleLog</h1>
	<p>See Console Log</p>

	<script type="module">
		/*
		import {
			normalize_javascript_midi_msg,
		} from './music.js'
		Not need to make this a standalone file
		*/

		// COPY AND PASTE FROM music.js
		const MIDI_STATUS_LOOKUP = {
			0x8: 'note_off',
			0x9: 'note_on',
			0xA: 'polyphonic_aftertouch',
			0xB: 'control_change',
			0xC: 'program_change',
			0xD: 'channel_aftertouch',
			0xE: 'pitch_wheel',
		};
		function midi_status(status_byte) {
			var status_code = Math.floor(status_byte/16);
			return {
				code: status_code,
				name: MIDI_STATUS_LOOKUP[status_code],
				channel: status_byte % 16,
			};
		}
		export function normalize_javascript_midi_msg(msg) {
			const midiMsg = {
				status: midi_status(msg.data[0]),
				note: msg.data[1],
				velocity: msg.data[2],
			}
			// Normalize note_off status
			if (midiMsg.status.name == 'note_on' && midiMsg.velocity == 0) {
				midiMsg.status.code = 0x8;
				midiMsg.status.name = 'note_off';
			}
			return midiMsg;
		}


		// System Midi Input ---------------------------------------------------

		function onMidiMessage(midiDevice, msg) {
			const midiMsg = normalize_javascript_midi_msg(msg);
			// TODO: GUI option to select type of debug message?
			console.info(midiDevice.name, JSON.stringify(midiMsg));
			//console.info(midiDevice.name, msg.data);
		};

		function bindMidiDevices(midiAccess) {
			for (let midiDevice of midiAccess.inputs.values()) {
				console.log(midiDevice);
				midiDevice.onmidimessage = (msg) => onMidiMessage(midiDevice, msg);
			}
		};
		function initMidi(bindMidiDevices) {
			if (window.navigator.requestMIDIAccess) {
				window.navigator.requestMIDIAccess({sysex: true}).then(bindMidiDevices, function() {console.warn('MIDI Access Failed');});
			} else {console.warn("No browser MIDI support");}
		};
		initMidi(bindMidiDevices);

	</script>
</body>