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="../build/Tone.js"></script>
	<script type="text/javascript" src="../build/Tone.Preset.js"></script>
	<script type="text/javascript" src="./deps/nexusUI.js"></script>
	<script type="text/javascript" src="./deps/prism.js"></script>
	<script type="text/javascript" src="./scripts/Interface.js"></script>
	<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>

	<link rel="stylesheet" type="text/css" href="./style/examples.css">
	<link rel="stylesheet" type="text/css" href="./style/prism.css">

	<script type="text/javascript">
		// jshint ignore: start
	</script>

</head>
<body>
	<style type="text/css">
	#Amplitude {
		/*position: relative;*/
		width: calc(40% - 10px)!important;
	}
	#FilterEnvelope {
		/*position: relative;*/
		width: calc(60% - 10px)!important;
	}
	.FilterEnvelope.Envelope {
		width: 100%!important;
	}

	.Envelope {
		width: 100%!important;
	}
	</style>
	<div id="Explanation">
		MonoSynth
		<br>
		<br>
		MonoSynth is a monophonic synthesizer composed simply of one oscillator and one filter each with their own independent envelope. 
	</div>
	<div id="Content">
		<div id="KeyRack">
			<div id="Keyboard"></div>
		</div>
		<div id="Oscillator"></div>
		<div id="Envelope">
			<div id="Amplitude"></div>
			<div id="FilterEnvelope"></div>
		</div>
		<div id="Filter"></div>
		<div id="Presets"></div>
	</div>

	<script id="ToneCode" type="text/javascript">			
		var synth = new Tone.MonoSynth().toMaster();
	</script>
	<script id="GUI" type="text/javascript">

		Interface.Rack("KeyRack", "Keyboard", true).open();
		//the keyboard
		var keyboard = new QwertyHancock({
			id: "Keyboard",
			width: $("#KeyRack").width(),
			height: 75,
			octaves : 3,
			startNote: "A2",
		});
		keyboard.keyDown = function(note, freq){
			synth.triggerAttack(freq);
		};
		keyboard.keyUp = function(){
			synth.triggerRelease();
		};

		//the oscillator
		Interface.Rack("Oscillator", "Oscillator", true);
		Interface.DropDown("Oscillator", synth.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();
		//the envelopes
		Interface.Rack("Envelope", "Envelopes", true);
		var ampGroup = Interface.Group("Amplitude", "Amplitude");
		Interface.AmplitudeEnvelope(ampGroup, synth.envelope).listen();
		var filtGroup = Interface.Group("FilterEnvelope", "Filter");
		Interface.FilterEnvelope(filtGroup, synth.filterEnvelope).listen();
		Interface.Rack("Filter", "Filter", true);
		var type = Interface.DropDown("Filter", synth.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();
		var Q = Interface.Slider("Filter", synth.filter, "Q", 0.1, 20);
		Interface.Rack("Presets", "Presets", true);
		Interface.Presets("Presets", synth);
		
	</script>
</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="../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>`
updating examples 2015-02-20 05:59:19 +00:00			`<script type="text/javascript" src="./deps/nexusUI.js"></script>`
			`<script type="text/javascript" src="./deps/prism.js"></script>`
			`<script type="text/javascript" src="./scripts/Interface.js"></script>`
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
updating examples 2015-02-20 05:59:19 +00:00			`<link rel="stylesheet" type="text/css" href="./style/examples.css">`
			`<link rel="stylesheet" type="text/css" href="./style/prism.css">`

			`<script type="text/javascript">`
			`// jshint ignore: start`
			`</script>`

making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`</head>`
			`<body>`
updating examples 2015-02-20 05:59:19 +00:00			`<style type="text/css">`
			`#Amplitude {`
updated examples 2015-02-24 03:14:51 +00:00			`/position: relative;/`
			`width: calc(40% - 10px)!important;`
			`}`
			`#FilterEnvelope {`
			`/position: relative;/`
			`width: calc(60% - 10px)!important;`
			`}`
			`.FilterEnvelope.Envelope {`
			`width: 100%!important;`
			`}`

			`.Envelope {`
			`width: 100%!important;`
updating examples 2015-02-20 05:59:19 +00:00			`}`
			`</style>`
			`<div id="Explanation">`
			`MonoSynth`
			`<br>`
			`<br>`
			`MonoSynth is a monophonic synthesizer composed simply of one oscillator and one filter each with their own independent envelope.`
			`</div>`
			`<div id="Content">`
			`<div id="KeyRack">`
			`<div id="Keyboard"></div>`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`</div>`
updating examples 2015-02-20 05:59:19 +00:00			`<div id="Oscillator"></div>`
			`<div id="Envelope">`
			`<div id="Amplitude"></div>`
			`<div id="FilterEnvelope"></div>`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`</div>`
updated examples 2015-02-24 03:14:51 +00:00			`<div id="Filter"></div>`
example index page 2015-02-26 16:25:16 +00:00			`<div id="Presets"></div>`
making the examples styled and work consistently. 2014-06-23 17:29:22 +00:00			`</div>`

updating examples 2015-02-20 05:59:19 +00:00			`<script id="ToneCode" type="text/javascript">`
			`var synth = new Tone.MonoSynth().toMaster();`
			`</script>`
			`<script id="GUI" type="text/javascript">`
MonoSynth Example 2014-09-02 04:25:38 +00:00
updating examples 2015-02-20 05:59:19 +00:00			`Interface.Rack("KeyRack", "Keyboard", true).open();`
			`//the keyboard`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`var keyboard = new QwertyHancock({`
			`id: "Keyboard",`
updating examples 2015-02-20 05:59:19 +00:00			`width: $("#KeyRack").width(),`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`height: 75,`
updating examples 2015-02-20 05:59:19 +00:00			`octaves : 3,`
			`startNote: "A2",`
MonoSynth Example 2014-09-02 04:25:38 +00:00			`});`
			`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();`
			`};`

updating examples 2015-02-20 05:59:19 +00:00			`//the oscillator`
			`Interface.Rack("Oscillator", "Oscillator", true);`
mobile-izing examples 2015-02-28 23:07:12 +00:00			`Interface.DropDown("Oscillator", synth.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();`
updating examples 2015-02-20 05:59:19 +00:00			`//the envelopes`
			`Interface.Rack("Envelope", "Envelopes", true);`
			`var ampGroup = Interface.Group("Amplitude", "Amplitude");`
mobile-izing examples 2015-02-28 23:07:12 +00:00			`Interface.AmplitudeEnvelope(ampGroup, synth.envelope).listen();`
updating examples 2015-02-20 05:59:19 +00:00			`var filtGroup = Interface.Group("FilterEnvelope", "Filter");`
mobile-izing examples 2015-02-28 23:07:12 +00:00			`Interface.FilterEnvelope(filtGroup, synth.filterEnvelope).listen();`
updated examples 2015-02-24 03:14:51 +00:00			`Interface.Rack("Filter", "Filter", true);`
mobile-izing examples 2015-02-28 23:07:12 +00:00			`var type = Interface.DropDown("Filter", synth.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();`
updated examples 2015-02-24 03:14:51 +00:00			`var Q = Interface.Slider("Filter", synth.filter, "Q", 0.1, 20);`
example index page 2015-02-26 16:25:16 +00:00			`Interface.Rack("Presets", "Presets", true);`
			`Interface.Presets("Presets", synth);`
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>`
			`</body>`
			`</html>`