LoopKnife/index.html at main · JDSherbert/LoopKnife · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>LoopKnife</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/panel.css" />
	<link rel="stylesheet" href="css/button.css" />
	<link rel="stylesheet" href="css/wavecanvas.css" />
	<link rel="stylesheet" href="css/marker.css" />
	<link rel="stylesheet" href="css/transport.css" />
	<link rel="stylesheet" href="css/topbar.css" />
	<link rel="stylesheet" href="css/gain.css" />
	<link rel="stylesheet" href="css/help.css" />
	<link rel="icon" href="/favicon/favicon.png" type="image/png" />
</head>

<body>

	<div id="app">

		<header id="topBar">
			<div class="logo">
				<img src="assets/logo/Bat Logo White.png" alt="Sherbert Audio Logo" width="54" />
				<h6>Sherbert Audio</h6>
			</div>
			<div class="title">LoopKnife</div>

			<label class="button fileButton">
				🗁 Import Audio
				<input id="fileInput" type="file" accept="audio/*" />
			</label>

			<button id="exportBtn" class="button" disabled>
				🖫 Export
			</button>

			<button id="clearBtn" class="button">
				⟲ Clear Session
			</button>

			<!-- External Social Links Container -->
			<div class="top-bar-links">
				<a href="https://github.com/jdsherbert/LoopKnife" target="_blank" rel="noopener noreferrer"
					class="button link-btn" title="View Source Code on GitHub">
					🕮 GitHub
				</a>
				<a href="https://jdsherbert.itch.io" target="_blank" rel="noopener noreferrer" class="button link-btn"
					title="Visit Itch.io Storefront">
					🛍 Itch.io
				</a>
				<a href="https://jdsherbert.github.io" target="_blank" rel="noopener noreferrer" class="button link-btn"
					title="Visit Portfolio Website">
					🌐 Website
				</a>
			</div>
		</header>

		<main id="main">

			<div id="transportBar">
				<button id="playBtn" class="button" disabled>▶ Play</button>
				<button id="playLoopBtn" class="button" disabled>⏯ Play Loop</button>
				<button id="pauseBtn" class="button" disabled>⏸ Pause</button>
				<button id="stopBtn" class="button" disabled>■ Stop</button>
				<button id="resetLoopBtn" class="button" disabled>↹ Reset Loop Markers</button>
			</div>

			<div id="transportReadout">
				Time: <span id="timeReadout">0.00</span>s
				| Sample: <span id="sampleReadout">0</span>
			</div>

			<div id="waveContainer">
				<canvas id="waveCanvas"></canvas>
			</div>

			<div id="infoPanels">

				<div class="panel" id="infoBar">
					Preview Export Metadata:
					<span id="startLabel">LOOPSTART= --</span>
					<span id="endLabel">LOOPEND= --</span>
				</div>

				<div class="panel" id="loopReadout">
					Start Time (seconds):
					<input id="loopStartTime" type="number" step="0.001" min="0" />
					Start Sample:
					<input id="loopStartSample" type="number" step="1" min="0" />
					<br>
					End Time (seconds):
					<input id="loopEndTime" type="number" step="0.001" min="0" />
					End Sample:
					<input id="loopEndSample" type="number" step="1" min="0" />
				</div>

				<div class="panel" id="fileInfo">
					File: <span id="fileName">--</span>
					Type: <span id="fileType">--</span>
					Size: <span id="fileSize">--</span>
				</div>

				<div class="panel" id="audioInfo">
					Sample Rate: <span id="sampleRate">--</span>
					Channels: <span id="channels">--</span>
					Duration (seconds): <span id="duration">--</span>
				</div>

				<div class="volume-container">
					<span>🔊</span>
					<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.7"
						style="width: 100px;" />

					<!-- Simple horizontal VU level meter -->
					<progress id="volumeMeter" max="100" value="0" style="width: 80px; height: 12px;"></progress>
				</div>

			</div>

			<br></br>

			<div class="panel" id="helpPanel">
				<h3>🛈 How To Use LoopKnife</h3>
				<ul class="help-list">
					<li><strong>1. Load Track:</strong> Drag and drop any audio file straight into the <span
							class="highlight">#waveContainer</span> window, or click <span class="highlight">🗁 Import
							Audio</span> at the top.</li>
					<li><strong>2. Set Start Marker:</strong> Drag the <span class="marker-yellow">yellow start
							marker</span> on the canvas to your desired loop opening, or type precise values into the
						<span class="highlight">Start Time</span> / <span class="highlight">Start Sample</span> inputs.
					</li>

					<li><strong>3. Set End Marker:</strong> Drag the <span class="marker-red">red end marker</span> to
						set your loop cutoff point, or use the precise <span class="highlight">End Time</span> / <span
							class="highlight">End Sample</span> fields.</li>
					<li><strong>4. Test Playback:</strong> Press <span class="highlight">▶ Play</span> to listen
						normally, or use <span class="highlight">⏯ Play Loop</span> to listen exclusively to the
						selection and ensure your seams loop cleanly.</li>
					<li><strong>5. Export:</strong> When satisfied, click <span class="highlight">🖫 Export</span> to
						bake the loop metadata directly into the audio file. Use <span class="highlight">⟲ Clear
							Session</span> to start fresh.</li>
				</ul>

				<div class="warning-section">
					<h3>⚠ Critical Session Notes</h3>
					<ul class="warning-list">
						<li><strong>Format Limits:</strong> Loop metadata injection strictly supports <span
								class="warn-highlight">.wav</span> and <span class="warn-highlight">.ogg</span> file
							types. Other formats will fail to export correctly.</li>
						<li><strong>Destructive Overrides:</strong> Any pre-existing loop markers embedded in your file
							may be permanently overwritten on export. <em>Always back up your original files
								locally!</em></li>
						<li><strong>Browser Sample Offsets:</strong> Certain browsers introduce tiny, microsecond
							rounding delays when decoding compressed audio (like OGG). For frame-perfect alignment,
							uncompressed WAV is highly recommended.</li>
					</ul>
				</div>
			</div>
		</main>

	</div>

	<script type="module" src="Main.js"></script>

</body>

</html>