Skip to content

Instantly share code, notes, and snippets.

Created Feb 14, 2021
What would you like to do?
jackedgson/crunker demo
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crunker example</title>
<script src="" ></script>
form {
display: flex;
flex-direction: column;
align-items: start;
<label>Sample rate: <input type="number" name="sampleRate" value="48000"></label>
<input type="file" name="audios" multiple accept="audio/*" />
<input type="button" value="Merge" onclick="handleMerge()">
<input type="button" value="Concat" onclick="handleConcat()">
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);
const crunker = new Crunker.default({ sampleRate: inputSampleRate.value })
const merged = await crunker[task](buffers)
const output = await crunker.export(merged, "audio/mp3")
await, filename)
(new Crunker.default()).notSupported(() => {
window.alert("Browser unsupported!")
.forEach(elem => elem.disabled = true)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment