initial commit, first workable version
This commit is contained in:
commit
0abcd235c9
3 changed files with 173 additions and 0 deletions
26
index.html
Normal file
26
index.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Zoom Marks Analyzer</title>
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<div id="dropmark">Click or drop file here</div>
|
||||||
|
<div id="label"></div>
|
||||||
|
<div id="cuelist-outer">
|
||||||
|
<div>MARKS</div>
|
||||||
|
<ol id="cuelist"></ol>
|
||||||
|
</div>
|
||||||
|
<button id="export-button" disabled>Export as TSV...
|
||||||
|
<span class="subtitle">(For Adobe Audition)</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/wavefile@11.0.0/dist/wavefile.min.js"
|
||||||
|
integrity="sha384-W3PirarYaOAUEL6KdD+DTxgNwNV2WjP01eFWsWWBBzy4goLvqOd//bovJESrq043"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
61
main.css
Normal file
61
main.css
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dropmark {
|
||||||
|
font-size: 16pt;
|
||||||
|
border: 4px dashed gray;
|
||||||
|
padding: 2em 3em;
|
||||||
|
|
||||||
|
background: #f5f5f5;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#label {
|
||||||
|
margin: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cuelist-outer {
|
||||||
|
visibility: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cuelist-outer div {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cuelist li {
|
||||||
|
margin: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#export-button {
|
||||||
|
font-size: 16pt;
|
||||||
|
border: 4px solid gray;
|
||||||
|
|
||||||
|
padding: 1.5em 3em;
|
||||||
|
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#export-button .subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
86
main.js
Normal file
86
main.js
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
const dropElement = document.getElementById("dropmark");
|
||||||
|
const label = document.getElementById("label");
|
||||||
|
const infoElement = document.getElementById("cuelist-outer");
|
||||||
|
const cueListElement = document.getElementById("cuelist");
|
||||||
|
const exportButton = document.getElementById("export-button");
|
||||||
|
|
||||||
|
|
||||||
|
function processFile (file) {
|
||||||
|
window.currentFile = file;
|
||||||
|
console.debug(window.currentFile);
|
||||||
|
file.arrayBuffer().then((arrayBuffer) => {
|
||||||
|
const buffer = new Uint8Array(arrayBuffer);
|
||||||
|
window.resultWav = new wavefile.WaveFile(buffer);
|
||||||
|
console.debug(window.resultWav);
|
||||||
|
window.cuePoints = window.resultWav.listCuePoints().map((point) => {
|
||||||
|
return new Date(point.position).toISOString().substr(11, 12);
|
||||||
|
});
|
||||||
|
console.debug(window.cuePoints);
|
||||||
|
displayMarks();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayMarks () {
|
||||||
|
const length = window.resultWav.data.chunkSize / window.resultWav.fmt.byteRate;
|
||||||
|
label.innerText = `${window.currentFile.name}: ${length.toFixed(2)}s`;
|
||||||
|
|
||||||
|
while (cueListElement.lastElementChild) {
|
||||||
|
cueListElement.removeChild(cueListElement.lastElementChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.cuePoints.forEach((point) => {
|
||||||
|
const row = document.createElement("li");
|
||||||
|
row.innerText = point;
|
||||||
|
cueListElement.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
infoElement.style.visibility = "inherit";
|
||||||
|
exportButton.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportAsTSV () {
|
||||||
|
const filename = `${window.currentFile.name.replace(/\.(wav|WAV)$/, "")}_marks.csv`;
|
||||||
|
let text = "Name\tStart\tDuration\tTime Format\tType\tDescription\n";
|
||||||
|
window.cuePoints.forEach((point, idx) => {
|
||||||
|
text += `Mark ${idx}\t${point}\t0:00.000\tdecimal\tCue\n`;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.debug(text);
|
||||||
|
|
||||||
|
const aElement = document.createElement("a");
|
||||||
|
aElement.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
|
||||||
|
aElement.setAttribute("download", filename);
|
||||||
|
aElement.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileSelect (evt) {
|
||||||
|
evt.stopPropagation();
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
processFile(evt.dataTransfer.files.item(0));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragOver (evt) {
|
||||||
|
evt.stopPropagation();
|
||||||
|
evt.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClick (evt) {
|
||||||
|
evt.stopPropagation();
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
const fileInput = document.createElement("input");
|
||||||
|
fileInput.type = "file";
|
||||||
|
fileInput.accept = ".wav";
|
||||||
|
fileInput.onchange = () => {
|
||||||
|
if (fileInput.files !== null) {
|
||||||
|
processFile(fileInput.files.item(0));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fileInput.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
dropElement.addEventListener("dragover", handleDragOver, false);
|
||||||
|
dropElement.addEventListener("drop", handleFileSelect, false);
|
||||||
|
dropElement.addEventListener("click", handleClick, false);
|
||||||
|
exportButton.addEventListener("click", exportAsTSV, false);
|
||||||
Loading…
Reference in a new issue