<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<title>Signal</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
	<script src="../build/Tone.js"></script>
	<script src="./js/tone-ui.js"></script>
	<script src="./js/components.js"></script>
	<style type="text/css">
		tone-play-toggle {
			margin-bottom: 10px;
		}
		tone-slider {
			display: block;
			width: 100%;
		}
	</style>
</head>
<body>
	<tone-example label="Control Voltage">
		<div slot="explanation">
			One of the most powerful features of Tone.js and the Web Audio API is the ability to 
			perform math and logic on audio-rate signal. Signals
			can be ramped and scheduled to control Audio Parameters and 
			other Signals making it simple to create elaborate, 
			interconnected automations. 
			<br><br>
			This example applies a series of mappings to a
			signal value and applies the results of those mappings
			to the frequency attribute of 2
			<a href="https://tonejs.github.io/docs/Oscillator">Tone.Oscillators</a> 
			and a <a href="https://tonejs.github.io/docs/LFO">Tone.LFO</a>. 
		</div>

		<div id="content">
			<tone-play-toggle></tone-play-toggle>
			<tone-slider label="Modulation Rate" min="0.1" max="1" exp="2" value="0.5"></tone-slider>
		</div>
	</tone-example>
	
	<script type="text/javascript">//use this to pan the two oscillators hard left/right
		var merge = new Tone.Merge().toDestination();

		//two oscillators panned hard left / hard right
		var rightOsc = new Tone.Oscillator({
			"type" : "sawtooth",
			"volume" : -20
		}).connect(merge, 0, 0);

		var leftOsc = new Tone.Oscillator({
			"type" : "square",
			"volume" : -20
		}).connect(merge, 0, 1);

		//create an oscillation that goes from 0 to 1200
		//connection it to the detune of the two oscillators
		var detuneLFO = new Tone.LFO({
			"type" : "square",
			"min" : 0,
			"max" : 1200
		}).fan(rightOsc.detune, leftOsc.detune).start();

		//the frequency signal
		var frequency = new Tone.Signal(0.5);

		//the move the 0 to 1 value into frequency range
		var scale = new Tone.ScaleExp(110, 440);
		
		//multiply the frequency by 2.5 to get a 10th above
		var mult = new Tone.Multiply(2.5);
		
		//chain the components together
		frequency.chain(scale, mult);
		scale.connect(rightOsc.frequency);
		mult.connect(leftOsc.frequency);

		//multiply the frequency by 2 to get the octave above
		var detuneScale = new Tone.Scale(14, 4);
		frequency.chain(detuneScale, detuneLFO.frequency);		

		//start the oscillators with the play button
		document.querySelector("tone-play-toggle").addEventListener("start", () => {
			rightOsc.start();
			leftOsc.start();
		});
		document.querySelector("tone-play-toggle").addEventListener("stop", () => {
			rightOsc.stop();
			leftOsc.stop();
		});

		//ramp the frequency with the slider
		document.querySelector("tone-slider").addEventListener("input", e => {
			frequency.rampTo(parseFloat(e.target.value), 0.1);
		});

	</script>

</body>
</html>