mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
241 lines
No EOL
6.3 KiB
HTML
241 lines
No EOL
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>DUOSYNTH</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">
|
|
DuoSynth
|
|
<br>
|
|
<br>
|
|
DuoSynth is a monophonic synthesizer composed of two MonoSyths in parellel.
|
|
</div>
|
|
<div id="Content">
|
|
<div id="tabs">
|
|
<ul>
|
|
<li><a href="#envelope0">Osc 0</a></li>
|
|
<li><a href="#filter0">Filt 0</a></li>
|
|
<li><a href="#envelope1">Osc 1</a></li>
|
|
<li><a href="#filter1">Filt 1</a></li>
|
|
<li><a href="#presets">Global</a></li>
|
|
</ul>
|
|
<div id="envelope0">
|
|
</div>
|
|
<div id="filter0">
|
|
</div>
|
|
<div id="envelope1">
|
|
</div>
|
|
<div id="filter1">
|
|
</div>
|
|
<div id="presets">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
/* globals Tone, GUI, QwertyHancock */
|
|
|
|
var synth = new Tone.DuoSynth();
|
|
synth.setVolume(-10);
|
|
synth.toMaster();
|
|
|
|
// GUI //
|
|
|
|
new GUI.TopBar(Tone);
|
|
|
|
$("#tabs").tabs();
|
|
|
|
var content = $("#Content");
|
|
var envelope0 = $("#envelope0");
|
|
var envelope1 = $("#envelope1");
|
|
var filter0 = $("#filter0");
|
|
var filter1 = $("#filter1");
|
|
var presets = $("#presets");
|
|
|
|
//osc 0
|
|
var ampEnv0 = new GUI.Envelope(envelope0, synth.voice0.envelope, "amplitude");
|
|
var osc0 = new GUI.OmniOscillator(envelope0, synth.voice0.oscillator, "oscillator");
|
|
var osc0Vol = new GUI.Slider(envelope0, function(val){
|
|
var vol = synth.gainToDb(val);
|
|
synth.voice0.setVolume(vol);
|
|
return vol;
|
|
}, 1, "volume", "db");
|
|
|
|
//osc 1
|
|
var ampEnv1 = new GUI.Envelope(envelope1, synth.voice1.envelope, "amplitude");
|
|
var osc1 = new GUI.OmniOscillator(envelope1, synth.voice1.oscillator, "oscillator");
|
|
var osc1Vol = new GUI.Slider(envelope1, function(val){
|
|
var vol = synth.gainToDb(val);
|
|
synth.voice1.setVolume(vol);
|
|
return vol;
|
|
}, 1, "volume", "db");
|
|
|
|
//filt 0
|
|
var min = 20;
|
|
var max = 20000;
|
|
var filtEnv0 =new GUI.Envelope(filter0, synth.voice0.filterEnvelope, "filter");
|
|
var minFilFreq0 = new GUI.Slider(filter0, function(val){
|
|
var freq = Math.pow(val, 2);
|
|
var scaled = freq * (max - min) + min;
|
|
synth.voice0.filterEnvelope.setMin(scaled);
|
|
return scaled;
|
|
}, min, "start freq", "hz");
|
|
var maxFilFreq0 = new GUI.Slider(filter0, function(val){
|
|
var freq = Math.pow(val, 2);
|
|
var scaled = freq * (max - min) + min;
|
|
synth.voice0.filterEnvelope.setMax(scaled);
|
|
return scaled;
|
|
}, min, "end freq", "hz");
|
|
|
|
//filt 1
|
|
var filtEnv1 =new GUI.Envelope(filter1, synth.voice1.filterEnvelope, "filter");
|
|
var minFilFreq1 = new GUI.Slider(filter1, function(val){
|
|
var freq = Math.pow(val, 2);
|
|
var scaled = freq * (max - min) + min;
|
|
synth.voice1.filterEnvelope.setMin(scaled);
|
|
return scaled;
|
|
}, min, "start freq", "hz");
|
|
var maxFilFreq1 = new GUI.Slider(filter1, function(val){
|
|
var freq = Math.pow(val, 2);
|
|
var scaled = freq * (max - min) + min;
|
|
synth.voice1.filterEnvelope.setMax(scaled);
|
|
return scaled;
|
|
}, min, "end freq", "hz");
|
|
|
|
//global
|
|
var harmonicity = new GUI.Slider(presets, function(val){
|
|
var scaled = val * 10;
|
|
synth.setHarmonicity(scaled);
|
|
return scaled;
|
|
}, 1, "harmonicity");
|
|
var vibratoAmount = new GUI.Slider(presets, function(val){
|
|
synth.setVibratoAmount(val);
|
|
return val;
|
|
}, 1, "vibrato amount");
|
|
var vibratoRate = new GUI.Slider(presets, function(val){
|
|
synth.setVibratoRate(val * 10);
|
|
return val * 10;
|
|
}, 1, "vibrato rate");
|
|
var allPresets = [];
|
|
for (var name in synth.preset){
|
|
allPresets.push(name);
|
|
}
|
|
$("<div>", {"id" : "PresetText"}).appendTo(presets).text("presets:");
|
|
new GUI.DropDown(presets, allPresets, function(name){
|
|
setPreset(name);
|
|
});
|
|
|
|
//keyboard
|
|
$("<div>", {"id" : "Keyboard"}).appendTo(content);
|
|
var keyboard = new QwertyHancock({
|
|
id: "Keyboard",
|
|
width: 400,
|
|
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);
|
|
var preset = synth.preset[name];
|
|
ampEnv0.render();
|
|
ampEnv1.render();
|
|
osc0.render();
|
|
osc0Vol.render(synth.dbToGain(preset.voice0.volume));
|
|
osc1.render();
|
|
osc1Vol.render(synth.dbToGain(preset.voice1.volume));
|
|
filtEnv0.render();
|
|
var minVal0 = Math.pow(Math.max((synth.voice0.filterEnvelope.min - min) / (max - min), 0), 0.5);
|
|
minFilFreq0.render(minVal0);
|
|
var maxVal0 = Math.pow(Math.max((synth.voice0.filterEnvelope.max - min) / (max - min), 0), 0.5);
|
|
maxFilFreq0.render(maxVal0);
|
|
filtEnv1.render();
|
|
var minVal1 = Math.pow(Math.max((synth.voice1.filterEnvelope.min - min) / (max - min), 0), 0.5);
|
|
minFilFreq1.render(minVal1);
|
|
var maxVal1 = Math.pow(Math.max((synth.voice1.filterEnvelope.max - min) / (max - min), 0), 0.5);
|
|
maxFilFreq1.render(maxVal1);
|
|
harmonicity.render(preset.harmonicity / 10);
|
|
vibratoAmount.render(preset.vibratoAmount);
|
|
vibratoRate.render(preset.vibratoRate / 10);
|
|
}
|
|
|
|
setPreset("Steely");
|
|
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
#Content {
|
|
width: 400px;
|
|
}
|
|
|
|
#tabs {
|
|
height: 300px;
|
|
}
|
|
|
|
.Slider {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.Oscillator {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#envelope1 .Oscillator {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.Envelope {
|
|
margin: auto;
|
|
}
|
|
|
|
#Keyboard {
|
|
background-color: black;
|
|
}
|
|
|
|
#presets #PresetText {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#presets .DropDown {
|
|
margin: auto;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |