Skip to content

Instantly share code, notes, and snippets.

@Alynva
Created Feb 14, 2021
Embed
What would you like to do?
jackedgson/crunker demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crunker example</title>
<script src="https://unpkg.com/crunker@0.4.0/dist/crunker.js" ></script>
<style>
form {
display: flex;
flex-direction: column;
align-items: start;
}
</style>
</head>
<body>
<form>
<label>Sample rate: <input type="number" name="sampleRate" value="48000"></label>
<input type="file" name="audios" multiple accept="audio/*" />
<div>
<input type="button" value="Merge" onclick="handleMerge()">
<input type="button" value="Concat" onclick="handleConcat()">
</div>
</form>
<script>
document.querySelector("form").addEventListener("submit", e => e.preventDefault())
const inputSampleRate = document.querySelector("input[name=sampleRate]"),
inputAudios = document.querySelector("input[name=audios]")
function handleMerge() {
doTheWork("mergeAudio", "merge")
}
function handleConcat() {
doTheWork("concatAudio", "concat")
}
async function doTheWork(task, filename) {
if (inputAudios.files.length) {
const buffers = []
for (const audio of inputAudios.files) {
const arrayBuffer = await audio.arrayBuffer();
const audioContext = new AudioContext();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
buffers.push(audioBuffer)
}
const crunker = new Crunker.default({ sampleRate: inputSampleRate.value })
const merged = await crunker[task](buffers)
const output = await crunker.export(merged, "audio/mp3")
await crunker.download(output.blob, filename)
}
}
(new Crunker.default()).notSupported(() => {
window.alert("Browser unsupported!")
Array
.from(document.querySelectorAll("input[type=button]"))
.forEach(elem => elem.disabled = true)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment