Tone.js/examples/signalProcessing.html

61 lines
No EOL
1.7 KiB
HTML

<html>
<head>
<title>SIGNAL PROCESSING</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../Tone.js"></script>
<link rel="stylesheet" type="text/css" href="exampleStyle.css">
</head>
<body>
<div>Process a signal through various methods to alter its value</div>
<br><br>
<input type='range' value='50'>
<div id='signal'>0</div>
<div id='add'>0</div>
<div id='scale'>0</div>
<div id='mult'>0</div>
<script type="text/javascript">
var signal = new Tone.Signal(0);
var dryMeter = new Tone.Meter();
signal.connect(dryMeter);
//the adder
var adder = new Tone.Add(100);
var addMeter = new Tone.Meter();
adder.connect(addMeter);
signal.connect(adder);
//the scaler
var scaler = new Tone.Scale(99, 101, 5, 10);
var scaleMeter = new Tone.Meter();
scaler.connect(scaleMeter);
adder.connect(scaler);
//the multiplier
var mult = new Tone.Multiply(10);
var multMeter = new Tone.Meter();
mult.connect(multMeter);
scaler.connect(mult);
//INTERFACE//
var $signal = document.querySelector("#signal");
var $add = document.querySelector("#add");
var $scale = document.querySelector("#scale");
var $mult = document.querySelector("#mult");
setInterval(function(){
$("#signal").text("signal: " + dryMeter.getValue().toFixed(3));
$("#add").text("signal + 100: " + addMeter.getValue().toFixed(3));
$("#scale").text("scaled 5 to 10: " + scaleMeter.getValue().toFixed(3));
$("#mult").text("signal * 10: " + multMeter.getValue().toFixed(3));
}, 100);
$("input").on("input", function(){
var val = $(this).val();
signal.linearRampToValueAtTime(val / 50 - 1, "+0.1");
});
</script>
</body>
</html>