Jazz-Soft.net

We make it sound!

Home » Examples » Jazz-Plugin » Metronome

Metronome

This example requires Jazz-Plugin v.1.0 or later.

How it works

Select meter and tempo and press the button. That simple!

Page source

<!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>

See also