mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
100 lines
No EOL
2.9 KiB
HTML
100 lines
No EOL
2.9 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;*/
|
|
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"]);
|
|
//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);
|
|
Interface.Rack("Filter", "Filter", true);
|
|
var type = Interface.DropDown("Filter", synth.filter, "type", ["lowpass", "highpass", "bandpass"]);
|
|
var Q = Interface.Slider("Filter", synth.filter, "Q", 0.1, 20);
|
|
Interface.Rack("Presets", "Presets", true);
|
|
Interface.Presets("Presets", synth);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |