To embed this JavaScript metronome in your own website, you need to copy and paste code into all the appropriate places. Unfortunately, it is not as easy as copying one bit of code and embedding it, but it is really not that hard to do.
To begin you will need to copy and paste the main brains of the metronome into the <head> section of your html:
<script type='text/javascript'>
//JavaScript Metronome by Raymond May Jr
//http://rnamusic.com
//http://pianowithraymond.com
//Released to the Public Domain
var bpm = 120;
var rate = 60000/bpm;
var nextBeat = rate;
var nextMainBeat = rate;
var signature = 1;
var go = 1;
var sound = 0;
var t;
//timer object by Diego of fyneworks
//http://fyneworks.blogspot.com/2007/04/javascript-timer.html
var timer =
{
time: 0,
now: function(){ return (new Date()).getTime(); },
start: function(){ this.time = this.now(); },
since: function(){ return this.now()-this.time; }
}
function startMetro()
{
nextBeat = rate;
nextMainBeat = rate;
timer.start();
metro();
}
function stopMetro()
{
clearTimeout(t);
}
function metro()
{
time = timer.since();
if(time >= nextBeat)
{
if(time >= nextMainBeat & signature != 1)
{
document.getElementById('txt').value="MEASURE";
PlaySound('measure1');
nextMainBeat = nextBeat + (signature*rate);
nextBeat = nextBeat + rate;
}else
{
document.getElementById('txt').value="BEAT";
if(sound == 0)
{
PlaySound('beat1');
sound = 1;
}else if(sound == 1)
{
PlaySound('beat2');
sound = 2;
}else if(sound == 2)
{
PlaySound('beat3');
sound = 3;
}else if(sound == 3)
{
PlaySound('beat4');
sound = 0;
}
nextBeat = nextBeat + rate;
}
}else if(time >= (nextBeat - (.5*rate)))
{
document.getElementById('txt').value="";
}
t=setTimeout("metro()",5);
}
function bpmUp(amt)
{
bpm = bpm + amt;
rateChange(bpm);
currentBpm();
currentTempo();
}
function bpmDown(amt)
{
if((bpm - amt) >= 1)
{
bpm = bpm - amt;
rateChange(bpm);
currentBpm();
currentTempo();
}
}
function sigUp()
{
signature = signature + 1;
sigChange();
document.getElementById('sig').value=(signature + "/4");
}
function sigDown()
{
if(signature > 1)
{
signature = signature - 1;
sigChange();
document.getElementById('sig').value=(signature + "/4");
}
}
function rateChange(newBpm)
{
rate = 60000/newBpm;
}
function sigChange()
{
nextMainBeat = nextBeat + rate;
}
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Stop();
}
function currentBpm()
{
document.getElementById('bpm').value=bpm;
}
function currentSig()
{
document.getElementById('sig').value=(signature + "/4");
}
function currentTempo()
{
var tempo;
if(bpm < 40)
{
tempo = "Larghissimo";
}else if(bpm >= 40 && bpm < 60)
{
tempo = "Largo";
}else if(bpm >= 60 && bpm < 66)
{
tempo = "Larghetto";
}else if(bpm >= 66 && bpm < 76)
{
tempo = "Adagio";
}else if(bpm >= 76 && bpm < 108)
{
tempo = "Andante";
}else if(bpm >= 108 && bpm < 120)
{
tempo = "Moderato";
}else if(bpm >= 120 && bpm < 168)
{
tempo = "Allegro";
}else if(bpm >= 168 && bpm < 208)
{
tempo = "Presto";
}else if(bpm >= 208)
{
tempo = "Prestissimo";
}
document.getElementById('tempo').value=(tempo);
}
</script>
To get around IE's unfortunate handling of ActiveX controls directly embedded in HTML, you will need to call the embedding of audio files from an external JavaScript file:
<script src='http://pages.pianowithraymond.com/metro_embed.js' type='text/javascript'/>
Which contains the follow source here on this site (please refrain from using these sounds and host your own metronome sounds):
function embedSounds()
{
document.write('<embed src="http://pages.pianowithraymond.com/Beat.wav" autostart="false" autorewind="true" id="beat1" enablejavascript="true" height="0" width="0"></embed><embed src="http://pages.pianowithraymond.com/Beat.wav" autostart="false" autorewind="true" id="beat2" enablejavascript="true" height="0" width="0"></embed><embed src="http://pages.pianowithraymond.com/Beat.wav" autostart="false" autorewind="true" id="beat3" enablejavascript="true" height="0" width="0"></embed><embed src="http://pages.pianowithraymond.com/Beat.wav" autostart="false" autorewind="true" id="beat4" enablejavascript="true" height="0" width="0"></embed><embed src="http://pages.pianowithraymond.com/MainBeat.wav" autostart="false" autorewind="true" id="measure1" enablejavascript="true" height="0" width="0"></embed>');
}
To initialize the metronome you will need to call the following functions in your onLoad():
<body onLoad='currentBpm();currentSig();currentTempo();'>
And to load the sounds you will want the following line of code near the end of yuor HTML body:
<script type="text/javascript">embedSounds();</script>
Finally, to actually display the metronome, you need to include the following HTML form:
<form class="metro"><input class="metroTick" id="txt" type="text" value="Click Start" size="10">
<input class="metroButton" value="Start" onclick="startMetro()" type="button"> <input class="metroButton" value="Stop" onclick="stopMetro()" type="button">
BPM: <input class="metroBpm" id="bpm" size="4" type="text"> <input class="metroBpm" id="tempo" size="10" type="text">
<input class="metroButton" value="+" onclick="bpmUp(1)" type="button"> <input id="metroBpm" class="metroButton" value="-" onclick="bpmDown(1)" type="button"> <input class="metroButton" value="++" onclick="bpmUp(20)" type="button"> <input class="metroButton" value="--" onclick="bpmDown(20)" type="button">
Time Signature: <input class="metroSig" id="sig" size="6" type="text">
<input class="metroButton" value="+" onclick="sigUp()" type="button"> <input class="metroButton" value="-" onclick="sigDown()" type="button"></form>
And its CSS styling:
/*Metronomome*/
form.metro{
background-color: #CCFFFF;
font-size: 150%;
border: 1px solid $bordercolor;
padding: 2px;
}
input.metroButton{
cursor:pointer;
border: 1px solid $bordercolor;
font-size: 80%;
padding: 4px;
background-color: #FFFFFF;
}
input.metroTick{
font-size: 250%;
border: none;
background-color: #CCFFFF;
}
input.metroBpm{
border: none;
font-size: 100%;
background-color: #CCFFFF;
}
input.metroSig{
border: none;
font-size: 100%;
background-color: #CCFFFF;
}
0 comments:
Post a Comment