Mary Had A Little Lamb

C                       G            C
Mary had a little lamb, little lamb, little lamb,

C                             G                   C
Mary had a little lamb, whose fleece was white as snow...

How it works

Click on the chords and lyrics to hear the sound. - This would be a useful feature on every chords/lyrics website.

Script parses all HTML tags in the document, and sets mouse event handlers to those with defined midi property. This property can include one or more notes separated by white space. Each note is defined by one, two, or three numbers, separated by colon:

channel:note:velocity
channel:note (default velocity is 100)
note (default channel is 0)

There is also a midi_init property in the <body> tag that defines programs for used MIDI channels.

Page source

<!DOCTYPE html>
<html>
<head>
<title>Mary Had A Little Lamb</title>

<script src="JazzClick.js"></script>

<style type="text/css">
pre {
 font-size:1.3em;
}
span.playing {
 position:relative;
 top:-4px;
}
</style>
</head>

<body midi_init="0:10 2:25">

<h1>Mary Had A Little Lamb</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>

<pre class=big>
<b><span midi="2:48 2:52 2:55 2:60 2:64">C</span>                       <span midi="2:43 2:50 2:55 2:59 2:67">G</span>            <span midi="2:48 2:52 2:55 2:60 2:64">C</span></b>
<span midi=64>Ma</span><span midi=62>ry</span> <span midi=60>had</span> <span midi=62>a</span> <span midi=64>lit</span><span midi=64>tle</span> <span midi=64>lamb</span>, <span midi=62>lit</span><span midi=62>tle</span> <span midi=62>lamb</span>, <span midi=64>lit</span><span midi=67>tle</span> <span midi=67>lamb</span>,

<b><span midi="2:48 2:52 2:55 2:60 2:64">C</span>                             <span midi="2:43 2:50 2:55 2:59 2:67">G</span>                   <span midi="2:48 2:52 2:55 2:60 2:64">C</span></b>
<span midi=64>Ma</span><span midi=62>ry</span> <span midi=60>had</span> <span midi=62>a</span> <span midi=64>lit</span><span midi=64>tle</span> <span midi=64>lamb</span>, <span midi=64>whose</span> <span midi=62>fleece</span> <span midi=62>was</span> <span midi=64>white</span> <span midi=62>as</span> <span midi=60>snow</span>...
</pre>

</body>
</html>

JazzClick.js

// Jazz-Soft.net
// This code is totally free to copy, modify and distribute.

(function(){
 var midi_init;
 var playing;

 if(window.addEventListener) window.addEventListener('load',init,false);
 else if(window.attachEvent) window.attachEvent('onload',init);

 function visit(t){
  if(t.nodeType!=1) return;
  if(t.getAttribute('midi')){
   if(t.addEventListener){
    t.addEventListener('mousedown',down,false);
   }
   else if(t.attachEvent){
    t.attachEvent('onmousedown',down);
   }
  }
  if(t.getAttribute('midi_init')){
   if(!midi_init) midi_init=t.getAttribute('midi_init');
   else midi_init+=' '+t.getAttribute('midi_init');
  }
  for(var i in t.childNodes){
   visit(t.childNodes[i]);
  }
 }

 function init(){
  if(document.addEventListener){
   document.addEventListener('mouseup',up,false);
  }
  else if(document.attachEvent){
   document.attachEvent('onmouseup',up);
  }
  Jazz = document.getElementById('Jazz1'); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById('Jazz2');
  if(Jazz && Jazz.isJazz) Jazz.MidiOut(0x80,0,0);
  visit(document.body);
  if(Jazz && Jazz.isJazz && midi_init){
   var a=midi_init.split(' ');
   for(var i in a)
   { var b=a[i].split(':');
     Jazz.MidiOut(0xC0+parseInt(b[0]),b[1],0);
   }
  }
 }

 function down(e){
  var e=window.event || e;
  var t;
  if (e.target) t = e.target;
  else if (e.srcElement) t = e.srcElement;
  up(0);
  var a=t.getAttribute('midi').split(' ');
  if(Jazz && Jazz.isJazz){
   for(var i in a){
    var b=a[i].split(':');
    if(b.length==1){ b[1]=b[0]; b[0]=0; b[2]=100;}
    else if(b.length==2){ b[2]=100;}
    Jazz.MidiOut(0x90+parseInt(b[0]),b[1],b[2]);
   }
  }
  t.className='playing';
  playing=t;
 }

 function up(e){
  if(!playing) return;
  var a=playing.getAttribute('midi').split(' ');
  if(Jazz && Jazz.isJazz){
   for(var i in a){
    var b=a[i].split(':');
    if(b.length==1){ b[1]=b[0]; b[0]=0;}
    Jazz.MidiOut(0x80+parseInt(b[0]),b[1],0);
   }
  }
  playing.className='';
  playing=null;
 }

})();