forked from rileyjshaw/po-33
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (140 loc) · 4.47 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
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<title>PO-33 drum bank loader</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="sampler-pane pane open-pane">
<!-- Populated by script.js -->
</div>
<div class="menu-pane pane">
<ul class="settings">
<li>
<label>Speed<input type="number" min="0" step="any"/></label>
</li>
<li>
<label>Max sample length (ms)<input type="number" min="0" step="any"/></label>
</li>
<li>
<label>Gap between samples (ms)<input type="number" min="0" step="any"/></label>
</li>
<li>
<label>Pad names<input type="text"/></label>
</li>
<li>
To re-apply the same settings next time,
<a
class="settings-link"
href="/po-33"
target="_blank"
ref="noopener noreferrer"
>bookmark this link</a
>.
</li>
</ul>
</div>
<div class="info-pane pane">
<div class="info-inner">
<p>
A drum sample loader for
<a
href="https://teenage.engineering/guides/po-33/en"
target="_blank"
rel="noopener noreferrer"
>Pocket Operator K.O.</a
>
</p>
<p>
Drag and drop an audio file (.wav, .mp3, .ogg, …) onto a pad. Click to
play the sample. Once you've loaded a few, plug in your K.O. and click
“Play all” to record the samples into a drum bank.
</p>
<p>
This app works 100% locally, so your private samples remain private.
For full instructions, check out
<a
href="https://github.com/rileyjshaw/po-33/blob/master/README.md"
target="_blank"
rel="noopener noreferrer"
>the manual</a
>. Please let me know about any
<a
href="https://github.com/rileyjshaw/po-33/issues"
target="_blank"
rel="noopener noreferrer"
>issues or feature requests on Github</a
>.
</p>
<p>
Created by
<a href="rileyjshaw.com" target="_blank" rel="noopener noreferrer"
>Riley</a
>. Licened under
<a
href="https://github.com/rileyjshaw/po-33/blob/master/LICENSE.md"
target="_blank"
rel="noopener noreferrer"
>GNU GPLv3</a
>. Source code available to remix on
<a
href="https://glitch.com/edit/#!/po-33"
target="_blank"
rel="noopener noreferrer"
>Glitch</a
>
and
<a
href="https://github.com/rileyjshaw/po-33"
target="_blank"
rel="noopener noreferrer"
>Github</a
>.
</p>
<p>
If you like this, please consider
<a
href="https://github.com/sponsors/rileyjshaw"
target="_blank"
rel="noopener noreferrer"
>saying thanks</a
>
✨
</p>
</div>
</div>
<div class="toggles">
<button class="menu-toggle toggle" aria-label="Toggle menu pane">
<svg
focusable="false"
class="open nut-icon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewbox="0 0 100 100"
enable-background="new 0 0 100 100"
xml:space="preserve"
>
<path
d="M75,6.699H25L0,50l25,43.301h50L100,50L75,6.699z M50,70c-11.045,0-20-8.955-20-20s8.955-20,20-20s20,8.955,20,20 S61.045,70,50,70z"
/>
</svg>
<div class="close">✖</div>
</button>
<button class="info-toggle toggle" aria-label="Toggle info pane">
<div class="open info-icon" aria-hidden="true">?</div>
<div class="close">✖</div>
</button>
</div>
</body>
</html>