-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
155 lines (143 loc) · 9.63 KB
/
index.html
File metadata and controls
155 lines (143 loc) · 9.63 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Francisco Gonzalez"/>
<meta name="description" content="A little webapp that may be used to convert a microKORG-compatible PRG or SYX file, which contain a program (a.k.a. "patch") for the Korg® microKORG® synthesizer, to a nice readable format."/>
<meta name="keywords" content="korg, microkorg, synth, synthesizer, prg, patch, program, decoder"/>
<meta property="og:url" content="https://new-microkorg-program-decoder.vercel.app/"/>
<meta property="og:title" content="NEW microKORG PRG (and SYX!) Program Decoder"/>
<meta property="og:description" content="A tool for converting a microKORG-compatible PRG or SYX file to a nice readable format."/>
<meta property="og:image" content="https://raw.githubusercontent.com/frgonzalezb/NEW_microKORG_Program_Decoder/refs/heads/main/screenshots/main.png"/>
<meta property="og:type" content="website"/>
<title>🎹 NEW microKORG PRG (and SYX!) Program Decoder 🎹</title>
<link rel="icon" type="image/svg+xml" href="./app/assets/svg/favicon.svg"/>
<link rel="stylesheet" href="./app/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./app/assets/css/filedrag.css"/>
<link rel="stylesheet" href="./app/assets/css/color-modes.css"/>
<script src="./app/assets/js/color-modes.js"></script>
</head>
<body>
<!-- Light/dark mode -->
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (dark)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark" aria-pressed="true">
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<!-- Actual app -->
<div class="container object-fit-fill">
<div class="container col-xl-10 col-xxl-8 px-4">
<div class="row align-items-center g-lg-5">
<header class="col-lg-7 text-center text-lg-start">
<div class="px-4 my-5 text-center">
<h1 id="appTitle" class="display-4 fw-bold lh-1 text-body-emphasis mb-3">NEW microKORG® PRG (and SYX!) Program Decoder</h1>
<p id="appDescription">This little webapp may be used to convert a PRG file, which contain a program (a.k.a. "patch") for the Korg® microKORG® synthesizer, to a nice readable format.</p>
<span>Now it also supports <b>one-program</b> SYX files!</span><br/>
<span class="fw-light">(a.k.a. "Current Program Data Dump" SYX files) </span>
</div>
</header>
<section class="col-md-10 mx-auto col-lg-5">
<form id="uploadForm">
<div id="filedrag"></div>
<p style="text-align: center;">or</p>
<div class="mb-3">
<label for="uploadInput" class="form-label">Upload your file here:</label>
<input class="form-control" type="file" id="uploadInput">
</div>
</form>
<div id="alertPlaceholder"></div>
</section>
</div>
</div>
<hr/>
<!-- Tabs experiment -->
<div id="programDataPlaceholder" class="container text-center py-4">
<span>( Program data will be displayed here )</span>
</div>
<div id="programTitle" class="text-center mb-3" hidden></div>
<ul class="nav nav-pills mb-3" id="programData" role="tablist" hidden>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pillsTimbre1Tab" data-bs-toggle="pill" data-bs-target="#timbre1Tab" type="button" role="tab" aria-controls="timbre1Tab" aria-selected="true">Timbre 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pillsTimbre2Tab" data-bs-toggle="pill" data-bs-target="#timbre2Tab" type="button" role="tab" aria-controls="timbre2Tab" aria-selected="false">Timbre 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pillsFxArpTab" data-bs-toggle="pill" data-bs-target="#fxArpTab" type="button" role="tab" aria-controls="fxArpTab" aria-selected="false">FX & Arp</button>
</li>
</ul>
<div class="tab-content" id="programDataContent" hidden>
<div class="tab-pane fade show active" id="timbre1Tab" role="tabpanel" aria-labelledby="pillsTimbre1Tab" tabindex="0"></div>
<div class="tab-pane fade" id="timbre2Tab" role="tabpanel" aria-labelledby="pillsTimbre2Tab" tabindex="0"></div>
<div class="tab-pane fade table-responsive" id="fxArpTab" role="tabpanel" aria-labelledby="pillsFxArpTab" tabindex="0"></div>
</div>
<hr/>
<footer>
<div id="devCredits">
<p>Based on the <a href="https://www.hilltop-cottage.info/a/PRG_Reader.html">original webapp</a> by Adam Cooper (<a href="https://github.com/arc12">arc12</a>).
©Adam Cooper, Oct 2014. MIT Open Source Licence.</p>
<p>Updated and brought to you with ❤ by Francisco González (<a href="https://github.com/frgonzalezb">frgonzalezb</a>).
©Francisco González, Feb 2025. MIT Open Source Licence.</p>
</div>
<div id="sourceCodeLinks">
<p>Just like the original, this webapp is open source and free to use, and the latest source code is available <a href="https://github.com/frgonzalezb//NEW_microKORG_Program_Decoder/">on GitHub</a>!
Please submit any bug or ideas for new features using the <a href="https://github.com/frgonzalezb/NEW_microKORG_Program_Decoder/issues">GitHub issue tracker</a>.</p>
</div>
<div id="cookiePolicy">
<p>This webapp does not use any cookies. 🍪🚫</p>
<p>In fact, as in the original, this code <b>does not</b> transmit any data over the internet;
all data processing is done on your local computer, and every session is
completely destroyed when you close the browser or refresh the page!</p>
</div>
<div id="disclaimer">
<p><b>IMPORTANT:</b> This webapp only supports patches for the original microKORG® and microKORG® S models, which use the MS2000® synth engine. It does <b>not</b> support files for newer models, such as the microKORG® XL/XL+ or the microKORG® 2, all of which use unrelated synth engines.</p>
<p>Korg®, microKORG® and MS2000® are registered trademarks of Korg, Inc.
This webapp is unofficial and it's not affiliated with Korg, Inc.</p>
</div>
</footer>
</div>
<script src="./main.js" type="module"></script>
<script src="./app/assets/js/bootstrap.bundle.min.js"></script>
<script src="./app/assets/js/color-modes.js"></script>
</body>
</html>