You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
5.7 KiB
120 lines
5.7 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MIDI Tools</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/html-midi-player@1.5.0"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>MIDI Tools</h1>
|
|
<span class="subtitle">MIDI Processing Suite</span>
|
|
</header>
|
|
|
|
<main>
|
|
<div id="drop-zone" class="drop-zone">
|
|
<p>Drop a MIDI file here or click to browse</p>
|
|
<input type="file" id="file-input" accept=".mid,.midi" hidden>
|
|
</div>
|
|
|
|
<div id="workspace" class="workspace hidden">
|
|
<div class="file-bar">
|
|
<span id="file-name"></span>
|
|
<midi-player id="midi-player" sound-font></midi-player>
|
|
<div class="file-bar-actions">
|
|
<button id="download-btn" class="btn-action">Download</button>
|
|
<button id="clear-file" class="btn-action btn-muted">New File</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<!-- Left: Analysis -->
|
|
<section class="panel analysis-panel">
|
|
<h2>File Analysis</h2>
|
|
<div class="analysis-grid" id="analysis-grid"></div>
|
|
<div class="tracks-header">
|
|
<h3>Tracks <span class="hint">(click a track for details)</span></h3>
|
|
<button id="merge-btn" class="btn-action btn-muted" disabled>Merge Selected</button>
|
|
</div>
|
|
<div id="track-list" class="track-list"></div>
|
|
|
|
<div id="track-detail" class="track-detail hidden">
|
|
<div class="track-detail-header">
|
|
<h3 id="detail-track-name">Track Detail</h3>
|
|
<div class="track-detail-actions">
|
|
<button id="delete-track-btn" class="btn-action btn-danger">Delete Track</button>
|
|
<button id="close-detail" class="btn-link">Close</button>
|
|
</div>
|
|
</div>
|
|
<div id="track-edit-controls" class="track-edit-controls">
|
|
<div class="track-edit-row">
|
|
<div class="param-group">
|
|
<label for="track-channel">Channel</label>
|
|
<select id="track-channel"></select>
|
|
</div>
|
|
<div class="param-group">
|
|
<label for="track-instrument">Instrument</label>
|
|
<select id="track-instrument"></select>
|
|
</div>
|
|
<button id="track-edit-save" class="btn-action">Save</button>
|
|
</div>
|
|
</div>
|
|
<div id="graph-container" class="graph-container"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Right: Tools + History -->
|
|
<section class="panel tool-panel">
|
|
<h2>Process</h2>
|
|
<div class="tool-select">
|
|
<select id="tool">
|
|
<option value="baketempo">Bake Tempo</option>
|
|
<option value="monofy">Monofy (Split Polyphonic)</option>
|
|
<option value="reduncheck">Remove Redundancy</option>
|
|
<option value="velfix">Velocity Fix</option>
|
|
<option value="type0">Convert to Type 0</option>
|
|
</select>
|
|
</div>
|
|
|
|
<p id="tool-description" class="tool-description"></p>
|
|
|
|
<div id="track-section" class="channel-section hidden">
|
|
<div class="channel-header">
|
|
<label>Tracks</label>
|
|
<button id="track-toggle" class="btn-link">Deselect All</button>
|
|
</div>
|
|
<div id="track-checkboxes" class="channel-checkboxes"></div>
|
|
</div>
|
|
|
|
<div id="params" class="params hidden">
|
|
<div id="param-velocity" class="param-group hidden">
|
|
<label>Velocity Range</label>
|
|
<div class="vel-range-row">
|
|
<input type="number" id="vel-min" min="0" max="127" value="1" placeholder="Min">
|
|
<span class="vel-range-sep">–</span>
|
|
<input type="number" id="vel-max" min="0" max="127" value="127" placeholder="Max">
|
|
</div>
|
|
<span class="param-hint">Remaps note velocities into this range (0-127)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="process-btn" class="btn-primary" disabled>Apply</button>
|
|
<div id="status" class="status hidden"></div>
|
|
|
|
<div id="history-section" class="history-section hidden">
|
|
<div class="history-header">
|
|
<h3>Edit History</h3>
|
|
<button id="undo-btn" class="btn-action btn-undo">Undo</button>
|
|
</div>
|
|
<ol id="history-list" class="history-list"></ol>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|