mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 00:27:58 +00:00
updated examples
This commit is contained in:
Yotam Mann
parent
12896a5630
commit
d3d51957fa
7 changed files with 302 additions and 518 deletions
|
|
@ -2,161 +2,89 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>DUOSYNTH</title>
|
||||
<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="./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/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;
|
||||
}
|
||||
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
DuoSynth
|
||||
<br>
|
||||
<br>
|
||||
DuoSynth is a monophonic synthesizer composed of two MonoSyths in parellel.
|
||||
.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="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 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 type="text/javascript">
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
var synth = new Tone.DuoSynth().toMaster();
|
||||
</script>
|
||||
<script id="GUI" 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);
|
||||
Interface.Rack("KeyRack", "Keyboard", true).open();
|
||||
//the keyboard
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: 400,
|
||||
width: $("#KeyRack").width(),
|
||||
height: 75,
|
||||
octaves: 2,
|
||||
startNote: "A3",
|
||||
whiteNotesColour: "white",
|
||||
blackNotesColour: "black",
|
||||
hoverColour: "#f3e939"
|
||||
octaves : 3,
|
||||
startNote: "A2",
|
||||
});
|
||||
keyboard.keyDown = function(note, freq){
|
||||
synth.triggerAttack(freq);
|
||||
|
|
@ -165,77 +93,39 @@
|
|||
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");
|
||||
|
||||
//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>
|
||||
|
||||
<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>
|
||||
|
|
@ -70,7 +70,6 @@
|
|||
});
|
||||
var envGroup = Interface.Group($("<div>").appendTo("#Rack"), "Envelope");
|
||||
Interface.AmplitudeEnvelope(envGroup, env);
|
||||
Interface.Meter("Rack", env._sig);
|
||||
Interface.Code("CodeBlock", "ToneCode");
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,158 +2,89 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>FMSYNTH</title>
|
||||
<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="./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/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;
|
||||
}
|
||||
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
FMSynth
|
||||
<br>
|
||||
<br>
|
||||
FMSynth is a monophonic Frequency Modulation Synthesizer composed of two MonoSyths.
|
||||
One as the carrier and one as the frequency modulator.
|
||||
.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">
|
||||
FMSynth
|
||||
<br>
|
||||
<br>
|
||||
FMSynth is a monophonic Frequency Modulation Synthesizer composed of two MonoSyths: one as the carrier and one as the frequency modulator.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="KeyRack">
|
||||
<div id="Keyboard"></div>
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li><a href="#envelope0">C Osc</a></li>
|
||||
<li><a href="#filter0">C Filt</a></li>
|
||||
<li><a href="#envelope1">M Osc</a></li>
|
||||
<li><a href="#filter1">M Filt</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 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 type="text/javascript">
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
var synth = new Tone.FMSynth().toMaster();
|
||||
</script>
|
||||
<script id="GUI" type="text/javascript">
|
||||
|
||||
/* globals Tone, GUI, QwertyHancock */
|
||||
|
||||
var synth = new Tone.FMSynth();
|
||||
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.carrier.envelope, "amplitude");
|
||||
var osc0 = new GUI.OmniOscillator(envelope0, synth.carrier.oscillator, "oscillator");
|
||||
var osc0Vol = new GUI.Slider(envelope0, function(val){
|
||||
var vol = synth.gainToDb(val);
|
||||
synth.carrier.setVolume(vol);
|
||||
return vol;
|
||||
}, 1, "volume", "db");
|
||||
|
||||
//osc 1
|
||||
var ampEnv1 = new GUI.Envelope(envelope1, synth.modulator.envelope, "amplitude");
|
||||
var osc1 = new GUI.OmniOscillator(envelope1, synth.modulator.oscillator, "oscillator");
|
||||
var osc1Vol = new GUI.Slider(envelope1, function(val){
|
||||
var vol = synth.gainToDb(val);
|
||||
synth.modulator.setVolume(vol);
|
||||
return vol;
|
||||
}, 1, "volume", "db");
|
||||
|
||||
//filt 0
|
||||
var min = 20;
|
||||
var max = 20000;
|
||||
var filtEnv0 =new GUI.Envelope(filter0, synth.carrier.filterEnvelope, "filter");
|
||||
var minFilFreq0 = new GUI.Slider(filter0, function(val){
|
||||
var freq = Math.pow(val, 2);
|
||||
var scaled = freq * (max - min) + min;
|
||||
synth.carrier.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.carrier.filterEnvelope.setMax(scaled);
|
||||
return scaled;
|
||||
}, min, "end freq", "hz");
|
||||
|
||||
//filt 1
|
||||
var filtEnv1 =new GUI.Envelope(filter1, synth.modulator.filterEnvelope, "filter");
|
||||
var minFilFreq1 = new GUI.Slider(filter1, function(val){
|
||||
var freq = Math.pow(val, 2);
|
||||
var scaled = freq * (max - min) + min;
|
||||
synth.modulator.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.modulator.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 modulationIndex = new GUI.Slider(presets, function(val){
|
||||
synth.setModulationIndex(val * 50);
|
||||
return val * 50;
|
||||
}, 1, "modulation index");
|
||||
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);
|
||||
Interface.Rack("KeyRack", "Keyboard", true).open();
|
||||
//the keyboard
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: 400,
|
||||
width: $("#KeyRack").width(),
|
||||
height: 75,
|
||||
octaves: 2,
|
||||
octaves : 3,
|
||||
startNote: "A2",
|
||||
whiteNotesColour: "white",
|
||||
blackNotesColour: "black",
|
||||
hoverColour: "#f3e939"
|
||||
});
|
||||
keyboard.keyDown = function(note, freq){
|
||||
synth.triggerAttack(freq);
|
||||
|
|
@ -162,77 +93,37 @@
|
|||
synth.triggerRelease();
|
||||
};
|
||||
|
||||
function setPreset(name){
|
||||
synth.setPreset(name);
|
||||
var preset = synth.preset[name];
|
||||
ampEnv0.render();
|
||||
ampEnv1.render();
|
||||
osc0.render();
|
||||
osc0Vol.render(synth.dbToGain(preset.carrier.volume));
|
||||
osc1.render();
|
||||
osc1Vol.render(synth.dbToGain(preset.modulator.volume));
|
||||
filtEnv0.render();
|
||||
var minVal0 = Math.pow(Math.max((preset.carrier.filterEnvelope.min - min) / (max - min), 0), 0.5);
|
||||
minFilFreq0.render(minVal0);
|
||||
var maxVal0 = Math.pow(Math.max((preset.carrier.filterEnvelope.max - min) / (max - min), 0), 0.5);
|
||||
maxFilFreq0.render(maxVal0);
|
||||
filtEnv1.render();
|
||||
var minVal1 = Math.pow(Math.max((preset.modulator.filterEnvelope.min - min) / (max - min), 0), 0.5);
|
||||
minFilFreq1.render(minVal1);
|
||||
var maxVal1 = Math.pow(Math.max((preset.modulator.filterEnvelope.max - min) / (max - min), 0), 0.5);
|
||||
maxFilFreq1.render(maxVal1);
|
||||
harmonicity.render(preset.harmonicity / 10);
|
||||
modulationIndex.render(preset.modulationIndex / 50);
|
||||
}
|
||||
|
||||
setPreset("Trumpet");
|
||||
|
||||
//the oscillator
|
||||
Interface.Rack("Oscillator", "Oscillators", true);
|
||||
$("<div>").addClass("Label").appendTo("#Oscillator").text("carrier");
|
||||
Interface.DropDown("Oscillator", synth.carrier.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();
|
||||
$("<div>").addClass("Label").appendTo("#Oscillator").text("modulator");
|
||||
Interface.DropDown("Oscillator", synth.modulator.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();
|
||||
//the envelopes
|
||||
Interface.Rack("Envelope", "Envelopes", true);
|
||||
var ampGroup0 = Interface.Group("Amplitude0", "Carrier Amplitude");
|
||||
Interface.AmplitudeEnvelope(ampGroup0, synth.carrier.envelope).listen();
|
||||
var filtGroup0 = Interface.Group("FilterEnvelope0", "Carrier Filter");
|
||||
Interface.FilterEnvelope(filtGroup0, synth.carrier.filterEnvelope).listen();
|
||||
var ampGroup1 = Interface.Group("Amplitude1", "Modulator Amplitude");
|
||||
Interface.AmplitudeEnvelope(ampGroup1, synth.modulator.envelope).listen();
|
||||
var filtGroup1 = Interface.Group("FilterEnvelope1", "Modulator Filter");
|
||||
Interface.FilterEnvelope(filtGroup1, synth.modulator.filterEnvelope).listen();
|
||||
//the filters
|
||||
Interface.Rack("Filter", "Filter", true);
|
||||
$("<div>").addClass("Label").appendTo("#Filter").text("Carrier");
|
||||
var type = Interface.DropDown("Filter", synth.carrier.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();
|
||||
var Q = Interface.Slider("Filter", synth.carrier.filter, "Q", 0.1, 20).listen();
|
||||
$("<div>").addClass("Label").appendTo("#Filter").text("Modulator");
|
||||
var type = Interface.DropDown("Filter", synth.modulator.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();
|
||||
var Q = Interface.Slider("Filter", synth.modulator.filter, "Q", 0.1, 20).listen();
|
||||
//other settings
|
||||
Interface.Rack("Voices", "Voices", true);
|
||||
Interface.Slider("Voices", synth, "harmonicity", 0.25, 5).listen();
|
||||
Interface.Slider("Voices", synth, "modulationIndex", 1, 20).listen();
|
||||
//presets
|
||||
Interface.Rack("Presets", "Presets", true);
|
||||
Interface.Presets("Presets", synth);
|
||||
</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 #PresetText {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#presets .DropDown {
|
||||
margin: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -25,8 +25,19 @@
|
|||
<body>
|
||||
<style type="text/css">
|
||||
#Amplitude {
|
||||
position: relative;
|
||||
|
||||
/*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">
|
||||
|
|
@ -44,7 +55,7 @@
|
|||
<div id="Amplitude"></div>
|
||||
<div id="FilterEnvelope"></div>
|
||||
</div>
|
||||
<div id="FilterEnv"></div>
|
||||
<div id="Filter"></div>
|
||||
</div>
|
||||
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
|
|
@ -77,10 +88,9 @@
|
|||
Interface.AmplitudeEnvelope(ampGroup, synth.envelope);
|
||||
var filtGroup = Interface.Group("FilterEnvelope", "Filter");
|
||||
Interface.FilterEnvelope(filtGroup, synth.filterEnvelope);
|
||||
// var filtGroup = Interface.Group("Envelope", "Filter");
|
||||
// Interface.Rack("FilterEnv", "Filter Envelope", true);
|
||||
// var Q = Interface.Slider("FilterEnv", synth.filter, "Q", 0.1, 20);
|
||||
// var type = Interface.DropDown("FilterEnv", synth.filter, "type", ["lowpass", "highpass", "bandpass", "notch"]);
|
||||
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);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,56 +6,57 @@
|
|||
|
||||
<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/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.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>
|
||||
|
||||
<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>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Tone.Note
|
||||
<br>
|
||||
<br>
|
||||
Tone.Note lets you to schedule a note on a particular "channel". Then use Tone.Note.route
|
||||
to listen for events on that channel. Multiple notes can be put into a JSON-friendly score
|
||||
which can be parsed using Tone.Note.parseScore(). Take a look at source to see the
|
||||
score format. MIDI files can also be converted to JSON score format using utils/MidiToScore.js.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Loading">LOADING...</div>
|
||||
</div>
|
||||
<div id="Explanation">
|
||||
Tone.Note
|
||||
<br>
|
||||
<br>
|
||||
Tone.Note lets you to schedule a note on a particular "channel". Then use Tone.Note.route
|
||||
to listen for events on that channel. Multiple notes can be put into a JSON-friendly score
|
||||
which can be parsed using Tone.Note.parseScore(). Take a look at source to see the
|
||||
score format. MIDI files can also be converted to JSON score format using utils/MidiToScore.js.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="LoadingBar"></div>
|
||||
<div id="Rack"></div>
|
||||
<div id="Code"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* global Tone, GUI*/
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
var bass = new Tone.MonoSynth()
|
||||
.toMaster()
|
||||
.setPreset("Bassy");
|
||||
bass.volume.value = -10;
|
||||
|
||||
var bass = new Tone.MonoSynth();
|
||||
bass.setPreset("Bassy");
|
||||
bass.setVolume(-10);
|
||||
bass.toMaster();
|
||||
var keys = new Tone.PolySynth(3, Tone.MonoSynth)
|
||||
.toMaster()
|
||||
.setPreset("Pianoetta");
|
||||
keys.volume.value = -30;
|
||||
|
||||
var keys = new Tone.PolySynth(3, Tone.MonoSynth, Tone.MonoSynth.prototype.preset.Pianoetta);
|
||||
keys.setVolume(-30);
|
||||
keys.toMaster();
|
||||
var kick = new Tone.Player("./audio/505/kick.mp3")
|
||||
.toMaster();
|
||||
|
||||
var kit = new Tone.MultiSampler({
|
||||
"kick" : "./audio/505/kick.mp3",
|
||||
"snare" : "./audio/505/snare.mp3",
|
||||
"hh" : "./audio/505/hh.mp3",
|
||||
}, function(){
|
||||
//after the sounds are loaded, add the transport controls
|
||||
$("#Loading").remove();
|
||||
startButton.enable();
|
||||
});
|
||||
kit.setVolume(-10);
|
||||
kit.toMaster();
|
||||
var snare = new Tone.Player("./audio/505/snare.mp3")
|
||||
.toMaster();
|
||||
|
||||
var hh = new Tone.Player("./audio/505/hh.mp3")
|
||||
.toMaster();
|
||||
|
||||
var Score = {
|
||||
"kick" : ["0", "0:2:2", "0:3:1"],
|
||||
|
|
@ -82,55 +83,35 @@
|
|||
}
|
||||
});
|
||||
Tone.Note.route("kick", function(time){
|
||||
kit.triggerAttack("kick", time);
|
||||
kick.start(time);
|
||||
});
|
||||
Tone.Note.route("snare", function(time){
|
||||
kit.triggerAttack("snare", time);
|
||||
snare.start(time);
|
||||
});
|
||||
Tone.Note.route("hh", function(time){
|
||||
kit.triggerAttack("hh", time);
|
||||
hh.start(time);
|
||||
});
|
||||
|
||||
//setup the transport looping
|
||||
Tone.Transport.setLoopStart(0);
|
||||
Tone.Transport.setLoopEnd("1:0");
|
||||
//setup the transport values
|
||||
Tone.Transport.loopStart = 0;
|
||||
Tone.Transport.loopEnd = "1:0";
|
||||
Tone.Transport.loop = true;
|
||||
Tone.Transport.setBpm(100);
|
||||
Tone.Transport.bpm.value = 100;
|
||||
Tone.Transport.swing = 0.2;
|
||||
|
||||
// GUI //
|
||||
|
||||
var content = $("#Content");
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
//the transport controls
|
||||
var startButton = new GUI.Checkbox(content, function(down){
|
||||
if (down){
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
Interface.Loading("LoadingBar");
|
||||
Interface.Rack("Rack", "Transport");
|
||||
Interface.Toggle("Rack", function(on){
|
||||
if (on){
|
||||
Tone.Transport.start();
|
||||
} else {
|
||||
Tone.Transport.stop();
|
||||
}
|
||||
}, "start", "stop");
|
||||
startButton.disable();
|
||||
|
||||
});
|
||||
Interface.Code("Code", "ToneCode");
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: center;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
}
|
||||
.Checkbox {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.ValueMeter {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
#Score {
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -133,6 +133,24 @@ Interface.DropDown = function(container, node, parameter, options, label){
|
|||
};
|
||||
};
|
||||
|
||||
Interface.Presets = function(container, node){
|
||||
var element = $("<div>").appendTo(Interface.getElement(container))
|
||||
.addClass("DropDown");
|
||||
$("<div>").appendTo(element)
|
||||
.text("preset")
|
||||
.attr("id", "Label");
|
||||
var options = Object.keys(node.preset);
|
||||
options.unshift("none");
|
||||
var selectList = $("<select>").appendTo(element);
|
||||
for (var i = 0; i < options.length; i++){
|
||||
$("<option>").text(options[i]).appendTo(selectList);
|
||||
}
|
||||
//set the initial value
|
||||
selectList.on("change", function(){
|
||||
node.setPreset(selectList.val());
|
||||
});
|
||||
};
|
||||
|
||||
Interface.ContinuousControl = function(container, type, node, parameter, min, max, exp){
|
||||
container = Interface.getElement(container);
|
||||
min = min || 0;
|
||||
|
|
@ -250,15 +268,22 @@ Interface.AmplitudeEnvelope = function(container, node){
|
|||
};
|
||||
|
||||
Interface.FilterEnvelope = function(container, node){
|
||||
var element = $("<div>").addClass("FilterEnvelope")
|
||||
.appendTo(Interface.getElement(container));
|
||||
var ampEnv = Interface.AmplitudeEnvelope(element, node);
|
||||
var element = Interface.getElement(container, "Filter");
|
||||
var group = $("<div>").addClass("Envelope FilterEnvelope")
|
||||
.appendTo(element);
|
||||
var attack = Interface.Slider(group, node, "attack", 0.001, 2, 2);
|
||||
var decay = Interface.Slider(group, node, "decay", 0.0, 2, 2);
|
||||
var sustain = Interface.Slider(group, node, "sustain", 0, 1, 2);
|
||||
var release = Interface.Slider(group, node, "release", 0.001, 4, 2);
|
||||
// var freqGroup = $("<div>").appendTo(element).addClass("FreqGroup");
|
||||
// var minSlider = Interface.Slider(freqGroup, node, "min", 20, 20000, 2);
|
||||
// var maxSlider = Interface.Slider(freqGroup, node, "max", 20, 20000, 2);
|
||||
var minSlider = Interface.Slider(group, node, "min", 20, 20000, 2);
|
||||
var maxSlider = Interface.Slider(group, node, "max", 20, 20000, 2);
|
||||
return {
|
||||
listen : function(){
|
||||
ampEnv.listen();
|
||||
attack.listen();
|
||||
decay.listen();
|
||||
release.listen();
|
||||
sustain.listen();
|
||||
maxSlider.listen();
|
||||
minSlider.listen();
|
||||
}
|
||||
|
|
@ -269,6 +294,7 @@ Interface.Filter = function(containerID, node){
|
|||
var element = $("<div>").addClass("Filter")
|
||||
.appendTo(Interface.getElement(containerID));
|
||||
|
||||
|
||||
};
|
||||
|
||||
Interface.Loading = function(containerID, callback){
|
||||
|
|
|
|||
|
|
@ -203,24 +203,11 @@ body {
|
|||
font-size: 8px;
|
||||
display: inline-block; }
|
||||
#Content .FilterEnvelope {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px; }
|
||||
#Content .FilterEnvelope .Envelope {
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
height: 80px;
|
||||
left: 0px; }
|
||||
#Content .FilterEnvelope .FreqGroup {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 80px;
|
||||
right: 0px; }
|
||||
#Content .FilterEnvelope .FreqGroup [nx="slider"] {
|
||||
height: 100%;
|
||||
margin-left: 10%;
|
||||
width: 40%; }
|
||||
width: 180px; }
|
||||
#Content .FilterEnvelope [nx="slider"] {
|
||||
width: calc(100% / 6 - 10px);
|
||||
margin: 5px;
|
||||
height: calc(100% - 10px); }
|
||||
#Content .LoadingBar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue