Jazz-Soft.net
We make it sound!
This example requires Jazz-Plugin v.1.0 or later.
Select meter and tempo and press the button. That simple!
<!DOCTYPE html>
<html>
<head>
<title>Metronome</title>
<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>Metronome</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>
<span id=selectmididiv class="hidden"><label>MIDI Out:</label> <select id=selectmidi onchange='changemidi();'></select></span>
<label>Beats:</label> <select id=beat onchange='changebeat();'></select>
<label>Tempo:</label> <select id=tempo onchange='changetempo();'></select>
<button id=play onclick='play();'>Play</button>
</p>
<script><!--
var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
var playing=0;
var interval=500;
var timeout;
var beat=4;
var count;
function play(){
if(!(Jazz && Jazz.isJazz)) return;
if(playing==1){
playing=0;
document.getElementById('play').innerHTML='Play';
clearTimeout(timeout);
} else {
playing=1;
document.getElementById('play').innerHTML='Stop';
count=0; tick();
}
}
function tick(){
Jazz.MidiOut(0x99,count?33:34,127);
count++; if(count>=beat) count=0;
timeout=setTimeout(tick,interval);
}
function changemidi(){
Jazz.MidiOutOpen(select_out.options[select_out.selectedIndex].value);
}
function changebeat(){
beat=select_beat.options[select_beat.selectedIndex].value;
}
function changetempo(){
interval=60000./select_tempo.options[select_tempo.selectedIndex].value;
}
var select_beat=document.getElementById('beat');
for(var i=1;i<=8;i++){ select_beat[i-1]=new Option(i,i,i==4,i==4);}
var select_tempo=document.getElementById('tempo');
for(var i=40;i<=240;i++){ select_tempo[i-40]=new Option(i,i,i==120,i==120);}
var select_out=document.getElementById('selectmidi');
try{
var list=Jazz.MidiOutList();
for(var i in list){
select_out[i]=new Option(list[i],list[i],i==0,i==0);
}
document.getElementById('selectmididiv').className='';
}
catch(err){}
--></script>
</body>
</html>