mirror of
https://github.com/Tonejs/Tone.js
synced 2025-01-28 19:45:25 +00:00
87 lines
No EOL
2.7 KiB
HTML
87 lines
No EOL
2.7 KiB
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;
|
|
|
|
}
|
|
</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="FilterEnv"></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"]);
|
|
//the envelopes
|
|
Interface.Rack("Envelope", "Envelopes", true);
|
|
var ampGroup = Interface.Group("Amplitude", "Amplitude");
|
|
Interface.AmplitudeEnvelope(ampGroup, synth.envelope);
|
|
var filtGroup = Interface.Group("FilterEnvelope", "Filter");
|
|
Interface.FilterEnvelope(filtGroup, synth.filterEnvelope);
|
|
// var filtGroup = Interface.Group("Envelope", "Filter");
|
|
// Interface.Rack("FilterEnv", "Filter Envelope", true);
|
|
// var Q = Interface.Slider("FilterEnv", synth.filter, "Q", 0.1, 20);
|
|
// var type = Interface.DropDown("FilterEnv", synth.filter, "type", ["lowpass", "highpass", "bandpass", "notch"]);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |