Skip to content

MIDI

Jump to bottom
Konrad Gondek edited this page Sep 25, 2016 · 1 revision

MIDI is a shortcut for 'Musical Instrument Digital Interface' and was established in 1983. The purpose was to have a standardized communication service between synthesizers of different manufacturers. MIDI is a event based protocol where you can play musical notes through a synthesizer, record those events and play them again. Additionally its also possible to control other devices which allow MIDI support. The main difference between sample based audio is that MIDI is event orientated and only creates parameters which will be the input for a given synthesizer. The synthesizer takes these inputs and converts them into hearable sound.

Properties:

  • channel - MIDI supports up to 16 channels. Each channel can have it's own instrument
  • velocity - determines how much energy was used to press a key
  • attack - determines the time how long a sound needs to be on maximum amplitude
  • release - determines the time where a tone goes down
  • program - MIDI General standard allows up to 127 instruments

Example:

Setup:

  1. At first open the settings 'Audio-MIDI-Setup'.

  2. Click on IAC-Driver and create a new midi port with the plus-sign down left.

  3. Give it a useful name MIDI_SETUP

  4. Download the program vmpk

  5. Open the toolbar at 'Edit->Midi Connection'

  6. Set the 'MIDI IN driver' to 'Core Midi' and 'Connection of MIDI-IN' to the created MIDI Port from step 2. The 'MIDI OUT driver' has to be set to the 'FluidSynth' as well as the 'Connection of MIDI-OUT'. Connection_MIDI

  7. Create a folder named node_modules at the project root-folder. Open a terminal and go to the node_modules path. Now execute npm install webmidi. Otherwise you can download the WebMidi-Library here

  8. Write the following code in a text editor to create a HTML where you can setup the key and the instrument patch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MIDI Test</title>    
<!--     <script type="text/javascript" src="./midiExample.js"></script> -->
   <script type="text/javascript" src= "node_modules/webmidi/webmidi.min.js"></script>
   <script type="text/javascript" src="./midiScript.js"></script>
</head>
<body>

  <button type="button" onclick="javascript:playNote()">play</button> 
  
  <label id="lbKey">Key:</label>
  <input type="text" id="key" value = "3"/>

  <label id="lbInstrument">Instrument:</label>
  <input type="text" id="instrument" value = "3"/>  <br>
  
  <label id="lbRange">Range for keys/instrument: 1-127</label> 	
</body>
</html>
  1. Create a JavaScript-File with the name midiScript.js in the project folder and write the following code to send midi messages through the MIDI-port:
//enable MIDI support, actually only works in the Google-Chrome Browser.
WebMidi.enable(onSuccess, onFailure); 

function onSuccess() {
  console.log("WebMidi enabled.");
}

function onFailure(err) {
  console.log("WebMidi could not be enabled.", err);
}

//sets the patch for the instrument
function setInstrument(){

  var instrument = document.getElementById("instrument").value //range 1-127
  instrument = Number(instrument) //Convert string to a number
  WebMidi.sendProgramChange(instrument, WebMidi.outputs[0],3, null);
}

//play the note
function playNote(){

  setInstrument()
  			
  var key = document.getElementById("key").value	
  key = Number(key) //Convert string to a number
  
  WebMidi.playNote(key, 1, 1000, WebMidi.outputs[0], 3); //Params: (note, velocity, release in ms, output-device, midi-channel)
}

If the program 'vmpk' is on the html-page will send MIDI-Events through it and plays the given keys.

Useful sources:

Clone this wiki locally