Tone.js/examples/panner.html

60 lines
1.2 KiB
HTML
Raw Normal View History

2014-04-05 00:24:19 +00:00
<html>
<head>
<title>PANNER</title>
2014-04-05 00:24:19 +00:00
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../deps/require.js"></script>
2014-04-05 00:24:19 +00:00
</head>
<body>
<style type="text/css">
</style>
<input type='range' value='50'>
<div id='left'>0</div>
<div id='right'>0</div>
<script type="text/javascript">
require.config({
baseUrl : "../src"
});
require(["core/Tone", "core/Master", "component/Panner", "component/Meter"],
function(Tone){
2014-04-05 00:24:19 +00:00
//panner
var pan = new Tone.Panner();
2014-04-05 00:24:19 +00:00
//input signals
var sine = Tone.context.createOscillator();
sine.start(0);
// var sine = new Tone.Signal(100);
2014-04-05 00:24:19 +00:00
//connect it up
sine.connect(pan);
2014-04-05 00:24:19 +00:00
pan.toMaster();
2014-04-05 00:24:19 +00:00
//meters
var output = new Tone.Meter(2);
2014-04-05 00:24:19 +00:00
//meter the outputs
pan.connect(output);
2014-04-05 00:24:19 +00:00
var $left = $("#left");
var $right = $("#right");
setInterval(function(){
$left.html("left: " + output.getDb(0).toFixed(2) + " db");
$right.html("right: " + output.getDb(1).toFixed(2) + " db");
}, 100);
var range = $("input")[0];
range.onchange = function(){
var val = range.value;
var now = pan.now();
pan.setPan(val/50 - 1, now+.1);
}
});
2014-04-05 00:24:19 +00:00
</script>
</body>
</html>