2014-04-03 21:13:13 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-04-06 00:47:59 +00:00
|
|
|
<title>AUTOPANNER</title>
|
2014-04-05 00:24:19 +00:00
|
|
|
|
2014-08-27 16:20:29 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../deps/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
|
2014-06-23 17:29:22 +00:00
|
|
|
<script type="text/javascript" src="../Tone.js"></script>
|
2014-08-27 16:20:29 +00:00
|
|
|
<script type="text/javascript" src="./Widgets.js"></script>
|
|
|
|
|
<script type="text/javascript" src="./ExampleList.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
2014-04-16 00:05:11 +00:00
|
|
|
|
2014-04-03 21:13:13 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-27 16:20:29 +00:00
|
|
|
<div id="Container">
|
|
|
|
|
<div id="Explanation">
|
|
|
|
|
Auto Panner
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
An Auto Panner is a left/right panner with an LFO controlling
|
|
|
|
|
the amount of pan. The effect is much more pronounced with headphones.
|
|
|
|
|
</div>
|
|
|
|
|
<div id="Content">
|
|
|
|
|
<input type='checkbox' id='StartButton'><label for="StartButton">start</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2014-04-03 21:13:13 +00:00
|
|
|
<script type="text/javascript">
|
2014-08-27 16:20:29 +00:00
|
|
|
|
|
|
|
|
/* global Tone, GUI*/
|
2014-04-16 00:05:11 +00:00
|
|
|
|
|
|
|
|
//panner
|
2014-08-27 16:20:29 +00:00
|
|
|
var panner = new Tone.AutoPanner();
|
2014-04-03 21:13:13 +00:00
|
|
|
|
2014-04-16 00:05:11 +00:00
|
|
|
//input signals
|
|
|
|
|
var sine = new Tone.Oscillator();
|
2014-04-03 21:13:13 +00:00
|
|
|
|
2014-04-16 00:05:11 +00:00
|
|
|
//connect it up
|
2014-08-27 16:20:29 +00:00
|
|
|
sine.connect(panner);
|
|
|
|
|
sine.setVolume(-6);
|
|
|
|
|
panner.toMaster();
|
|
|
|
|
|
|
|
|
|
//set the initial values
|
|
|
|
|
panner.setDry(0);
|
|
|
|
|
panner.setFrequency(1);
|
|
|
|
|
|
|
|
|
|
// GUI //
|
|
|
|
|
|
|
|
|
|
new GUI.TopBar(Tone);
|
|
|
|
|
new GUI.StartButton(function(){
|
|
|
|
|
Tone.startMobile();
|
|
|
|
|
panner.start();
|
2014-06-23 17:29:22 +00:00
|
|
|
});
|
2014-08-27 16:20:29 +00:00
|
|
|
|
|
|
|
|
var container = $("#Content");
|
|
|
|
|
|
|
|
|
|
//frequency control
|
|
|
|
|
$("<div>", {"class" : "Slider"}).slider({
|
|
|
|
|
"orientation" : "horizontal",
|
|
|
|
|
"min" : 1,
|
|
|
|
|
"max" : 50,
|
|
|
|
|
"value" : 10,
|
|
|
|
|
"slide" : function(e, ui){
|
|
|
|
|
var val = ui.value / 10;
|
|
|
|
|
panner.setFrequency(val);
|
|
|
|
|
freqValue.setValue(val);
|
|
|
|
|
}
|
|
|
|
|
}).appendTo(container);
|
|
|
|
|
|
|
|
|
|
var freqValue = new GUI.Value(container, 1, "Rate", "hz");
|
|
|
|
|
|
|
|
|
|
//dry wet control
|
|
|
|
|
$("<div>", {"class" : "Slider"}).slider({
|
|
|
|
|
"orientation" : "horizontal",
|
|
|
|
|
"min" : 0,
|
|
|
|
|
"max" : 100,
|
|
|
|
|
"value" : 100,
|
|
|
|
|
"slide" : function(e, ui){
|
|
|
|
|
panner.setWet(ui.value / 100);
|
|
|
|
|
wetValue.setValue(ui.value);
|
|
|
|
|
}
|
|
|
|
|
}).appendTo(container);
|
|
|
|
|
|
|
|
|
|
var wetValue = new GUI.Value(container, 100, "Amount", "%");
|
|
|
|
|
|
|
|
|
|
//start/stop button
|
|
|
|
|
var startButton = $("#StartButton").button({
|
|
|
|
|
"label" : "start"
|
|
|
|
|
})
|
|
|
|
|
.click(function(){
|
|
|
|
|
if (this.checked){
|
|
|
|
|
startButton.button({
|
|
|
|
|
"label" : "stop"
|
|
|
|
|
});
|
|
|
|
|
sine.start();
|
|
|
|
|
} else {
|
|
|
|
|
startButton.button({
|
|
|
|
|
"label" : "start"
|
|
|
|
|
});
|
|
|
|
|
sine.stop();
|
|
|
|
|
}
|
|
|
|
|
});
|
2014-04-06 00:47:59 +00:00
|
|
|
|
2014-04-03 21:13:13 +00:00
|
|
|
</script>
|
2014-08-27 16:20:29 +00:00
|
|
|
<style type="text/css">
|
|
|
|
|
#Content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.Value {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.Slider {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2014-04-03 21:13:13 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
