Alynva · February 14, 2021 17:54
diff --git a/index.html b/index.html
 <!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/[email protected]/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>
	<!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/[email protected]/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>