Tone.js/examples/signalMath.html

113 lines
3.2 KiB
HTML
Raw Normal View History

<html>
<head>
<title>SIGNAL PROCESSING</title>
2014-08-27 15:16:49 +00:00
<meta name="viewport" content="width=device-width, initial-scale=0.5">
2014-08-26 04:49:11 +00:00
<script type="text/javascript" src="../deps/jquery.min.js"></script>
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
2014-08-27 15:16:49 +00:00
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="../Tone.js"></script>
2014-08-26 04:49:11 +00:00
<script type="text/javascript" src="./Widgets.js"></script>
2014-08-27 15:16:49 +00:00
<script type="text/javascript" src="./ExampleList.js"></script>
2014-08-26 04:49:11 +00:00
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
</head>
<body>
2014-08-26 04:49:11 +00:00
<div id="Container">
2014-08-27 15:16:49 +00:00
<div id="Explanation">
Audio-Rate Math
<br>
<br>
One of the most powerful features of Tone.js is the ability to
perform math and logic on audio-rate signal. These signals
can be ramped and scheduled for control of Audio Parameters and
other Tone.Signals making it simple to create elaborate,
interconnected automations. Signals and Signal maths use no
ScripProcessorNodes which make them very efficient.
</div>
<div id="Content">
<div id='Slider'></div>
</div>
2014-08-26 04:49:11 +00:00
</div>
<script type="text/javascript">
2014-08-26 04:49:11 +00:00
/* globals Tone, GUI */
//the driving signal
var signal = new Tone.Signal(0);
var dryMeter = new Tone.Meter();
signal.connect(dryMeter);
2014-08-26 04:49:11 +00:00
//add a constant value to the dry signal
var adder = new Tone.Add(100);
var addMeter = new Tone.Meter();
adder.connect(addMeter);
2014-08-26 04:49:11 +00:00
//scale the added value between 5 and 10
var scaler = new Tone.Scale(100, 101, 5, 10);
var scaleMeter = new Tone.Meter();
scaler.connect(scaleMeter);
2014-08-26 04:49:11 +00:00
//multiply the output by 10
var mult = new Tone.Multiply(10);
var multMeter = new Tone.Meter();
mult.connect(multMeter);
2014-08-26 04:49:11 +00:00
//clip the results between 70 and 80
var clip = new Tone.Clip(70, 80);
var clipMeter = new Tone.Meter();
clip.connect(clipMeter);
//negate the signal
var neg = new Tone.Negate();
2014-08-27 15:16:49 +00:00
var negMeter = new Tone.Meter();
neg.connect(negMeter);
2014-08-26 04:49:11 +00:00
//take the absolute value of the signal
var abs = new Tone.Abs();
var absMeter = new Tone.Meter();
abs.connect(absMeter);
//chain the components together
signal.chain(signal, abs, adder, scaler, mult, clip, neg);
2014-08-26 04:49:11 +00:00
// GUI //
2014-08-27 15:16:49 +00:00
new GUI.TopBar(Tone);
2014-08-26 04:49:11 +00:00
new GUI.StartButton(Tone.startMobile);
2014-08-27 15:16:49 +00:00
var container = $("#Content");
2014-08-26 04:49:11 +00:00
$("#Slider").slider({
"orientation" : "horizontal",
"min" : -100,
"max" : 100,
"slide" : function(e, ui){
signal.linearRampToValueAtTime(ui.value / 100, "+0.1");
}
});
2014-08-26 04:49:11 +00:00
new GUI.ValueMeter(container, dryMeter, "Tone.Signal");
new GUI.ValueMeter(container, absMeter, "Tone.Abs()");
new GUI.ValueMeter(container, addMeter, "Tone.Add(100)");
new GUI.ValueMeter(container, scaleMeter, "Tone.Scale(100, 101, 5, 10)");
new GUI.ValueMeter(container, multMeter, "Tone.Multiply(10)");
new GUI.ValueMeter(container, clipMeter, "Tone.Clip(70, 80)");
2014-08-27 15:16:49 +00:00
new GUI.ValueMeter(container, negMeter, "Tone.Negate()");
2014-08-26 04:49:11 +00:00
</script>
2014-08-26 04:49:11 +00:00
<style type="text/css">
2014-08-27 15:16:49 +00:00
#Content {
2014-08-26 04:49:11 +00:00
text-align: center;
width: 280px;
height: 250px;
}
.ValueMeter {
margin-top: 10px;
display: block;
}
</style>
</body>
</html>