keelan
/
rttyjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="rtty.js"></script>
<style>
button, input, textarea {
	margin-bottom: 10px;
}

</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1>rtty.js</h1>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading"><h3 class="panel-title">Output Control</h3></div>
					<div class="panel-body">
						<b>Baud Rate:</b> <input class="form-control" id="baudrate" type="number" value="45.45">
						<b>Mark Frequency:</b> <input class="form-control" id="markfrequency" type="number" value="2125">
						<b>Space Frequency:</b> <input class="form-control" id="spacefrequency" type="number" value="2295">
						<button class="btn btn-default" id="start">Start Audio</button>
						<button class="btn btn-default" id="stop">Stop Audio</button>
						<button class="btn btn-default" id="invert">Invert</button>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading"><h3 class="panel-title">Modulator Control</h3></div>
					<div class="panel-body">
						<button class="btn btn-default" id="pause">Pause</button>
						<button class="btn btn-default" id="resume">Resume</button>
						<button class="btn btn-default" id="flush">Flush Buffer</button>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading"><h3 class="panel-title">Input</h3></div>
					<div class="panel-body">
<textarea class="form-control" id="data" rows="14">
Is it a fact—or have I dreamt it—that, by means of electricity, the world of matter has become a great nerve, vibrating thousands of miles in a breathless point of time?
</textarea>
						<button class="btn btn-default" id="encode">Encode</button>
					</div>
				</div>
			</div>	
		</div>
	</div>
</body>
<script>

	var modulator = new RTTY({
		baudrate: parseFloat(document.querySelector('#baudrate').value),
		mark: parseFloat(document.querySelector('#markfrequency').value),
		space: parseFloat(document.querySelector('#spacefrequency').value)
	});
	
	modulator.bufferEmptyCallback = function() {
	};

	document.querySelector('#start').onclick = function() {
		document.querySelector('#baudrate').disabled=true;
		document.querySelector('#markfrequency').disabled=true;
		document.querySelector('#spacefrequency').disabled=true;
		modulator.baudrate = parseFloat(document.querySelector('#baudrate').value);
		modulator.mark = parseFloat(document.querySelector('#markfrequency').value);
		modulator.space = parseFloat(document.querySelector('#spacefrequency').value);
		modulator.startSound();
	};

	document.querySelector('#stop').onclick = function() {
		modulator.stopSound();
		document.querySelector('#baudrate').disabled=false;
		document.querySelector('#markfrequency').disabled=false;
		document.querySelector('#spacefrequency').disabled=false;
	};

	document.querySelector('#invert').onclick = function() {
		modulator.invert();
	};

	document.querySelector('#pause').onclick = function() {
		modulator.pauseModulation();
	};

	document.querySelector('#resume').onclick = function() {
		modulator.resumeModulation();
	};
	
	document.querySelector('#encode').onclick = function() {
		modulator.modulate(document.querySelector('#data').value);
		
	};
	
	document.querySelector('#flush').onclick = function() {
		modulator.flushBuffer();
	};

</script>
</html>