mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
131 lines
No EOL
4.5 KiB
HTML
131 lines
No EOL
4.5 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">
|
|
#Amplitude0, #Amplitude1 {
|
|
/*position: relative;*/
|
|
width: calc(40% - 10px)!important;
|
|
}
|
|
#FilterEnvelope0, #FilterEnvelope1 {
|
|
/*position: relative;*/
|
|
width: calc(60% - 10px)!important;
|
|
}
|
|
.FilterEnvelope.Envelope {
|
|
width: 100%!important;
|
|
}
|
|
|
|
.Envelope {
|
|
width: 100%!important;
|
|
}
|
|
.Label {
|
|
width: 100%;
|
|
font-size : 10px;
|
|
line-height: 7px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
</style>
|
|
<div id="Explanation">
|
|
DuoSynth
|
|
<br>
|
|
<br>
|
|
A DuoSynth is two MonoSynths run in parallel with additional control over the voices harmonicity and vibrato.
|
|
</div>
|
|
<div id="Content">
|
|
<div id="KeyRack">
|
|
<div id="Keyboard"></div>
|
|
</div>
|
|
<div id="Oscillator">
|
|
</div>
|
|
<div id="Envelope">
|
|
<div id="Amplitude0"></div>
|
|
<div id="FilterEnvelope0"></div>
|
|
<div id="Amplitude1"></div>
|
|
<div id="FilterEnvelope1"></div>
|
|
</div>
|
|
<div id="Filter"></div>
|
|
<div id="Voices"></div>
|
|
<div id="Presets"></div>
|
|
</div>
|
|
|
|
<script id="ToneCode" type="text/javascript">
|
|
var synth = new Tone.DuoSynth().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", "Oscillators", true);
|
|
$("<div>").addClass("Label").appendTo("#Oscillator").text("Voice 0");
|
|
Interface.DropDown("Oscillator", synth.voice0.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();
|
|
$("<div>").addClass("Label").appendTo("#Oscillator").text("Voice 1");
|
|
Interface.DropDown("Oscillator", synth.voice1.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();
|
|
//the envelopes
|
|
Interface.Rack("Envelope", "Envelopes", true);
|
|
var ampGroup0 = Interface.Group("Amplitude0", "Voice 0 Amplitude");
|
|
Interface.AmplitudeEnvelope(ampGroup0, synth.voice0.envelope).listen();
|
|
var filtGroup0 = Interface.Group("FilterEnvelope0", "Voice 0 Filter");
|
|
Interface.FilterEnvelope(filtGroup0, synth.voice0.filterEnvelope).listen();
|
|
var ampGroup1 = Interface.Group("Amplitude1", "Voice 1 Amplitude");
|
|
Interface.AmplitudeEnvelope(ampGroup1, synth.voice1.envelope).listen();
|
|
var filtGroup1 = Interface.Group("FilterEnvelope1", "Voice 1 Filter");
|
|
Interface.FilterEnvelope(filtGroup1, synth.voice1.filterEnvelope).listen();
|
|
//the filters
|
|
Interface.Rack("Filter", "Filter", true);
|
|
$("<div>").addClass("Label").appendTo("#Filter").text("Voice 0");
|
|
var type = Interface.DropDown("Filter", synth.voice0.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();
|
|
var Q = Interface.Slider("Filter", synth.voice0.filter, "Q", 0.1, 20).listen();
|
|
$("<div>").addClass("Label").appendTo("#Filter").text("Voice 0");
|
|
var type = Interface.DropDown("Filter", synth.voice1.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();
|
|
var Q = Interface.Slider("Filter", synth.voice1.filter, "Q", 0.1, 20).listen();
|
|
//other settings
|
|
Interface.Rack("Voices", "Voices", true);
|
|
Interface.Slider("Voices", synth, "harmonicity", 0.25, 5).listen();
|
|
$("<div>").addClass("Label").appendTo("#Voices").text("Vibrato");
|
|
Interface.Slider("Voices", synth, "vibratoRate", 0.25, 10).listen();
|
|
Interface.Slider("Voices", synth, "vibratoAmount", 0, 1).listen();
|
|
//presets
|
|
Interface.Rack("Presets", "Presets", true);
|
|
Interface.Presets("Presets", synth);
|
|
</script>
|
|
</body>
|
|
</html> |