-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (68 loc) · 1.81 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
<html>
<head>
<meta charset="UTF-8">
<title>Po</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<audio data-key="A" src="assets/sounds/clap.wav"></audio>
<audio data-key="B" src="assets/sounds/hihat.wav"></audio>
<audio data-key="C" src="assets/sounds/kick.wav"></audio>
<audio data-key="D" src="assets/sounds/openhat.wav"></audio>
<audio data-key="E" src="assets/sounds/boom.wav"></audio>
<audio data-key="F" src="assets/sounds/ride.wav"></audio>
<audio data-key="G" src="assets/sounds/snare.wav"></audio>
<audio data-key="{" src="assets/sounds/tom.wav"></audio>
<audio data-key="}" src="assets/sounds/tink.wav"></audio>
<div class="opt">
<span>Rules</span>
<textarea id="rules"></textarea>
<span>Axiom</span>
<input type="text" id="axiom">
<span>Iteration</span>
<input type="text" id="iteration">
<span>Duration</span>
<input type="text" id="duration">
<span>Octave</span>
<input type="text" id="octave">
<span>Default Instrument</span>
<select id="instrument">
<option value="edm">edm</option>
<option value="piano">piano</option>
<option value="acoustic">acoustic</option>
<option value="organ">organ</option>
</select>
<button onclick="stop()">Stop</button>
<button onclick="start()">Start</button>
<p><a href="https://github.com/abdullah/po" target="_blank"> Github</a</p>
</div>
<script src="assets/audiosynth.js"></script>
<script src="assets/po.js"></script>
<script>
var po = new Po({
axiom: 'E',
rules: [
['A','AEDB'],
['B','FGCD'],
['C','AED'],
['D','EFG'],
['E','AEC'],
['F','{C}'],
['G','F}AC{'],
['{','B}G'],
['}','[A]G']
],
iteration: 4,
duration:2,
octave:4,
defaultInstrument : "acoustic"
})
function stop() {
po.stop()
}
function start() {
po.start()
}
</script>
</body>
</html>