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
2014-08-27 16:20:29 +00:00
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. Additionally, Signals and Signal maths use no
ScriptProcessorNodes which make them very efficient.
2014-08-27 15:16:49 +00:00
</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-28 02:23:00 +00:00
//take the absolute value of the signal
var abs = new Tone.Abs();
var absMeter = new Tone.Meter();
abs.connect(absMeter);
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
//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>