<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Signal</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="icon" type="image/png" sizes="174x174" href="./favicon.png"> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script> <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/> <script src="../build/Tone.js"></script> <script src="./js/tone-ui.js"></script> <script src="./js/components.js"></script> <style type="text/css"> tone-play-toggle { margin-bottom: 10px; } tone-slider { display: block; width: 100%; } </style> </head> <body> <tone-example label="Control Voltage"> <div slot="explanation"> One of the most powerful features of Tone.js and the Web Audio API is the ability to perform math and logic on audio-rate signal. Signals can be ramped and scheduled to control Audio Parameters and other Signals making it simple to create elaborate, interconnected automations. <br><br> This example applies a series of mappings to a signal value and applies the results of those mappings to the frequency attribute of 2 <a href="https://tonejs.github.io/docs/Oscillator">Tone.Oscillators</a> and a <a href="https://tonejs.github.io/docs/LFO">Tone.LFO</a>. </div> <div id="content"> <tone-play-toggle></tone-play-toggle> <tone-slider label="Modulation Rate" min="0.1" max="1" exp="2" value="0.5"></tone-slider> </div> </tone-example> <script type="text/javascript">//use this to pan the two oscillators hard left/right var merge = new Tone.Merge().toDestination(); //two oscillators panned hard left / hard right var rightOsc = new Tone.Oscillator({ "type" : "sawtooth", "volume" : -20 }).connect(merge, 0, 0); var leftOsc = new Tone.Oscillator({ "type" : "square", "volume" : -20 }).connect(merge, 0, 1); //create an oscillation that goes from 0 to 1200 //connection it to the detune of the two oscillators var detuneLFO = new Tone.LFO({ "type" : "square", "min" : 0, "max" : 1200 }).fan(rightOsc.detune, leftOsc.detune).start(); //the frequency signal var frequency = new Tone.Signal(0.5); //the move the 0 to 1 value into frequency range var scale = new Tone.ScaleExp(110, 440); //multiply the frequency by 2.5 to get a 10th above var mult = new Tone.Multiply(2.5); //chain the components together frequency.chain(scale, mult); scale.connect(rightOsc.frequency); mult.connect(leftOsc.frequency); //multiply the frequency by 2 to get the octave above var detuneScale = new Tone.Scale(14, 4); frequency.chain(detuneScale, detuneLFO.frequency); //start the oscillators with the play button document.querySelector("tone-play-toggle").addEventListener("start", () => { rightOsc.start(); leftOsc.start(); }); document.querySelector("tone-play-toggle").addEventListener("stop", () => { rightOsc.stop(); leftOsc.stop(); }); //ramp the frequency with the slider document.querySelector("tone-slider").addEventListener("input", e => { frequency.rampTo(parseFloat(e.target.value), 0.1); }); </script> </body> </html>