NOTE: There is a better way to generate MIDI files...
Save the above link as *.kar file and open it in MIDI/karaoke player.
If an approppriate plugin/extension (like this) is enabled in your browser, you will also see an embedded object next to the link.
The code below creates MIDI file from scratch and writes it into HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Write MIDI File</title>
<script src="JZZ.Midi.js"></script>
<script src="JZZ.MidiFile.js"></script>
</head>
<body>
<h1>Write MIDI File</h1>
<div id=out></div>
<script><!--
// Create a MIDI file. Type 1; 100 clocks per quarter note.
// Normally, it would rather be 96, but 100 makes it easier to count.
mf = new JZZ_.MidiFile(1,100);
// Add MIDI file tracks:
var tr0 = new JZZ_.MidiFile.MTrk; mf.push(tr0); // First track in Type 1 MIDI file is normally used for tempo changes
var tr1 = new JZZ_.MidiFile.MTrk; mf.push(tr1); // This one will be for the karaoke lyrics
var tr2 = new JZZ_.MidiFile.MTrk; mf.push(tr2); // This one will be for the music
tr0.addName(0,'Little Lamb'); // The name of the first track serves as the file title
tr0.addTempo(0,90); // Normally set at clock 0, but can be also changed later
tr1.addName(0,'Words'); // The names of other tracks don't have any particular meaning
tr1.addText(0,'@TMary Had A Little Lamb'); // Karaoke player will recognize this track by the "@T" tag
tr1.addText(100,'\\Ma'); // New verse starts with a backslash "\"
tr1.addText(150,'ry ');
tr1.addText(200,'had ');
tr1.addText(250,'a ');
tr1.addText(300,'lit');
tr1.addText(350,'tle ');
tr1.addText(400,'lamb,');
tr1.addText(500,'/Lit'); // New line starts with a slash "/"
tr1.addText(550,'tle ');
tr1.addText(600,'lamb,');
tr1.addText(700,'/Lit');
tr1.addText(750,'tle ');
tr1.addText(800,'lamb,');
tr1.addText(900,'/Ma');
tr1.addText(950,'ry ');
tr1.addText(1000,'had ');
tr1.addText(1050,'a ');
tr1.addText(1100,'lit');
tr1.addText(1150,'tle ');
tr1.addText(1200,'lamb,');
tr1.addText(1300,'/Blah-');
tr1.addText(1350,'blah-');
tr1.addText(1400,'blah-');
tr1.addText(1450,'blah-');
tr1.addText(1500,'blah!');
tr2.addName(0,'Music');
tr2.addMidi(0,0xc0,0x0b); // clock: 0, MIDI signal: 0xc0 0x0b (change channel 0 program to vibraphone)
tr2.addNote(100,0,'E5',127,50); // clock: 100, MIDI channel: 0, note: E5, velocity: 127, duration: 50 clocks
tr2.addNote(150,0,'D5',127,50); // etc...
tr2.addNote(200,0,'C5',127,50);
tr2.addNote(250,0,'D5',127,50);
tr2.addNote(300,0,'E5',127,50);
tr2.addNote(350,0,64,127,50); // can also use numerical values for the notes
tr2.addNote(400,0,0x40,127,90);
tr2.addNote(500,0,'D5',127,50);
tr2.addNote(550,0,'D5',127,50);
tr2.addNote(600,0,'D5',127,90);
tr2.addNote(700,0,'E5',127,50);
tr2.addNote(750,0,'G5',127,50);
tr2.addNote(800,0,'G5',127,90);
tr2.addNote(900,0,'E5',127,50);
tr2.addNote(950,0,'D5',127,50);
tr2.addNote(1000,0,'C5',127,50);
tr2.addNote(1050,0,'D5',127,50);
tr2.addNote(1100,0,'E5',127,50);
tr2.addNote(1150,0,'E5',127,50);
tr2.addNote(1200,0,'E5',127,90);
tr2.addNote(1300,0,'D5',127,50);
tr2.addNote(1350,0,'D5',127,50);
tr2.addNote(1400,0,'E5',127,50);
tr2.addNote(1450,0,'D5',127,50);
tr2.addNote(1500,0,'C5',127,190);
tr2.addNote(1600,0,'E5',100,90);
tr2.addNote(1600,0,'G5',100,90);
tr2.addNote(1600,0,'C6',127,90);
tr2.setTime(1700); // otherwise it will end on clock 1690
var str = mf.dump(); // MIDI file dumped as a string
var b64 = JZZ_.MidiFile.toBase64(str); // convert to base-64 string
var uri = 'data:audio/midi;base64,' + b64; // data URI
// Finally, write it to the document as a link and as an embedded object:
document.getElementById('out').innerHTML='New file: <a href=' + uri + '>DOWNLOAD</a> <embed src=' + uri + ' autostart=false>';
--></script>
</body>
</html>