With the Web MIDI API it’s now possible to send MIDI notes to your audio synthesizers to create sound. At the moment it only works with the Chrome browser.

Here is all the code you will need to send random notes with JavaScript:

<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Send notes with JavaScript</title>
    <!-- Import this WebMIDI library from a CDN to make code easier to write -->
    <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  </head>
  
  <body>
    <h1>Send notes with JavaScript</h1>
    <!-- Show what note is current playing here -->
    <pre id="msg"></pre>
    <script>
	const msg = document.getElementById(`msg`);

	// Using the library, tell the browser to request access to the MIDI devices
	// This is probably going to be MIDI over USB, however you might also have a 
	// virtual MIDI device, or a MIDI interface.
	WebMidi.enable()
		.then(noteLoop)
		.catch(err => msg.textContent = String(err));
	
	// This function produces a 2 character string, which is used to send the
	// correct note "number" to our MIDI device. The first character is the
	// Note (A - F) and the second is the octave (2 - 4). E.g. 'A2'.
	const getNote = () => `${String.fromCharCode(~~(Math.random() * 6) + 65)}${~~(Math.random() * 3 + 2)}`;

	function noteLoop()
	{
		const note = getNote();

		msg.textContent = `Sending note ${note}`;

		// This loop means every MIDI output device will receive
		// the message to play a note.
		WebMidi.outputs.forEach((_, index) =>
		{
			// Tell the device to play the note
			WebMidi.outputs[index].sendNoteOn(note);

			// Many devices also need to be told after playing a note
			// to stop playing a note, otherwise it will keep the
			// note playing forever, even when other notes are being
			// played.
			WebMidi.outputs[index].sendNoteOff(note, { time: `+500` });
		})

		// This will loop and play a new note every 500ms - 1s
		setTimeout(noteLoop, Math.random() * 500 + 500);
	}
    </script>
  </body>

</html>