-
Notifications
You must be signed in to change notification settings - Fork 0
/
midi.html
161 lines (139 loc) · 9.72 KB
/
midi.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/midi.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<meta name="description" content="MIDI Decoder">
<meta name="og:description" content="MIDI Decoder">
<link rel="canonical" href="https://samlav.in">
<meta name="og:url" content="https://samlav.in">
<link rel="image_src" href="https://i.imgur.com/bZ37x0y.png">
<meta name="og:image" content="https://i.imgur.com/bZ37x0y.png">
<meta name="author" content="Sam Lavin">
<script src="https://kit.fontawesome.com/ecfdd87cbf.js" crossorigin="anonymous"></script>
<title>Midi Tester</title>
</head>
<body>
<div id="sticky">
<nav>
<div class="navbar navbar-dark nav-pills nav-fill nav" id="navbar">
<a href="index.html" class="btn btn-primary ">To Home</a>
<h3 style="text-align: center; color: whitesmoke">MIDI Decoder</h3>
<img src="img/Innovate_1_Crop_Circle.png" style="float: right; object-fit: cover; max-width: 100%; max-height: 3em;" alt="Website icon">
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-8 inputData" style="display:none;">
<table class="table" id="table">
<tr>
<th scope="col">Timestamp:</th>
<th scope="col">Raw Input:</th>
<th scope="col">Input type:</th>
<th scope="col"><span style="text-align: left">Data:</span><span style="float: right"><button type="button" class="btn btn-outline-primary btn-sm" id="toTop">To Top</button></span></th>
</tr>
</table>
</div>
<div class="col-4">
<div id="nav" style="position: fixed; top: 3em; right: unset; bottom: unset; left: unset; margin: 1rem">
<label for="midiIn" style="display: none">Input:</label>
<h2>Input Select:</h2>
<select id="midiIn" class="custom-select">
<option value='0'>No inputs detected!</option>
</select>
<br><br>
<div class="inputData" style="display: none">
<h2>Filters:
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-primary" id="allon">All On</button>
<button type="button" class="btn btn-outline-primary" id="alloff">All Off</button>
</div>
</h2>
<label style="display: none" for="activesensingcheck">Active Sensing</label>
<input type="checkbox" id="activesensingcheck" name="activesensingcheck" class="custom-checkbox filters" checked> - Active Sensing
<br>
<label style="display: none" for="channelaftertouchcheck">Channel Aftertouch</label>
<input type="checkbox" id="channelaftertouchcheck" name="channelaftertouchcheck" class="custom-checkbox filters" checked> - Channel Aftertouch
<br>
<label style="display: none" for="channelmodecheck">Channel Mode</label>
<input type="checkbox" id="channelmodecheck" name="channelmodecheck" class="custom-checkbox filters" checked> - Channel Mode
<br>
<label style="display: none" for="clockcheck">Clock</label>
<input type="checkbox" id="clockcheck" name="clockcheck" class="custom-checkbox filters" checked> - Clock
<br>
<label style="display: none" for="continuecheck">Continue</label>
<input type="checkbox" id="continuecheck" name="continuecheck" class="custom-checkbox filters" checked> - Continue
<br>
<label style="display: none" for="controlchangecheck">Control Change</label>
<input type="checkbox" id="controlchangecheck" name="controlchangecheck" class="custom-checkbox filters" checked> - Control Change
<br>
<label style="display: none" for="keyaftertouchcheck">Key Aftertouch</label>
<input type="checkbox" id="keyaftertouchcheck" name="keyaftertouchcheck" class="custom-checkbox filters" checked> - Key Aftertouch
<br>
<label style="display: none" for="noteoffcheck">Note Off</label>
<input type="checkbox" id="noteoffcheck" name="noteoffcheck" class="custom-checkbox filters" checked> - Note Off
<br>
<label style="display: none" for="noteoncheck">Note On</label>
<input type="checkbox" id="noteoncheck" name="noteoncheck" class="custom-checkbox filters" checked> - Note On
<br>
<label style="display: none" for="nrpncheck">NRPN</label>
<input type="checkbox" id="nrpncheck" name="nrpncheck" class="custom-checkbox filters" checked> - NRPN
<br>
<label style="display: none" for="pitchbendcheck">Pitch Bend</label>
<input type="checkbox" id="pitchbendcheck" name="pitchbendcheck" class="custom-checkbox filters" checked> - Pitch Bend
<br>
<label style="display: none" for="programchangecheck">Program Change</label>
<input type="checkbox" id="programchangecheck" name="programchangecheck" class="custom-checkbox filters" checked> - Program Change
<br>
<label style="display: none" for="resetcheck">Reset</label>
<input type="checkbox" id="resetcheck" name="resetcheck" class="custom-checkbox filters" checked> - Reset
<br>
<label style="display: none" for="songpositioncheck">Song Position</label>
<input type="checkbox" id="songpositioncheck" name="songpositioncheck" class="custom-checkbox filters" checked> - Song Position
<br>
<label style="display: none" for="songselectcheck">Song Select</label>
<input type="checkbox" id="songselectcheck" name="songselectcheck" class="custom-checkbox filters" checked> - Song Select
<br>
<label style="display: none" for="startcheck">Start</label>
<input type="checkbox" id="startcheck" name="startcheck" class="custom-checkbox filters" checked> - Start
<br>
<label style="display: none" for="stopcheck">Stop</label>
<input type="checkbox" id="stopcheck" name="stopcheck" class="custom-checkbox filters" checked> - Stop
<br>
<label style="display: none" for="sysexcheck">System Exclusive Message</label>
<input type="checkbox" id="sysexcheck" name="sysexcheck" class="custom-checkbox filters" checked> - System Exclusive Message
<br>
<label style="display: none" for="timecodecheck">Timecode</label>
<input type="checkbox" id="timecodecheck" name="timecodecheck" class="custom-checkbox filters" checked> - Timecode
<br>
<label style="display: none" for="tuningrequestcheck">Tuning Request</label>
<input type="checkbox" id="tuningrequestcheck" name="tuningrequestcheck" class="custom-checkbox filters" checked> - Tuning Request
<br>
<label style="display: none" for="unknownsystemmessagecheck">Unknown System Message</label>
<input type="checkbox" id="unknownsystemmessagecheck" name="unknownsystemmessagecheck" class="custom-checkbox filters" checked> - Unknown System Message
<br><hr>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Purge Amount:</span>
</div>
<label for="purgeNum" style="display: none">Purge Amount:</label><input value=256 type="number" min="1" max="500" class="form-control" placeholder="Purge amount" id="purgeNum" required>
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="purgeSet">Set!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
<script src="js/midi.js"></script>
</body>
</html>