-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
86 lines (79 loc) · 2.58 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<title>Web MIDI Prototypes / maxvogler.de</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;1,100&display=swap"
rel="stylesheet"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/assets/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/assets/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/assets/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
</head>
<body>
<h1>Web MIDI Experiments</h1>
<p>
Interactive experiments that augment DJ software with web technology. Run
these in your browser and connect them to your favorite DJ software and
MIDI hardware. Read the source code and add your own experiment at
<a href="https://github.com/max-vogler/midi" target="_blank"
>github.com/max-vogler/midi</a
>.
</p>
<div class="cards">
<a class="card" href="/viz/">
<video src="viz/recording.mov" muted autoplay loop></video>
<div>/VIZ/ Visualize an external MIDI beat clock</div>
</a>
<a class="card" href="/touch/">
<video src="touch/recording.mov" muted autoplay loop></video>
<div>/TOUCH/ Control effects with touch & pressure</div>
</a>
<a class="card" href="/gateway/">
<video src="gateway/recording.mov" muted autoplay loop></video>
<div>/GATEWAY/ Forward MIDI to another device with WebRTC</div>
</a>
<a class="card" href="/controller/">
<video src="controller/recording.mov" muted autoplay loop></video>
<div>/CONTROLLER/ Control music with gamepads</div>
</a>
<a class="card" href="/handpose/">
<video src="handpose/recording.mov" muted autoplay loop></video>
<div>/HANDPOSE/ Control effects with your hand mid-air</div>
</a>
<a class="card" href="/latency/">
<video src="latency/recording.mov" muted autoplay loop></video>
<div>/LATENCY/ Measure latency of a loopback MIDI bus</div>
</a>
<a
class="card jumbotron"
href="https://github.com/max-vogler/midi"
target="_blank"
>
+
</a>
</div>
</body>
</html>