2015-06-07 16:10:19 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > LFO Effects< / title >
2019-01-09 01:21:29 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./favicon.png" >
2015-06-07 16:10:19 +00:00
2020-07-18 00:58:09 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js" > < / script >
2020-07-18 00:36:42 +00:00
< link href = "https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel = "stylesheet" / >
2019-01-09 01:21:29 +00:00
< script src = "../build/Tone.js" > < / script >
2020-07-18 00:58:09 +00:00
< script src = "./js/tone-ui.js" > < / script >
< script src = "./js/components.js" > < / script >
2015-06-07 16:10:19 +00:00
< / head >
< body >
2020-07-18 00:36:42 +00:00
< tone-example label = "LFO Effects" >
< div slot = "explanation" >
2019-01-09 01:21:29 +00:00
These effects use an < a href = "https://tonejs.github.io/docs/LFO" > LFO< / a > (Low Frequency Oscillator) to modulate the effect. Click and drag the dot to change the frequency and depth of the effect.
2015-06-27 22:02:55 +00:00
< br > < br >
2019-01-09 01:21:29 +00:00
Docs on < a href = "https://tonejs.github.io/docs/AutoPanner" > Tone.AutoPanner< / a > ,
< a href = "https://tonejs.github.io/docs/AutoFilter" > Tone.AutoFilter< / a > , and
< a href = "https://tonejs.github.io/docs/Tremolo" > Tone.Tremolo< / a >
2020-07-18 00:36:42 +00:00
< / div >
2019-01-09 01:21:29 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
< tone-slider label = "Panner" id = "panner" units = "hz" value = "4" step = "0.5" min = "1" max = "15" > < / tone-slider >
2019-01-09 01:21:29 +00:00
< tone-play-toggle id = "osc0" > < / tone-play-toggle >
2020-07-18 00:36:42 +00:00
< tone-slider label = "Filter" id = "filter" units = "hz" value = "4" step = "0.5" min = "1" max = "15" > < / tone-slider >
2019-01-09 01:21:29 +00:00
< tone-play-toggle id = "osc1" > < / tone-play-toggle >
2020-07-18 00:36:42 +00:00
< tone-slider label = "Tremolo" id = "tremolo" units = "hz" value = "4" step = "0.5" min = "1" max = "15" > < / tone-slider >
2019-01-09 01:21:29 +00:00
< tone-play-toggle id = "osc2" > < / tone-play-toggle >
< / tone-content >
< / tone-example >
< script type = "text/javascript" >
2020-07-18 00:36:42 +00:00
// AutoPanner - a panning modulation effect
const panner = new Tone.AutoPanner({
frequency: 4,
depth: 1
}).toDestination().start();
2015-06-07 16:10:19 +00:00
2020-07-18 00:36:42 +00:00
// AutoFilter - a filter modulation effect
const filter = new Tone.AutoFilter({
frequency: 2,
depth: 0.6
}).toDestination().start();
2015-06-07 16:10:19 +00:00
2020-07-18 00:36:42 +00:00
// Tremolo - an amplitude modulation effect
const tremolo = new Tone.Tremolo({
frequency: 0.6,
depth: 0.7
}).toDestination().start();
2015-06-07 16:10:19 +00:00
2020-07-18 00:36:42 +00:00
// the input oscillators
const pannerOsc = new Tone.Oscillator({
volume: -12,
type: "square6",
frequency: "C4"
}).connect(panner);
2015-06-07 16:10:19 +00:00
2020-07-18 00:36:42 +00:00
const filterOsc = new Tone.Oscillator({
volume: -12,
type: "square6",
frequency: "E4"
}).connect(filter);
2015-06-07 16:10:19 +00:00
2020-07-18 00:36:42 +00:00
const tremoloOsc = new Tone.Oscillator({
volume: -12,
type: "square6",
frequency: "A4"
}).connect(tremolo);
2015-06-07 16:10:19 +00:00
2020-07-18 00:36:42 +00:00
// bind the interface
document.querySelector("#osc0").addEventListener("start", () => pannerOsc.start());
document.querySelector("#osc0").addEventListener("stop", () => pannerOsc.stop());
document.querySelector("#panner").addEventListener("input", (e) => panner.frequency.value = parseFloat(e.target.value));
document.querySelector("#osc1").addEventListener("start", () => filterOsc.start());
document.querySelector("#osc1").addEventListener("stop", () => filterOsc.stop());
document.querySelector("#filter").addEventListener("input", (e) => filter.frequency.value = parseFloat(e.target.value));
document.querySelector("#osc2").addEventListener("start", () => tremoloOsc.start());
document.querySelector("#osc2").addEventListener("stop", () => tremoloOsc.stop());
document.querySelector("#tremolo").addEventListener("input", (e) => tremolo.frequency.value = parseFloat(e.target.value));
2015-06-07 16:10:19 +00:00
< / script >
2017-03-26 20:39:19 +00:00
2015-06-07 16:10:19 +00:00
< / body >
2017-03-18 16:35:37 +00:00
< / html >
