Bytebeat Composer Source Code

<!DOCTYPE html>
<html>
<head>
	<title>>Yourname< BTB Composer</title>

	<style>
	    body {
	        text-align: center;
	        background-color: #000000;
	        color: #FFFFFF;
	        font-family: Consolas, monospace;
	    }
button {
        background-color: transparent;
        border: 2px solid white;
        color: white;
        font-family: Consolas, monospace;
    }

    input[type="text"], textarea {
      background-color: transparent;
      border: 2px solid white;
      color: white;
      font-family: Consolas, monospace;
    }

    select, option {
      background-color: transparent;
      border: 2px solid white;
      color: white;
      font-family: Consolas, monospace;
    }
	</style>
</head>
<body>
	<h1>>Yourname< Bytebeat Maker</h1>
	<div>
		<label for="formula">Code:</label>
		<input type="text" id="formula" value="t //simple sawtooth">
	</div>
	<div>
		<label for="sampleRate">Rate:</label>
		<select id="sampleRate">
		<option value="8000">8000</option>
		<option value="11025">11025</option>
		<option value="22050">22050</option>
		<option value="32000">32000</option>
		<option value="44100">44100</option>
		<option value="48000">48000</option>
		</select>
	</div>
	<button onclick="play()">Generate</button>
	<button onclick="stop()">Stop</button>

    <div>
    </div>
    <label>by <a href="https://www.reddit.com/user/yourusername/?sh=true">u/yourusername</a></label>
	<script>
		var audioCtx;
		var source;

		function play() {
			audioCtx = new (window.AudioContext || window.webkitAudioContext)();
			source = audioCtx.createBufferSource();
			var formula = document.getElementById("formula").value;
			var sampleRate = document.getElementById("sampleRate").value;
			var buffer = audioCtx.createBuffer(1, audioCtx.sampleRate * 25, sampleRate);
			var data = buffer.getChannelData(0);

			for (var t = 0; t < buffer.length; t++) {
				data[t] = (eval(formula)&255)/127-1;
			}

			source.buffer = buffer;
			source.connect(audioCtx.destination);
			source.start();
		}

		function stop() {
			source.stop();
			audioCtx.close();
		}
	</script>
</body>
</html>