mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
224 lines
5.8 KiB
HTML
224 lines
5.8 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>DUOSYNTH</title>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
||
|
|
|
||
|
|
<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="../Tone.js"></script>
|
||
|
|
<script type="text/javascript" src="../Tone/instrument/DuoSynth.js"></script>
|
||
|
|
<script type="text/javascript" src="../Tone/instrument/preset/DuoSynth.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">
|
||
|
|
Monophonic Synthesizer
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
MonoSynth is one a few built-in synthesizers. It is composed simply of one oscillator,
|
||
|
|
a filter and two envelopes (on amplitude and filter).
|
||
|
|
</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">Presets</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);
|
||
|
|
// new GUI.StartButton(Tone.startMobile);
|
||
|
|
|
||
|
|
$("#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.Oscillator(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.Oscillator(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.min = 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.max = 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.min = 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.max = scaled;
|
||
|
|
return scaled;
|
||
|
|
}, min, "end freq", "hz");
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//presets
|
||
|
|
var allPresets = [];
|
||
|
|
for (var name in Tone.DuoSynth.preset){
|
||
|
|
allPresets.push(name);
|
||
|
|
}
|
||
|
|
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);
|
||
|
|
ampEnv0.render();
|
||
|
|
ampEnv1.render();
|
||
|
|
osc0.render();
|
||
|
|
osc0Vol.render(synth.dbToGain(synth.voice0.output.gain.value));
|
||
|
|
osc1.render();
|
||
|
|
osc1Vol.render(synth.dbToGain(synth.voice1.output.gain.value));
|
||
|
|
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);
|
||
|
|
|
||
|
|
// osc1Ratio.render(synth.)
|
||
|
|
}
|
||
|
|
|
||
|
|
setPreset("Rego");
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
#Content {
|
||
|
|
width: 400px;
|
||
|
|
height: 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 .DropDown {
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 50px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
</html>
|