Hello MIDI

How it works

Click the button above to hear the C-major chord.

This is the most basic example of how to play MIDI via Javascript.

You may notice a delay when you first time press the button. It's the time required for your browser to initialize MIDI drivers. You will see how to address this issue in more advanced examples.

See the same example implemented with JZZ.js.

Page source

<!DOCTYPE html>
<html>
<head>
<title>Hello MIDI</title>

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>

<style type="text/css">
.hidden {
 visibility: hidden;
 width: 0px;
 height: 0px;
 margin: 0px;
 padding: 0px;
 border-style: none;
 border-width: 0px;
 max-width: 0px;
 max-height: 0px;
}
</style>
</head>

<body>
<h1>Hello MIDI</h1>

<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
  <object id="Jazz2" type="audio/x-jazz" class="hidden">
<p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
  </object>
</object>

<script><!--
var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
function play(){
 if(Jazz.isJazz){
  Jazz.MidiOut(0x90,60,100);
  Jazz.MidiOut(0x90,64,100);
  Jazz.MidiOut(0x90,67,100);
 }
}
function stop(){
 if(Jazz.isJazz){
  Jazz.MidiOut(0x80,60,0);
  Jazz.MidiOut(0x80,64,0);
  Jazz.MidiOut(0x80,67,0);
 }
}
--></script>

<button onmousedown='play();' onmouseup='stop();'> Press to play... </button>

</body>
</html>

Hello MIDI

How it works

Page source

See also