-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (87 loc) · 3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html>
<head>
<title>tune.js</title>
<meta charset="utf-8" />
<link href='./css/style.css' rel='stylesheet'>
</head>
<body>
<select id="audioSource"></select>
<button onclick="toggleLiveInput()">🎤</button>
<div id="detector" class="vague">
<div class="pitch"><span id="pitch">--</span> Hz</div>
<div class="note"><span id="note">--</span></div>
<canvas id="output" width=300 height=42></canvas>
<div id="detune"><input id="detune_amt"></div>
</div>
<div>
<select id="temperament">
<option value="equal" selected>Equal</option>
<option value="pythagorean" >Pythagorean </option>
<option value="meantone" >Meantone </option>
<option value="werckmeisterI">Werkmeister I </option>
<option value="werckmeisterII">Werkmeister II </option>
<option value="werckmeisterIII">Werkmeister III</option>
</select>
<label for="temperament">temperament</label>
</div>
<div>
<input id="fundamental" type="number" step="0.1" value="440" inputmode="decimal"></input>
<label for="fundamental">fundamental</label>
</div>
<script src="js/tune.js" type="text/javascript"></script>
<script>
// create tuner
var tuner = new Tune({
temperament: "equal",
fundamental: 440
});
// set the temperament
//tuner.setTemperament("meantone");
//tuner.tune(44);
//tuner.setWavelength(0.777);
// listen for dropdown change
let dropdown = document.querySelector('#temperament');
if (dropdown) dropdown.addEventListener('change', function(event) {
console.log(event.target.value);
tuner.setTemperament(event.target.value);
});
// listen for fundamental change
let fundamental = document.querySelector('#fundamental');
if (fundamental) fundamental.addEventListener('input', function(event) {
console.log(event.target.value);
tuner.setFundamental(event.target.value);
});
function updatePitch( time ) {
var cycles = new Array;
analyser.getFloatTimeDomainData( buf );
var ac = autoCorrelate( buf, audioContext.sampleRate );
if (ac == -1) {
detectorElem.className = "vague";
pitchElem.innerText = "--";
noteElem.innerText = "-";
detuneElem.className = "";
detuneAmount.innerText = "--";
} else {
detectorElem.className = "confident";
frequency = ac;
pitchElem.innerText = Math.round( frequency ) ;
var note = Tune.noteFromPitch( frequency );
Tune.getNoteName(Tune.ftom(frequency))
noteElem.innerHTML = Tune.getNoteName(Tune.ftom(frequency) * -1);
var detune = tuner.tune(frequency)
if (detune == 0 ) {
detuneElem.className = "";
detuneAmount.innerHTML = "--";
} else {
detuneAmount.value = format(detune);
}
}
if (!window.requestAnimationFrame){ window.requestAnimationFrame = window.webkitRequestAnimationFrame;}
rafID = window.requestAnimationFrame( updatePitch );
}
// add (+) if positive, and round to 4 decimals
function format(e){ return (e<0?"":"+") + (e).toFixed(0); }
</script>
</body>
</html>