-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
126 lines (118 loc) · 7.85 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
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>mouseboard</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<!-- tone.js import -->
<script src="https://tonejs.github.io/build/Tone.js"></script>
<script src="drumsample_blobs.js"></script>
<script src="mouseboard.js"></script>
<script src="autocompose.js"></script>
</head>
<body>
<span style="font-size: calc(max(1.2vh, 1.2vw))"><h2 style="display:inline; font-size: calc(max(1.9vh, 1.9vw));">mouseboard</h2>, autoharp and bossa nova machine <br> inspired by <a href="https://foldr.moe/harp">foldr.moe/harp</a></span>
<div class="container">
<div id="circle-of-fifths"><div id="circle-of-fifths-bg" class="cof-bg-during-manual"></div></div>
<div class="panel" id="panel-primary">
<div class="panel">
<div id="panel-voicingpads" class="collapsible-content voicingpads-container">
<button class="toggle-button button-shadow" onclick="toggleVoicingPads()" style="margin-bottom: 10px; grid-row: 1/1; grid-column: 1/9">Hide touchscreen voicing buttons 📱</button>
</div>
</div>
<div id="chord-symbol-display"></div>
<div class="collapsible-container">
<div class="autocomposer-ui-row">
<button id="autocomposer-play-button" class="autocomposer-button autocomposer-child button-shadow fa fa-play"></button>
<div id="autocomposer-info-display" class="autocomposer-display autocomposer-child">Press play to start the Bossa Nova Autocomposer</div>
</div>
<div class="autocomposer-ui-row">
<div id="autocomposer-queue-display" class="autocomposer-display autocomposer-child"></div>
<button id="autocomposer-random-button" class="autocomposer-button autocomposer-child button-shadow">🎲</button>
</div>
</div>
<div class="panel-scrollable-section">
<div class="collapsible-container">
<select id="output-selector" class="toggle-button button-shadow">
</select>
</div>
<div class="collapsible-container">
<button class="toggle-button button-shadow" onclick="layoutBasspads()">Toggle between Circle, Tonnetz, and Piano layouts 🔁</button>
</div>
<div class="collapsible-container">
<button class="toggle-button button-shadow" onclick="toggleVoicingPads()">Show touchscreen voicing buttons 📱</button>
</div>
<div class="collapsible-container">
<button class="toggle-button button-shadow collapsible-button"><i class="fa fa-caret-right collapsible-button-caret"></i>Info: Manual mode 👇</button>
<div class="collapsible-content">
<div>
<p><b>Touch: </b>Tap "Show touchscreen voicing buttons" to show the chord voicing buttons (landscape orientation recommended). Tap on notes on the circle of fifths to play and select a bass for the voicings.</p>
<p>
<b>Mouse & keyboard: </b> Hover the mouse over the pads to select a bass note. Use the keyboard to play chord voicings on the current bass.
Press <b>z</b> to play just the current bass note; you can hold/release it independently of the voicing buttons.
</p>
<p>
Keyboard mapping for voicings:
<ul id="list-chord-keyboard-mapping"></ul>
There is automatic voice leading (i.e. the voices will adjust their octave
to be closest to their last played note). This can sometimes go wrong, though. Press the backtick
key (`) to reset the voice leading memory.
</p>
</div>
</div>
</div>
<!-- <div class="collapsible-container">
<button class="toggle-button button-shadow collapsible-button"><i class="fa fa-caret-right collapsible-button-caret"></i>Manual mode: What to play 🎼</button>
<div class="collapsible-content">
<ul>
<li><b>Two-five-one: </b> Hover over three consecutive pads (in counterclockwise order) and press <b>z+s, z+d, z+f</b> respectively.
You get a nice ii-V-I progression using the minor 9th, dominant 9th, and major 9th voicings.</li>
<li><b>Slash chords: </b> play a voicing, and while holding down the voicing button, move your mouse to a different pad and press <b>z</b> to play the new bass note.
You have (most likely) played a <i>slash chord</i>, where the bass note is different from the bass note implied by the upper notes!</li>
<li><b>Play around with the Autocomposer</b> to get ideas for chord progressions to play by hand!</li>
</ul>
</div>
</div> -->
<div class="collapsible-container">
<button class="toggle-button button-shadow collapsible-button"><i class="fa fa-caret-down collapsible-button-caret"></i>Info: Autocomposer mode 🤖</button>
<div class="collapsible-content collapsible-content-active">
<p>
<p><strong>Let the Autocomposer generate for you an infinite stream of bossa nova! </strong></p>
<ul>
<li>While the Autocomposer plays, click/tap on a note pad (or the <i class="fas fa-dice"></i> Random button) to request a new key center.</li>
<li>The Autocomposer will create and queue up bars of music (chord progressions) to smoothly move to each of your requested key centers in order.
More than one bar can be queued every time you request a key. </li>
<li>Every four beats, one new bar is popped from the queue and played.</li>
<li>Each queued bar shows the chord progression type, as well as the key center arrived at by the time it ends.</li>
</ul>
<p><strong>Tip: </strong>Try clicking keys close to the ones you last clicked (or close to the last-queued bar's key). However, the Autocomposer can handle moving from any key to any other key; feel free to play around!</p>
</p>
</div>
</div>
</div>
</div>
</div>
<button id="start-prompt-screen"><h2>click to start</h2></button>
<script>
/* collapsible info divs */
const collapsibleButtons = document.getElementsByClassName("collapsible-button");
for (const collapsibleButton of collapsibleButtons) {
collapsibleButton.addEventListener("click", () => {
collapsibleButton.nextElementSibling.classList.toggle("collapsible-content-active");
const caretInButtonClassList = collapsibleButton.firstElementChild.classList;
if (caretInButtonClassList.contains("fa")) {
caretInButtonClassList.toggle("fa-caret-right");
caretInButtonClassList.toggle("fa-caret-down");
}
})
}
/* audio stuff.. first setup main mouseboard interface and audio, then
* setup the autocomposer as a callback after successful mouseboard setup */
setup(setupAutoComposer);
</script>
</body>
</html>