2014-03-15 03:17:18 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-03-15 03:30:00 +00:00
|
|
|
<title>LFO</title>
|
2014-03-15 03:17:18 +00:00
|
|
|
|
2014-08-29 16:25:10 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
|
|
|
|
2014-09-04 19:20:25 +00:00
|
|
|
<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>
|
2014-08-29 16:25:10 +00:00
|
|
|
<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">
|
|
|
|
|
|
2014-03-15 03:17:18 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-04-16 00:05:11 +00:00
|
|
|
|
2014-08-29 16:25:10 +00:00
|
|
|
<div id="Container">
|
|
|
|
|
<div id="Explanation">
|
|
|
|
|
Low Frequency Oscillators
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="http://en.wikipedia.org/wiki/Low-frequency_oscillation">LFOs</a> are a powerful musical tool.
|
2014-09-02 16:15:29 +00:00
|
|
|
LFOs can be connected to Tone.Signals and AudioParams to control nearly anything. This example uses LFOs
|
|
|
|
|
to control the oscillators pitch, detune, delay time, and filter frequency to make some crazy sounds.
|
2014-08-29 16:25:10 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="Content"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
/* globals Tone, GUI */
|
|
|
|
|
|
|
|
|
|
var osc0 = new Tone.Oscillator(440, "triangle");
|
|
|
|
|
var osc1 = new Tone.Oscillator(440, "square");
|
2014-09-02 16:15:29 +00:00
|
|
|
osc0.setVolume(-15);
|
|
|
|
|
osc1.setVolume(-15);
|
2014-08-29 16:25:10 +00:00
|
|
|
|
|
|
|
|
var oscAmplitude = Tone.context.createGain();
|
|
|
|
|
|
|
|
|
|
//lfo on a filter
|
2014-09-02 16:15:29 +00:00
|
|
|
var filterLFO = new Tone.LFO(0.2, 500, 4000);
|
2014-08-29 16:25:10 +00:00
|
|
|
var filter = new Tone.Filter(800, "lowpass");
|
2014-09-02 16:15:29 +00:00
|
|
|
filter.Q.value = 10;
|
2014-08-29 16:25:10 +00:00
|
|
|
filterLFO.connect(filter.frequency);
|
|
|
|
|
|
|
|
|
|
//3 LFOs control the pitch of the osc0illator
|
|
|
|
|
var noteLFO0 = new Tone.LFO(2, 0, 440);
|
|
|
|
|
noteLFO0.setType("square");
|
|
|
|
|
noteLFO0.connect(osc0.frequency);
|
|
|
|
|
noteLFO0.connect(osc1.frequency);
|
|
|
|
|
|
|
|
|
|
var noteLFO1 = new Tone.LFO(1, 0, 880);
|
|
|
|
|
noteLFO1.setType("square");
|
|
|
|
|
noteLFO1.connect(osc0.frequency);
|
|
|
|
|
noteLFO1.connect(osc1.frequency);
|
|
|
|
|
|
|
|
|
|
var noteLFO2 = new Tone.LFO(0.5, 0, 1760);
|
|
|
|
|
noteLFO2.setType("square");
|
|
|
|
|
noteLFO2.connect(osc0.frequency);
|
|
|
|
|
noteLFO2.connect(osc1.frequency);
|
|
|
|
|
|
|
|
|
|
//change the detune of the second osc
|
|
|
|
|
var detuneOscillator = new Tone.LFO(5, -50, 50);
|
|
|
|
|
detuneOscillator.connect(osc1.detune);
|
|
|
|
|
|
|
|
|
|
//a triangle wave controlling the amplitude
|
|
|
|
|
var envelopeLFO = new Tone.Oscillator(4, "sine");
|
|
|
|
|
//when the oscillator goes below 0, just output 0
|
|
|
|
|
var keeptItPositive = new Tone.Max(0);
|
|
|
|
|
//run it through a feedback delay to repeat the note
|
|
|
|
|
var noteRepeater = new Tone.FeedbackDelay(0.25);
|
|
|
|
|
noteRepeater.setFeedback(0.9);
|
|
|
|
|
//connect up the chain
|
|
|
|
|
envelopeLFO.connect(keeptItPositive);
|
|
|
|
|
keeptItPositive.connect(noteRepeater);
|
|
|
|
|
noteRepeater.connect(oscAmplitude.gain);
|
|
|
|
|
oscAmplitude.gain.value = 0;
|
|
|
|
|
|
|
|
|
|
//lfo on the note repeater
|
|
|
|
|
var repeaterLFO = new Tone.LFO(0.04, 0.01, 0.4);
|
|
|
|
|
repeaterLFO.connect(noteRepeater.delayTime);
|
|
|
|
|
|
|
|
|
|
osc0.connect(oscAmplitude);
|
|
|
|
|
osc1.connect(oscAmplitude);
|
|
|
|
|
oscAmplitude.connect(filter);
|
|
|
|
|
filter.toMaster();
|
|
|
|
|
|
|
|
|
|
//meters
|
|
|
|
|
var freqMeter = new Tone.Meter();
|
|
|
|
|
osc0.frequency.connect(freqMeter);
|
|
|
|
|
|
|
|
|
|
var detuneMeter = new Tone.Meter();
|
|
|
|
|
detuneOscillator.connect(detuneMeter);
|
|
|
|
|
|
|
|
|
|
var filterMeter = new Tone.Meter();
|
|
|
|
|
filterLFO.connect(filterMeter);
|
|
|
|
|
|
|
|
|
|
var repeaterMeter = new Tone.Meter();
|
|
|
|
|
repeaterLFO.connect(repeaterMeter);
|
|
|
|
|
|
|
|
|
|
// GUI //
|
|
|
|
|
|
|
|
|
|
var content = $("#Content");
|
|
|
|
|
|
|
|
|
|
new GUI.TopBar(Tone);
|
|
|
|
|
new GUI.StartButton(Tone.startMobile);
|
|
|
|
|
|
|
|
|
|
new GUI.Checkbox(content, function(on){
|
|
|
|
|
if (on){
|
|
|
|
|
filterLFO.start();
|
|
|
|
|
noteLFO0.start();
|
|
|
|
|
noteLFO1.start();
|
|
|
|
|
noteLFO2.start();
|
|
|
|
|
detuneOscillator.start();
|
|
|
|
|
osc0.start();
|
|
|
|
|
osc1.start();
|
|
|
|
|
envelopeLFO.start();
|
|
|
|
|
repeaterLFO.start();
|
2014-06-23 17:29:22 +00:00
|
|
|
$(this).text("stop");
|
2014-04-16 00:05:11 +00:00
|
|
|
} else {
|
2014-08-29 16:25:10 +00:00
|
|
|
osc0.stop();
|
|
|
|
|
filterLFO.stop();
|
|
|
|
|
noteLFO0.stop();
|
|
|
|
|
noteLFO1.stop();
|
|
|
|
|
noteLFO2.stop();
|
|
|
|
|
detuneOscillator.stop();
|
|
|
|
|
osc0.stop();
|
|
|
|
|
osc1.stop();
|
|
|
|
|
envelopeLFO.stop();
|
|
|
|
|
repeaterLFO.stop();
|
2014-06-23 17:29:22 +00:00
|
|
|
$(this).text("start");
|
2014-04-16 00:05:11 +00:00
|
|
|
}
|
2014-08-29 16:25:10 +00:00
|
|
|
}, "start", "stop");
|
|
|
|
|
|
|
|
|
|
//frequency controls
|
|
|
|
|
$("<div>", {"class" : "Slider"}).slider({
|
|
|
|
|
"min" : 20,
|
|
|
|
|
"max" : 100,
|
|
|
|
|
"value" : 50,
|
|
|
|
|
"slide" : function(e, ui){
|
|
|
|
|
var val = ui.value / 100;
|
|
|
|
|
envelopeLFO.setFrequency(val * 8);
|
|
|
|
|
noteLFO0.setFrequency(val * 4);
|
|
|
|
|
noteLFO1.setFrequency(val * 2);
|
|
|
|
|
noteLFO1.setFrequency(val);
|
|
|
|
|
freqValue.setValue(val);
|
|
|
|
|
}
|
|
|
|
|
}).appendTo(content);
|
|
|
|
|
var freqValue = new GUI.Value(content, 0.5, "frequency LFO", "hz");
|
|
|
|
|
//detune controls
|
|
|
|
|
$("<div>", {"class" : "Slider"}).slider({
|
|
|
|
|
"min" : 10,
|
|
|
|
|
"max" : 500,
|
|
|
|
|
"value" : 50,
|
|
|
|
|
"slide" : function(e, ui){
|
|
|
|
|
var val = ui.value / 10;
|
|
|
|
|
detuneOscillator.setFrequency(val);
|
|
|
|
|
detuneValue.setValue(val);
|
|
|
|
|
}
|
|
|
|
|
}).appendTo(content);
|
|
|
|
|
var detuneValue = new GUI.Value(content, 5, "detune LFO", "hz");
|
|
|
|
|
//filter controls
|
|
|
|
|
$("<div>", {"class" : "Slider"}).slider({
|
|
|
|
|
"min" : 5,
|
|
|
|
|
"max" : 500,
|
|
|
|
|
"value" : 20,
|
|
|
|
|
"slide" : function(e, ui){
|
|
|
|
|
var val = ui.value / 100;
|
|
|
|
|
filterLFO.setFrequency(val);
|
|
|
|
|
filterValue.setValue(val);
|
|
|
|
|
}
|
|
|
|
|
}).appendTo(content);
|
|
|
|
|
var filterValue = new GUI.Value(content, 0.2, "filter LFO", "hz");
|
|
|
|
|
//note repeat controls
|
|
|
|
|
$("<div>", {"class" : "Slider"}).slider({
|
|
|
|
|
"min" : 1,
|
|
|
|
|
"max" : 400,
|
|
|
|
|
"value" : 40,
|
|
|
|
|
"slide" : function(e, ui){
|
|
|
|
|
var val = ui.value / 100;
|
|
|
|
|
repeaterLFO.setFrequency(val);
|
|
|
|
|
repeatValue.setValue(val);
|
|
|
|
|
}
|
|
|
|
|
}).appendTo(content);
|
|
|
|
|
var repeatValue = new GUI.Value(content, 0.4, "note repeat LFO", "hz");
|
|
|
|
|
|
2014-03-15 03:17:18 +00:00
|
|
|
</script>
|
2014-08-29 16:25:10 +00:00
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
#Content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 220px;
|
|
|
|
|
height: 250px;
|
|
|
|
|
}
|
|
|
|
|
.Value {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.Slider {
|
2014-09-02 16:15:29 +00:00
|
|
|
margin-top: 15px;
|
2014-08-29 16:25:10 +00:00
|
|
|
}
|
|
|
|
|
.Checkbox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2014-03-15 03:17:18 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
