Tone.js/examples/monoSynth.html

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

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	<script type="text/javascript" src="./deps/jquery.min.js"></script>
	<script type="text/javascript" src="./deps/jquery-ui.js"></script>
	<script type="text/javascript" src="./deps/jquery.ui.touch-punch.js"></script>
	<script type="text/javascript" src="../build/Tone.js"></script>
	<script type="text/javascript" src="../build/Tone.Preset.js"></script>
	<script type="text/javascript" src="./Widgets.js"></script>
	<script type="text/javascript" src="./ExampleList.js"></script>
	<link rel="stylesheet" type="text/css" href="./style/widgets.css">
	<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
	<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>

</head>
<body>

	<div id="Container">
		<div id="Explanation">
			MonoSynth
			<br>
			<br>
			MonoSynth is a monophonic synthesizer composed simply of one oscillator, 
			a filter and two envelopes (on amplitude and filter). 
		</div>
		<div id="Content">
			<div id="tabs">
			  <ul>
			    <li><a href="#envelope">Osc/Env</a></li>
			    <li><a href="#filter">FilterEnv</a></li>
			    <li><a href="#presets">Presets</a></li>
			  </ul>
			  <div id="envelope">
			   
			  </div>
			  <div id="filter">
			   
			  </div>
			  <div id="presets">
			    
			  </div>
			</div>


		</div>
	</div>

	<script type="text/javascript">

		/* globals Tone, GUI, QwertyHancock */
			
		var synth = new Tone.MonoSynth();
		synth.setVolume(-10);
		synth.toMaster();

		// GUI //

		new GUI.TopBar(Tone);

		$("#tabs").tabs();

		var content = $("#Content");
		var envelope = $("#envelope");
		var filter = $("#filter");
		var presets = $("#presets");

		//envelopes
		var ampEnv = new GUI.Envelope(envelope, synth.envelope, "amplitude");
		var osc = new GUI.OmniOscillator(envelope, synth.oscillator, "oscillator");

		//filter
		var filtEnv =new GUI.Envelope(filter, synth.filterEnvelope, "filter");
		var min = 20;
		var max = 20000;
		var minFilFreq = new GUI.Slider(filter, function(val){
			var freq = Math.pow(val, 2);
			var scaled = freq * (max - min) + min;
			synth.filterEnvelope.setMin(scaled);
			return scaled;
		}, min, "start freq", "hz");
		var maxFilFreq = new GUI.Slider(filter, function(val){
			var freq = Math.pow(val, 2);
			var scaled = freq * (max - min) + min;
			synth.filterEnvelope.setMax(scaled);
			return scaled;
		}, min, "end freq", "hz");

		//presets
		var allPresets = [];
		for (var name in synth.preset){
			allPresets.push(name);
		}

		new GUI.DropDown(presets, allPresets, function(name){
			setPreset(name);
		});

		//keyboard
		$("<div>", {"id" : "Keyboard"}).appendTo(content);
		var keyboard = new QwertyHancock({
			id: "Keyboard",
			width: 350,
			height: 75,
			octaves: 2,
			startNote: "A3",
			whiteNotesColour: "white",
			blackNotesColour: "black",
			hoverColour: "#f3e939"
		});
		keyboard.keyDown = function(note, freq){
			synth.triggerAttack(freq);
		};
		keyboard.keyUp = function(){
			synth.triggerRelease();
		};

		function setPreset(name){
			synth.setPreset(name);
			ampEnv.render();
			filtEnv.render();
			osc.render();
			var minVal = Math.pow(Math.max((synth.filterEnvelope.min - min) / (max - min), 0), 0.5);
			minFilFreq.render(minVal);
			var maxVal = Math.pow(Math.max((synth.filterEnvelope.max - min) / (max - min), 0), 0.5);
			maxFilFreq.render(maxVal);
		}

		setPreset("CoolGuy");
		
	</script>

	<style type="text/css">
	#Content {
		width: 350px;
	}

	#tabs {
		height: 300px;
	}

	.Slider {
		width: 80%;
		margin-left: 10%;
		margin-top: 10px;
	}

	.Oscillator {
		width: 80%;
		margin-left: 10%;
		margin-top: 40px;
	}

	.Envelope {
		margin: auto;
	}

	#Keyboard {
		background-color: black;
	}

	#presets .DropDown {
		margin: auto;
		margin-top: 50px;
	}
	</style>
