forked from max-mapper/web-mpd
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
93 lines (87 loc) · 4.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
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
<!DOCTYPE html>
<html lang="en" class="">
<head>
<link rel="stylesheet" href="./style.css">
<title>Web MPD</title>
</head>
<body>
<script src="bundle.js"></script>
<div id="loading-screen">
<div class="column"></div>
<section class="column">
<img src="images/loading.png">
<center>
<h2>Loading...</h2>
</center>
</section>
<div class="column"></div>
</div>
<a href="https://github.com/maxogden/web-mpd"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<div id="container">
<h1>web mpd</h1>
<ul id="keyboard">
<li data-key="backtick" class="symbol keyboard-key">`</li>
<li data-key="1" class="symbol keyboard-key">1</li>
<li data-key="2" class="symbol keyboard-key">2</li>
<li data-key="3" class="symbol keyboard-key">3</li>
<li data-key="4" class="symbol keyboard-key">4</li>
<li data-key="5" class="symbol keyboard-key">5</li>
<li data-key="6" class="symbol keyboard-key">6</li>
<li data-key="7" class="symbol keyboard-key">7</li>
<li data-key="8" class="symbol keyboard-key">8</li>
<li data-key="9" class="symbol keyboard-key">9</li>
<li data-key="0" class="symbol keyboard-key">0</li>
<li data-key="minus" class="symbol keyboard-key">-</li>
<li data-key="equals" class="symbol keyboard-key">=</li>
<li data-key="delete" class="delete lastitem keyboard-key">delete</li>
<li data-key="tab" class="tab keyboard-key">tab</li>
<li data-key="q" class="letter keyboard-key">q</li>
<li data-key="w" class="letter keyboard-key">w</li>
<li data-key="e" class="letter keyboard-key">e</li>
<li data-key="r" class="letter keyboard-key">r</li>
<li data-key="t" class="letter keyboard-key">t</li>
<li data-key="y" class="letter keyboard-key">y</li>
<li data-key="u" class="letter keyboard-key">u</li>
<li data-key="i" class="letter keyboard-key">i</li>
<li data-key="o" class="letter keyboard-key">o</li>
<li data-key="p" class="letter keyboard-key">p</li>
<li data-key="openbracket" class="symbol keyboard-key">[</li>
<li data-key="closebracket" class="symbol keyboard-key">]</li>
<li data-key="backslash" class="symbol lastitem keyboard-key">\</li>
<li data-key="capslock" class="capslock keyboard-key">caps lock</li>
<li data-key="a" class="letter keyboard-key">a</li>
<li data-key="s" class="letter keyboard-key">s</li>
<li data-key="d" class="letter keyboard-key">d</li>
<li data-key="f" class="letter keyboard-key">f</li>
<li data-key="g" class="letter keyboard-key">g</li>
<li data-key="h" class="letter keyboard-key">h</li>
<li data-key="j" class="letter keyboard-key">j</li>
<li data-key="k" class="letter keyboard-key">k</li>
<li data-key="l" class="letter keyboard-key">l</li>
<li data-key="semicolon" class="symbol keyboard-key">;</li>
<li data-key="quote" class="symbol keyboard-key">'</li>
<li data-key="return" class="return lastitem keyboard-key">return</li>
<li data-key="shift" class="left-shift keyboard-key">shift</li>
<li data-key="z" class="letter keyboard-key">z</li>
<li data-key="x" class="letter keyboard-key">x</li>
<li data-key="c" class="letter keyboard-key">c</li>
<li data-key="v" class="letter keyboard-key">v</li>
<li data-key="b" class="letter keyboard-key">b</li>
<li data-key="n" class="letter keyboard-key">n</li>
<li data-key="m" class="letter keyboard-key">m</li>
<li data-key="comma" class="symbol keyboard-key">,</li>
<li data-key="period" class="symbol keyboard-key">.</li>
<li data-key="forwardslash" class="symbol keyboard-key">/</li>
<li data-key="shift" class="right-shift lastitem keyboard-key">shift</li>
<li data-key="space" class="space lastitem keyboard-key"> </li>
</ul>
<section class="instructions">
<p>Press keys to play their sound samples.</p>
<p>Drag links to audio files from other web sites onto a key to assign that sound file to that key</p>
<p>When you come back to the site, your drum kit is preserved (in your browser)</p>
<p>Press Spacebar to start/stop recording a loop. Reload to clear the loop (for now)</p>
<p>You can also drag links to <a href="http://studio.substack.net/groove?time=1434177036628">Studio Substack</a> sound-generating functions, like from the history list <a href="http://studio.substack.net/-/recent">here</a></p>
</section>
</div>
</body>
</html>