MIDI In: MIDI Out:
This example requires Jazz-Plugin v.1.3 or later.
This example demonstrates the use of QueryMidiIn() function.
You need some MIDI controller connected to your computer. Press <Record> to start recording, press <Stop> to save the file.
<!DOCTYPE html>
<html>
<head>
<title>Record MIDI File</title>
<script src="JZZ.Midi.js"></script>
<script src="JZZ.MidiFile.js"></script>
<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;
}
button {
width:6em;
}
#rec {
color:#f00;
}
embed {
width:12em;
height:1em;
margin-left:2em;
}
</style>
</head>
<body>
<h1>Record MIDI File</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>
<p>
MIDI In: <select id=selectin onchange='changein();'></select>
MIDI Out: <select id=selectout onchange='changeout();'></select>
</p><p>
<button id=rec onmousedown='rec();' disabled>Record</button>
<button id=play onmousedown='play();' disabled>Play</button>
<button id=stop onmousedown='stop();' disabled>Stop</button>
<span id=dwnld></span>
</p>
<script><!--
var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
var player;
var midiIn;
var midiOut;
var recording;
var playing;
var selIn = document.getElementById('selectin');
var selOut = document.getElementById('selectout');
var btnRec = document.getElementById('rec');
var btnPlay = document.getElementById('play');
var btnStop = document.getElementById('stop');
var dwnld = document.getElementById('dwnld');
var start;
function onPlayerEvent(e){
if(e.midi instanceof JZZ_.Midi){
Jazz.MidiOutRaw(e.midi.array());
}
else if(e.control=='stop'){
for(var i=0;i<16;i++) Jazz.MidiOut(0xb0+i,123,0);
playing = false;
update();
}
}
function rec(){
player = undefined;
recording = true;
Jazz.ClearMidiIn();
start = Jazz.Time();
update();
}
function play(){
playing = true;
update();
player.play();
}
function stop(){
if(playing) player.stop();
else if(recording){
// MIDI file type 0 - all channels in one track; 100 ppq; default tempo 120 bpm is 5 ms per tick;
var mf = new JZZ_.MidiFile(0,100);
var tr = new JZZ_.MidiFile.MTrk; mf.push(tr);
var a;
while(a=Jazz.QueryMidiIn()){
if(!a.length || a[1]==0xf8 || a[1]==0xfe || a[1]==0xff) continue;
var t=(a[0]-start)/5; // convert ms to ticks
a.shift();
var len=JZZ_.Midi.len(a[0]);
if(len!=undefined) a=a.slice(0,len);
tr.addMidi(t,a);
}
tr.setTime((Jazz.Time()-start)/5);
player = mf.player();
player.onEvent = onPlayerEvent;
recording = false;
update();
var uri = 'data:audio/midi;base64,' + JZZ_.MidiFile.toBase64(mf.dump());
dwnld.innerHTML='MIDI file: <a href=' + uri + '>DOWNLOAD</a> <embed src=' + uri + ' autostart=false>';
}
}
function changein(){
if(!Jazz || !Jazz.isJazz) return;
midiIn = Jazz.MidiInOpen(selIn.options[selIn.selectedIndex].value);
for(var i in selIn){
if(midiIn==selIn.options[i].value){ selIn[i].selected=1; break;}
}
}
function changeout(){
if(!Jazz || !Jazz.isJazz) return;
midiOut = Jazz.MidiOutOpen(selOut.options[selOut.selectedIndex].value);
for(var i in selOut){
if(midiOut==selOut.options[i].value){ selOut[i].selected=1; break;}
}
}
function update(){
btnRec.disabled = recording || playing || !midiIn;
btnPlay.disabled = playing || !player || !midiOut;
btnStop.disabled = !playing && !recording;
selOut.disabled = playing;
selIn.disabled = recording;
}
try{
var list=Jazz.MidiOutList();
for(var i in list){
selOut[i]=new Option(list[i],list[i],0,0);
}
for(var i in list){
midiOut=Jazz.MidiOutOpen(i);
if(midiOut){ selOut[i].selected=1; break;}
}
list=Jazz.MidiInList();
for(var i in list){
selIn[i]=new Option(list[i],list[i],0,0);
}
for(var i in list){
midiIn=Jazz.MidiInOpen(i);
if(midiIn){ selIn[i].selected=1; break;}
}
update();
}
catch(err){}
--></script>
</body>
</html>