mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 00:27:58 +00:00
DuoSynth example first commit
This commit is contained in:
Yotam Mann
parent
c1bdba8cf4
commit
aa45c4402c
3 changed files with 387 additions and 10 deletions
|
|
@ -26,12 +26,14 @@ define(["Tone/core/Tone", "Tone/instrument/MonoSynth", "Tone/component/LFO", "To
|
|||
* @type {Tone.MonoSynth}
|
||||
*/
|
||||
this.voice0 = new Tone.MonoSynth(options.voice0);
|
||||
this.voice0.setVolume(-10);
|
||||
|
||||
/**
|
||||
* the second voice
|
||||
* @type {Tone.MonoSynth}
|
||||
*/
|
||||
this.voice1 = new Tone.MonoSynth(options.voice1);
|
||||
this.voice1.setVolume(-10);
|
||||
|
||||
/**
|
||||
* the vibrato lfo
|
||||
|
|
@ -101,28 +103,37 @@ define(["Tone/core/Tone", "Tone/instrument/MonoSynth", "Tone/component/LFO", "To
|
|||
"portamento" : 0.05,
|
||||
"voiceRatio" : 1.5,
|
||||
"voice0" : {
|
||||
"volume" : -10,
|
||||
"portamento" : 0,
|
||||
"osc0type" : "sine",
|
||||
"osc1type" : "sawtooth",
|
||||
"unison" : 20,
|
||||
"oscType" : "sine",
|
||||
"filterEnvelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.0,
|
||||
"sustain" : 1,
|
||||
"release" : 0.5
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.0,
|
||||
"sustain" : 1,
|
||||
"release" : 0.5
|
||||
}
|
||||
},
|
||||
"voice1" : {
|
||||
"volume" : -6,
|
||||
"volume" : -10,
|
||||
"portamento" : 0,
|
||||
"osc0type" : "square",
|
||||
"osc1type" : "square",
|
||||
"unison" : 10,
|
||||
"oscType" : "sine",
|
||||
"filterEnvelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.0,
|
||||
"sustain" : 1,
|
||||
"release" : 0.5
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.0,
|
||||
"sustain" : 1,
|
||||
"release" : 0.5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -172,7 +183,7 @@ define(["Tone/core/Tone", "Tone/instrument/MonoSynth", "Tone/component/LFO", "To
|
|||
* set the ratio between the two oscillator
|
||||
* @param {number} ratio
|
||||
*/
|
||||
Tone.DuoSynth.prototype.setOscRatio = function(ratio){
|
||||
Tone.DuoSynth.prototype.setVoiceRatio = function(ratio){
|
||||
this._frequencyRatio.setValue(ratio);
|
||||
};
|
||||
|
||||
|
|
@ -209,16 +220,23 @@ define(["Tone/core/Tone", "Tone/instrument/MonoSynth", "Tone/component/LFO", "To
|
|||
this._vibrato.setFrequency(rate);
|
||||
};
|
||||
|
||||
/**
|
||||
* set the volume of the instrument.
|
||||
* borrowed from {@link Tone.Source}
|
||||
* @function
|
||||
*/
|
||||
Tone.DuoSynth.prototype.setVolume = Tone.Source.prototype.setVolume;
|
||||
|
||||
/**
|
||||
* bulk setter
|
||||
* @param {Object} param
|
||||
*/
|
||||
Tone.DuoSynth.prototype.set = function(params){
|
||||
if (!this.isUndef(params.oscRatio)) this.setOscRatio(params.oscRatio);
|
||||
if (!this.isUndef(params.voiceRatio)) this.setVoiceRatio(params.voiceRatio);
|
||||
if (!this.isUndef(params.vibratoRate)) this.setVibratoRate(params.vibratoRate);
|
||||
if (!this.isUndef(params.vibratoAmount)) this.setVibratoAmount(params.vibratoAmount);
|
||||
if (!this.isUndef(params.vibratoDelay)) this.setVibratoDelay(params.vibratoDelay);
|
||||
if (!this.isUndef(params.portamento)) this.portament = this.toSeconds(params.portamento);
|
||||
if (!this.isUndef(params.portamento)) this.setPortamento(params.portamento);
|
||||
if (!this.isUndef(params.voice0)) this.voice0.set(params.voice0);
|
||||
if (!this.isUndef(params.voice1)) this.voice1.set(params.voice1);
|
||||
};
|
||||
|
|
|
|||
135
Tone/instrument/preset/DuoSynth.preset.js
Normal file
135
Tone/instrument/preset/DuoSynth.preset.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
define(["Tone/core/Tone", "Tone/instrument/DuoSynth"], function(Tone){
|
||||
|
||||
/**
|
||||
* named presets for the DuoSynth
|
||||
* @const
|
||||
* @static
|
||||
* @type {Object}
|
||||
*/
|
||||
Tone.DuoSynth.preset = {
|
||||
"Steely" : {
|
||||
"vibratoAmount" : 0.0,
|
||||
"vibratoRate" : 5,
|
||||
"vibratoDelay" : 1,
|
||||
"portamento" : 0,
|
||||
"voiceRatio" : 1.99,
|
||||
"voice0" : {
|
||||
"volume" : -20,
|
||||
"portamento" : 0,
|
||||
"oscType" : "square",
|
||||
"filter" : {
|
||||
"Q" : 2,
|
||||
"type" : "lowpass",
|
||||
"rolloff" : -12
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 1,
|
||||
"sustain" : 0,
|
||||
"release" : 0.4
|
||||
},
|
||||
"filterEnvelope" : {
|
||||
"attack" : 0.001,
|
||||
"decay" : 0.01,
|
||||
"sustain" : 0.35,
|
||||
"release" : 1,
|
||||
"min" : 20,
|
||||
"max" : 8000
|
||||
}
|
||||
},
|
||||
"voice1" : {
|
||||
"volume" : -10,
|
||||
"portamento" : 0,
|
||||
"oscType" : "sine",
|
||||
"filter" : {
|
||||
"Q" : 2,
|
||||
"type" : "lowpass",
|
||||
"rolloff" : -12
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.25,
|
||||
"decay" : 4,
|
||||
"sustain" : 0,
|
||||
"release" : 0.8
|
||||
},
|
||||
"filterEnvelope" : {
|
||||
"attack" : 0.03,
|
||||
"decay" : 0.25,
|
||||
"sustain" : 0.7,
|
||||
"release" : 1,
|
||||
"min" : 1000,
|
||||
"max" : 2500
|
||||
}
|
||||
}
|
||||
},
|
||||
"Rego" : {
|
||||
"vibratoAmount" : 0.5,
|
||||
"vibratoRate" : 5,
|
||||
"vibratoDelay" : 1,
|
||||
"portamento" : 0.1,
|
||||
"voiceRatio" : 1.005,
|
||||
"voice0" : {
|
||||
"volume" : -10,
|
||||
"portamento" : 0,
|
||||
"oscType" : "sawtooth",
|
||||
"filter" : {
|
||||
"Q" : 1,
|
||||
"type" : "lowpass",
|
||||
"rolloff" : -24
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.25,
|
||||
"sustain" : 0.4,
|
||||
"release" : 1.2
|
||||
},
|
||||
"filterEnvelope" : {
|
||||
"attack" : 0.001,
|
||||
"decay" : 0.05,
|
||||
"sustain" : 0.3,
|
||||
"release" : 2,
|
||||
"min" : 100,
|
||||
"max" : 10000
|
||||
}
|
||||
},
|
||||
"voice1" : {
|
||||
"volume" : -100,
|
||||
"portamento" : 0,
|
||||
"oscType" : "sawtooth",
|
||||
"filter" : {
|
||||
"Q" : 2,
|
||||
"type" : "bandpass",
|
||||
"rolloff" : -12
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.25,
|
||||
"decay" : 4,
|
||||
"sustain" : 0.1,
|
||||
"release" : 0.8
|
||||
},
|
||||
"filterEnvelope" : {
|
||||
"attack" : 0.05,
|
||||
"decay" : 0.05,
|
||||
"sustain" : 0.7,
|
||||
"release" : 2,
|
||||
"min" : 5000,
|
||||
"max" : 2000
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* augment the prototype to include setPreset
|
||||
*/
|
||||
Tone.DuoSynth.prototype.setPreset = function(presetName){
|
||||
presetName = this.defaultArg(presetName, "CasioPiano");
|
||||
//look up if it exists
|
||||
//TODO
|
||||
//set it
|
||||
this.set(Tone.DuoSynth.preset[presetName]);
|
||||
};
|
||||
|
||||
|
||||
return Tone.DuoSynth.preset;
|
||||
});
|
||||
224
examples/duoSynth.html
Normal file
224
examples/duoSynth.html
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
<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>
|
||||
Loading…
Reference in a new issue