</body>
</html>
adds doctype html and utf-8 encoding on all examples 2014-10-22 22:49:42 +00:00			`<!DOCTYPE html>`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`<html>`
			`<head>`
adds doctype html and utf-8 encoding on all examples 2014-10-22 22:49:42 +00:00			`<meta charset="utf-8">`
Tone.Sources can sync to the Transport 2014-06-25 16:47:47 +00:00			`<title>MONOSYNTH</title>`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00
making examples more mobile friendly 2014-09-06 19:35:31 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">`
MonoSynth Example 2014-09-02 04:25:38 +00:00
examples reference build folder and moved deps #28 2014-09-04 19:20:25 +00:00			`<script type="text/javascript" src="./deps/jquery.min.js"></script>`
			`<script type="text/javascript" src="./deps/jquery-ui.js"></script>`
			`<script type="text/javascript" src="./deps/jquery.ui.touch-punch.js"></script>`
			`<script type="text/javascript" src="../build/Tone.js"></script>`
renamed Tone.Presets to Tone.Preset 2014-09-05 03:56:34 +00:00			`<script type="text/javascript" src="../build/Tone.Preset.js"></script>`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`<script type="text/javascript" src="./Widgets.js"></script>`
			`<script type="text/javascript" src="./ExampleList.js"></script>`
			`<link rel="stylesheet" type="text/css" href="./style/widgets.css">`
			`<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">`
examples reference build folder and moved deps #28 2014-09-04 19:20:25 +00:00			`<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00
			`</head>`
			`<body>`

MonoSynth Example 2014-09-02 04:25:38 +00:00			`<div id="Container">`
			`<div id="Explanation">`
updated MonoSynth description. oscillator volume now works. 2014-09-02 21:10:26 +00:00			`MonoSynth`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`<br>`
			`<br>`
updated MonoSynth description. oscillator volume now works. 2014-09-02 21:10:26 +00:00			`MonoSynth is a monophonic synthesizer composed simply of one oscillator,`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`a filter and two envelopes (on amplitude and filter).`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`</div>`
			`<div id="Content">`
			`<div id="tabs">`
			`<ul>`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`<li><a href="#envelope">Osc/Env</a></li>`
			`<li><a href="#filter">FilterEnv</a></li>`
			`<li><a href="#presets">Presets</a></li>`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`</ul>`
			`<div id="envelope">`

			`</div>`
			`<div id="filter">`

			`</div>`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`<div id="presets">`
MonoSynth Example 2014-09-02 04:25:38 +00:00
			`</div>`
			`</div>`


			`</div>`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`</div>`

			`<script type="text/javascript">`
added the synth to the examples 2014-09-02 16:15:20 +00:00
			`/* globals Tone, GUI, QwertyHancock */`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00
MonoSynth Example 2014-09-02 04:25:38 +00:00			`var synth = new Tone.MonoSynth();`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`synth.setVolume(-10);`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`synth.toMaster();`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00
MonoSynth Example 2014-09-02 04:25:38 +00:00			`// GUI //`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00
added the synth to the examples 2014-09-02 16:15:20 +00:00			`new GUI.TopBar(Tone);`

MonoSynth Example 2014-09-02 04:25:38 +00:00			`$("#tabs").tabs();`

			`var content = $("#Content");`
			`var envelope = $("#envelope");`
			`var filter = $("#filter");`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`var presets = $("#presets");`
MonoSynth Example 2014-09-02 04:25:38 +00:00
			`//envelopes`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`var ampEnv = new GUI.Envelope(envelope, synth.envelope, "amplitude");`
