-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
136 lines (114 loc) · 6.68 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gbloink!</title>
<script src="https://g200kg.github.io/webaudio-tinysynth/webaudio-tinysynth.js"></script>
<link href="gbloink.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<nav>
<img src="img/gbloinklogo.png" alt="gbloink!">
<a href="http://gbloink.com">Home</a> |
<a href="http://thoughtstorms.info/view/Gbloink">Gbloink! on ThoughtStorms</a>
</nav>
<header>
<h2>Gbloink! ... in the browser!</h2>
</header>
<main>
<section id="play-area">
<canvas id="canvasId" width="800" height="400"></canvas>
</section>
<section id="controls">
<div>
<button id="startButton"><img src="img/play.png" /></button>
<button id="stopButton"><img src="img/pause.png" /></button>
</div>
<table>
<tr>
<th>Speed</th>
<th>Instrument</th>
<th>Volume</th>
<th>Decay</th>
</tr>
<tr>
<td class="red"><canvas id="redball_speed" class="control_bar" width="170" height="20"></canvas></td>
<td class="red"><canvas id="redball_instrument" class="control_bar" width="170" height="20"></canvas></td>
<td class="red"><canvas id="redball_volume" class="control_bar" width="170" height="20"></canvas></td>
<td class="red"><canvas id="redball_delay" class="control_bar" width="170" height="20"></canvas></td>
</tr>
<tr>
<td class="green"><canvas id="greenball_speed" class="control_bar" width="170" height="20"></canvas></td>
<td class="green"><canvas id="greenball_instrument" class="control_bar" width="170" height="20"></canvas></td>
<td class="green"><canvas id="greenball_volume" class="control_bar" width="170" height="20"></canvas></td>
<td class="green"><canvas id="greenball_delay" class="control_bar" width="170" height="20"></canvas></td>
</tr>
<tr>
<td class="blue"><canvas id="blueball_speed" class="control_bar" width="170" height="20"></canvas></td>
<td class="blue"><canvas id="blueball_instrument" class="control_bar" width="170" height="20"></canvas></td>
<td class="blue"><canvas id="blueball_volume" class="control_bar" width="170" height="20"></canvas></td>
<td class="blue"><canvas id="blueball_delay" class="control_bar" width="170" height="20"></canvas></td>
</tr>
</table>
<br /> <br />
<div>
<input type="radio" checked name="scale" value="major" onClick="noteCalculator.setCurrent('major');" />Major<br />
<input type="radio" name="scale" value="minor" onClick="noteCalculator.setCurrent('minor');" />Minor<br />
<input type="radio" name="scale" value="diminished" onClick="noteCalculator.setCurrent('diminished');" />Diminished<br />
<input type="radio" name="scale" value="pent1" onClick="noteCalculator.setCurrent('pent1');">Pentatonic 1<br />
<input type="radio" name="scale" value="pent2" onClick="noteCalculator.setCurrent('pent2');">Pentatonic 2<br />
<input type="radio" name="scale" value="arab" onClick="noteCalculator.setCurrent('arab');" />Arab<br />
<input type="radio" name="scale" value="gypsy" onClick="noteCalculator.setCurrent('gypsy');" />Gypsy<br />
<input type="radio" name="scale" value="debussy" onClick="noteCalculator.setCurrent('debussy');" />Debussy<br />
<input type="radio" name="scale" value="chromatic" onClick="noteCalculator.setCurrent('chromatic');" />Chromatic<br />
</div>
</section>
</main>
<footer>
<section id="about">
<h2>About</h2>
<p>
Gbloink! is an interactive musical game. As the balls move around the screen and collide with the walls and blocks, they play musical notes. You can control the speed of each ball, and the instrument, volume and note-length of each corresponding synth.
</p>
<p>
And you can add and remove blocks by clicking on the canvas.
</p>
<p>Click along the coloured bars to change the parameter. Further to the left is "lower" (eg. slower for speed, quieter for volume etc.) Click somewhere along the "Instrument" bar chooses which of the 127 GM sounds the ball plays.</p>
<p>Please note, this is all pretty experimental. </p>
<h3>Further Reading</h3>
<ul>
<li><a href="http://gbloink.com">Current Gbloink! site</a></li>
<li>More about Gbloink! <a href="http://thoughtstorms.info/view/WhyGbloinkIsInteresting">on my wiki</a>.</li>
<li>Source <a href="https://github.com/interstar/gbloink">on GitHub</a></li>
<li>The new multi-timbral Gbloink! is made possible by <a href="https://github.com/g200kg/webaudio-tinysynth">WebAudioTinySynth</a></li>
<li>and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
</ul>
<p>© Synaesmedia 1997-2023, released under GPL 3.0</p>
</section>
</footer>
<script src="gbloink.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var game = new Game("canvasId", MIDI);
noteCalculator.setCurrent("major");
// You can add any other initialization code here
// For example, setting up the TinySynth library
var intervalId;
intervalId = setInterval(() => game.next(), 50);
document.getElementById('startButton').addEventListener('click', function () {
// Implement your start game logic here
clearInterval(intervalId);
intervalId = setInterval(() => game.next(), 50);
});
document.getElementById('stopButton').addEventListener('click', function () {
// Implement your stop game logic here
clearInterval(intervalId);
});
});
</script>
</div>
</body>
</html>