|
<!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" />
|
|
|
|
</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">×</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">
|
|
|
|
</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> |