synths use OmniOscillator 2014-10-01 02:49:48 +00:00			`var osc = new GUI.OmniOscillator(envelope, synth.oscillator, "oscillator");`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00
added the synth to the examples 2014-09-02 16:15:20 +00:00			`//filter`
			`var filtEnv =new GUI.Envelope(filter, synth.filterEnvelope, "filter");`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`var min = 20;`
			`var max = 20000;`
			`var minFilFreq = new GUI.Slider(filter, function(val){`
			`var freq = Math.pow(val, 2);`
			`var scaled = freq * (max - min) + min;`
updating examples to new ScaledEnvelope 2014-11-04 05:44:33 +00:00			`synth.filterEnvelope.setMin(scaled);`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`return scaled;`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`}, min, "start freq", "hz");`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`var maxFilFreq = new GUI.Slider(filter, function(val){`
			`var freq = Math.pow(val, 2);`
			`var scaled = freq * (max - min) + min;`
updating examples to new ScaledEnvelope 2014-11-04 05:44:33 +00:00			`synth.filterEnvelope.setMax(scaled);`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`return scaled;`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`}, min, "end freq", "hz");`
MonoSynth Example 2014-09-02 04:25:38 +00:00
added the synth to the examples 2014-09-02 16:15:20 +00:00			`//presets`
			`var allPresets = [];`
put presets in the prototype 2014-09-04 23:13:55 +00:00			`for (var name in synth.preset){`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`allPresets.push(name);`
			`}`

			`new GUI.DropDown(presets, allPresets, function(name){`
			`setPreset(name);`
			`});`
MonoSynth Example 2014-09-02 04:25:38 +00:00
			`//keyboard`
			`$("<div>", {"id" : "Keyboard"}).appendTo(content);`
			`var keyboard = new QwertyHancock({`
			`id: "Keyboard",`
			`width: 350,`
			`height: 75,`
			`octaves: 2,`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`startNote: "A3",`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`whiteNotesColour: "white",`
			`blackNotesColour: "black",`
			`hoverColour: "#f3e939"`
			`});`
			`keyboard.keyDown = function(note, freq){`
			`synth.triggerAttack(freq);`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`};`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`keyboard.keyUp = function(){`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`synth.triggerRelease();`
			`};`

			`function setPreset(name){`
			`synth.setPreset(name);`
			`ampEnv.render();`
			`filtEnv.render();`
			`osc.render();`
			`var minVal = Math.pow(Math.max((synth.filterEnvelope.min - min) / (max - min), 0), 0.5);`
			`minFilFreq.render(minVal);`
			`var maxVal = Math.pow(Math.max((synth.filterEnvelope.max - min) / (max - min), 0), 0.5);`
			`maxFilFreq.render(maxVal);`
			`}`

synths use OmniOscillator 2014-10-01 02:49:48 +00:00			`setPreset("CoolGuy");`
MonoSynth Example 2014-09-02 04:25:38 +00:00
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`</script>`
MonoSynth Example 2014-09-02 04:25:38 +00:00
			`<style type="text/css">`
			`#Content {`
			`width: 350px;`
			`}`

			`#tabs {`
			`height: 300px;`
			`}`

			`.Slider {`
			`width: 80%;`
			`margin-left: 10%;`
			`margin-top: 10px;`
			`}`

			`.Oscillator {`
			`width: 80%;`
			`margin-left: 10%;`
added the synth to the examples 2014-09-02 16:15:20 +00:00			`margin-top: 40px;`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`}`

			`.Envelope {`
			`margin: auto;`
			`}`

added the synth to the examples 2014-09-02 16:15:20 +00:00			`#Keyboard {`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`background-color: black;`
			`}`
added the synth to the examples 2014-09-02 16:15:20 +00:00
			`#presets .DropDown {`
			`margin: auto;`
			`margin-top: 50px;`
			`}`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`</style>`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`</body>`
			`</html>`