File size: 18,025 Bytes
a8cb0a6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html>

<head>
    <title>Minecraft Noteblock Music Generator</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="title" content="Map Art Maker for Minecraft" />
    <meta name="description"

        content="Upload audio clip and create an Add-On (Bedrock edition 1.20.0+) that builds a novel midi machine that plays that music using noteblocks!" />
    <meta name="keywords"

        content="minecraft,music,noteblocks,midi-machine,bedrock,free,online,generator,1.20,vanilla,add-on,trails,tales" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="English" />
    <meta name="author" content="LazyXghost & i0gerath" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

        crossorigin="anonymous" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style-dark.css') }}" />
    <meta id="colorSchemeMetaTag" name="color-scheme" content="light dark" />

    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png" />
    <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}" />
    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#C0C0C0" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <meta name="msapplication-TileColor" content="#C0C0C0" />
    <meta name="msapplication-config" content="images/browserconfig.xml" />
    <meta name="theme-color" content="#C0C0C0" />
    <!-- For SEO -->
</head>

<body>
    <div class="container-fluid headercover" id="pageHead">
        <div class="container-sm">
            <h1 class="text-center text-white rounded-top" id="pagemaintitle">Noteblock Music Generator for Minecraft</h1>
            <h5 class="text-center text-white rounded-bottom py-md-1" id="pagesubtitle">
                Upload Ausio and create an Add-On (Bedrock edition 1.20.0+) that builds a unique midi machine that plays
                that music
                using noteblocks!
            </h5>
        </div>
    </div>

    <div class="container-lg justify-content-lg-center mx-auto my-5" id="pageMainContent">
        <div class="alert alert-info alert-dismissible fade show">
            <h4 class="alert-heading">How this app works</h4>
            <p>
                It takes your uploaded audio and converts it into a translable noteblock audio that you can accordingly place to reproduce a similar audio in Minecraft using vanilla blocks!
            </p>
            <ul>
                <li>
                    The placement is automated by writing commands into a
                    <a class="alert-link" rel="nofollow noreferrer" href="https://www.minecraft.net/en-us/addons"

                        target="_blank">
                        behaviour pack </a>. These can be readily executed using a few '/function' commands in-game,
                    through a command block or by a player.
                </li>
                <li>
                    The packs are valid for the latest version of Minecraft on supported Bedrock edition devices - Win
                    10, Android, iOS,
                    etc
                </li>
            </ul>
            <p>
                This web app is
                <a class="alert-link" target="_blank" rel="noreferrer"

                    href="https://github.com/gd-codes/mc-pixelart-maker">not open source</a>
                ! It is <a class="alert-link" target="_blank" href="./about.html">not</a> officially associated with
                Minecraft or
                Mojang.
            </p>
            <p>
                Other technical explanation, and an example add-on for download, can be found
                <a href="./manual.html#example-pack" target="_blank" rel="nofollow" class="alert-link">here</a>.
            </p>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="container-lg text-center text-capitalize minecraft">
            <h3>Crafting table</h3>
        </div>
        <form id="processMusicForm" enctype=multipart/form-data>
        <div

            class="container bg-light rounded-top py-3 px-4 mt-4 mb-0 d-flex justify-content-between border border-dark border-bottom-0">
            <ul class="nav nav-tabs" id="navbarList">
                <!-- Filled by JS -->
            </ul>
            <button class="btn btn-success rounded rounded-pill" id="resetAudioButton" title="Reset" type="reset">
                <svg width="2em" height="2em" viewbox="0 0 16 16" class="bi bi-plus" fill="currentColor"

                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"

                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                </svg>
            </button>
        </div>
        <div class="container tab-content border border-dark border-top-0 rounded-bottom mt-0 mb-4 p-4 position-relative minecraft"

            id="tabContainer">
            <div id="loadingSpinner" style="display: none;">
                <p>Loading...</p>
                <div class="spinner-border" role="status">
                    <span class="visually-hidden"></span>
                </div>
            </div>
                <div class="form-group">
                    <label for="audioFile" style="color: white">Upload Audio File:</label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="audioFile" accept="audio/*" required

                            name="audioFile" />
                        <label class="custom-file-label" for="audioFile">Choose file</label>
                    </div>
                </div>

                <div class="form-group">
                    <label style="color: white">Select Instruments:</label>
                    <div id="instruments" class="d-flex flex-wrap">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="cow_bell" name="cow_bell" />
                            <label class="form-check-label" for="cow_bell">cow_bell</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="iron_xylophone"

                                name="iron_xylophone" />
                            <label class="form-check-label" for="iron_xylophone">iron_xylophone</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="bit" name="bit" />
                            <label class="form-check-label" for="bit">bit</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="flute" name="flute" />
                            <label class="form-check-label" for="flute">flute</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="didgeridoo" name="didgeridoo" />
                            <label class="form-check-label" for="didgeridoo">didgeridoo</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="bdrum" name="bdrum" />
                            <label class="form-check-label" for="bdrum">bdrum</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="bell" name="bell" />
                            <label class="form-check-label" for="bell">bell</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="pling" name="pling" />
                            <label class="form-check-label" for="pling">pling</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="snare" name="snare" />
                            <label class="form-check-label" for="snare">snare</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="banjo" name="banjo" />
                            <label class="form-check-label" for="banjo">banjo</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="harp" name="harp" />
                            <label class="form-check-label" for="harp">harp</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="guitar" name="guitar" />
                            <label class="form-check-label" for="guitar">guitar</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="xylophone" name="xylophone" />
                            <label class="form-check-label" for="xylophone">xylophone</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="bass" name="bass" />
                            <label class="form-check-label" for="bass">bass</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="chimes" name="chimes" />
                            <label class="form-check-label" for="chimes">chimes</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" checked id="hat" name="hat" />
                            <label class="form-check-label" for="hat">hat</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="amplitudeMode" style="color: white">Amplitude Mode:</label>
                    <select id="amplitudeMode" class="form-control form-control-sm" name="amplitudeMode">
                        <option value="Mean">Mean</option>
                        <option value="Max">Max</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="simThresh" style="color: white">Similarity Threshold: </label>
                    <input type="range" id="simThresh" min="0" max="1" step="0.01" value="0.7" name="simThresh" />
                    <span id="simThreshOutput">0.7</span>
                </div>
                <button type="submit" class="btn btn-primary btn-sm">Submit</button>
            </form>
            <div id="resultProcessMusicForm" style="padding-top: 20px;"></div>
        </div>
        <div class="container-lg text-center text-capitalize">
            <h3>Create the Add-On</h3>
        </div>
        <div class="container-fluid h-100 tab-content border border-dark rounded py-3 px-4 my-4" id="packContainer">
            <div class="row h-100">
                <div class="col-12 col-md-8 d-flex justify-content-center align-items-center">
                    <div class="form-container">
                        <form id = "commandMusicForm">
                            <div class="form-group">
                                <label for="audioId" style="color: black">Audio Id: </label>
                                <input type="text" class="form-control" id="audioId" name="audioId" placeholder="-" readonly>
                            </div>
                            <div class="form-group">
                                <label for="commandsAmplitudeMode" style="color: black">Amplitude Mode:</label>
                                <select id="commandsAmplitudeMode" class="form-control form-control-sm" name="commandsAmplitudeMode">
                                    <option value="Mean">Mean</option>
                                    <option value="Max">Max</option>
                                </select>
                            </div>
                            <div class="form-group mt-3">
                                <label for="simThreshCommand" style="color: black">Similarity Threshold: </label>
                                <input type="range" id="simThreshCommand" min="0" max="1" step="0.01" value="0.7" name="simThresh" />
                                <span id="simThreshOutputCommand" style="color: black">0.7</span>
                            </div>
                            <div class="form-group mt-3">
                                <label for="startCoordinates" style="color: black">Starting Coordinates: </label>
                                <input type="text" class="form-control" id="startingCoordinates" name="startingCoordinates" placeholder="x y z" required>
                            </div>
                            <button type="submit" class="btn btn-primary mt-3" id = "commandsFormSubmitButton" disabled>Submit</button>
                        </form>
                        <div id="resultCommandMusicForm" style="padding-top: 20px;"></div>
                    </div>
                </div>
                <div class="col-12 col-md-4 bg-light" id="audioList">
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-dark text-center" id="pageFooter">
        <br />
        <h6 class="text-white" id="footertitle">Noteblock Music Generator for Minecraft</h6>
        <h6 class="text-white-50">Version 1.0</h6>
        <div class="dark-theme d-flex justify-content-center my-4" style="background-color: transparent">
            <div class="custom-control custom-switch">
                <div class="d-inline" style="padding-right: 2.5rem">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

                        class="bi bi-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" />
                    </svg>
                </div>
                <div class="d-inline mt-2">
                    <input type="checkbox" class="custom-control-input" id="light-dark-toggle" />
                    <label class="custom-control-label" for="light-dark-toggle" id="light-dark-toggle-label"></label>
                </div>
                <div class="d-inline">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

                        class="bi bi-moon-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" />
                    </svg>
                </div>
            </div>
        </div>
        <p>
            {% if page != 'index' %}
                <a class="text-white-50" href="/index">Web App</a> |
            {% endif %}
            {% if page != 'manual' %}
                <a class="text-white-50" href="/manual">Manual</a> |
            {% endif %}
            {% if page != 'about' %}
                <a class="text-white-50" href="/about">About</a>
            {% endif %}
        </p>
        <br />
    </div>
    <script> var audios = {{audios | tojson | safe}}; </script>
</body>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

</html>