Alynva/index.html

## 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/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>
	<!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>