mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
110 lines
No EOL
2.4 KiB
HTML
110 lines
No EOL
2.4 KiB
HTML
<html>
|
|
<head>
|
|
<title>AUTOPANNER</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<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>
|
|
<script type="text/javascript" src="../build/Tone.js"></script>
|
|
<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">
|
|
|
|
</head>
|
|
<body>
|
|
<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">
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
/* global Tone, GUI*/
|
|
|
|
//panner
|
|
var panner = new Tone.AutoPanner();
|
|
|
|
//input signals
|
|
var sine = new Tone.Oscillator();
|
|
|
|
//connect it up
|
|
sine.connect(panner);
|
|
sine.setVolume(-6);
|
|
panner.toMaster();
|
|
|
|
//set the initial values
|
|
panner.setDry(0);
|
|
panner.setFrequency(1);
|
|
|
|
// GUI //
|
|
|
|
new GUI.TopBar(Tone);
|
|
|
|
var container = $("#Content");
|
|
|
|
new GUI.Checkbox(container, function(on){
|
|
if (on){
|
|
sine.start();
|
|
panner.start();
|
|
} else {
|
|
sine.stop();
|
|
}
|
|
}, "start", "stop");
|
|
|
|
//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", "%");
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
#Content {
|
|
text-align: center;
|
|
}
|
|
.Value {
|
|
margin-top: 5px;
|
|
display: block;
|
|
}
|
|
.Checkbox {
|
|
width: 100%;
|
|
}
|
|
.Slider {
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|
|
|
|
</body>
|
|
</html> |