-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (122 loc) · 5.49 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>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-106226940-1', 'auto');
ga('send', 'pageview');
</script>
<button id="enableMicButton">Enable microphone</button>
<header>
<h1 class="wake-word-indicator">Barkeep</h1>
</header>
<ul class="tab-links">
<li><a class="tab-link" href="#loadSongs">Load songs</a></li>
<li><a class="tab-link" href="#playlist">Playlist</a></li>
<li><a class="tab-link" href="#importExport">Manage song library</a></li>
<li><a class="tab-link" href="#logs">Logs</a></li>
</ul>
<div class="tab-pane" id="loadSongs">
<h2>Load files from your computer</h2>
<div id="filesDropArea">
<p>Drag audio files here or click in this area.</p>
<input type="file" id="files" name="files[]" multiple />
</div>
<h2>Demo track</h2>
<p>If you want to try out a demo first, <button id="loadDemoSongButton">click here!</button></p>
<div class="info">
<p>Don't worry: file data is only used locally, and never leaves your browser.</p>
</div>
</div>
<div class="tab-pane" id="playlist">
<div id="noSongsContainer">
<p><i>Please load some songs first then check back here.</i></p>
</div>
<div id="someSongsContainer" class="hidden">
<div class="info">
<p>Great! Now, to use the voice commands:</p>
<ol>
<li>Click the <b>Enable microphone</b> button above</li>
<li>Say <b>"Barkeep"</b>: the header above should light up red to show barkeep is listening</li>
<li>Try one of the following voice commands:</li>
</ol>
<ul>
<li><i>"Play <b><span class="sampleVoiceCommandSongName"></span></b>"</i></li>
<li><i>"Play <b><span class="sampleVoiceCommandSongName"></span></b> from bar <b>42</b> at <b>80%</b>"</i></li>
<li><i>"Bar <b>42</b>"</i></li>
<li><i>"Loop bar <b>42</b>"</i></li>
<li><i>"Loop from bar <b>42</b> through to bar <b>45</b>"</i></li>
<li><i>"Stop!"</i></li>
<li><i>"Nothing"</i> ☺</li>
</ul>
<p>(You can still do everything with the UI, but voice commands are easier!)</p>
</div>
<div id="songsContainer"></div>
<script id="songTemplate" type="text/template">
<table class="playlist">
<thead>
<tr>
<th colspan="2">Song</th>
<th>BPM</th>
<th>Beats per bar</th>
<th>Playback speed (%)</th>
</tr>
</thead>
<tbody>
{{#playlist}}
<tr>
<td><button class="play" onclick="barkeep_play('{{escapedName}}')">▶</button></td>
<td class="name">{{name}}</td>
<td><input type="number" value="{{bpm}}" min="1" /></td>
<td><input type="number" value="{{beatsPerBar}}" min="1" /></td>
<td><input type="number" value="{{playbackSpeedPercent}}" min="50" /></td>
</tr>
{{/}}
</tbody>
</table>
</script>
<hr />
<div>
<h3>Bar controls</h3>
<div class="panel-container">
<div>
<h4>Jump to bar:</h4>
<input id="jumpToBarNumber" type="number" class="bar-number" value="1" />
<button id="jumpToBarButton">Go</button>
</div>
<div>
<h4>Loop bars:</h4>
<input id="fromBarNumber" type="number" class="bar-number" value="1" /> to
<input id="toBarNumber" type="number" class="bar-number" value="4" />
<button id="loopBarsButton">Go</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="importExport">
<h3>Import/Export song library</h3>
<div class="panel-container">
<div>
<input type="file" id="importSongLibraryInput" />
</div>
<div>
<button id="exportSongLibraryButton">Download</button>
</div>
</div>
</div>
<div class="tab-pane" id="logs">
<div id="loggerOutput">Awaiting logs...</div>
</div>
<script src="build/main.bundle.js"></script>
</body>
</html>