-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
54 lines (48 loc) · 1.95 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
<html>
<head>
<title>Elm Simon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.2.0/milligram.min.css">
</head>
<body style="background-color: #111;">
<div id="main"></div>
<script src="Main.js"></script>
<script>
var app = Elm.Main.fullscreen();
app.ports.send.subscribe(play);
app.ports.blink.subscribe(changeColor);
var ctx = new window.webkitAudioContext || window.AudioContext;
function play(args) {
var note = args.note;
var tempo = args.tempo;
var waveType = "square";
var hz = note.hz;
var octave = note.octave;
var sustain = note.duration;
var sustainFnl = sustain * tempo;
var osc = ctx.createOscillator();
var gainNode = ctx.createGain();
osc.connect(gainNode);
gainNode.connect(ctx.destination);
gainNode.gain.value = 0.0;
gainNode.gain.setTargetAtTime(0.75, ctx.currentTime, 0.1);
gainNode.gain.setTargetAtTime(0.0, ctx.currentTime + sustainFnl, 0.01);
osc.frequency.value = hz * octave / 4;
osc.type = waveType;
osc.start();
osc.stop(ctx.currentTime + sustainFnl + 0.01);
}
function changeColor(id) {
var id = String(id);
var el = document.getElementById(id);
color = el.style.borderColor;
el.style.transition = "opacity 0.5s ease-in";
el.style.backgroundColor = color;
el.style.opacity = 0.25;
setTimeout( function() {
el.style.opacity = 1;
el.style.backgroundColor = "#111";
}, 500);
}
</script>
</body>
</html>