Tone.js/examples/autoPanner.html
2014-06-15 17:37:17 -04:00

67 lines
No EOL
1.3 KiB
HTML

<html>
<head>
<title>AUTOPANNER</title>
<script type="text/javascript" src='../build/Tone.js'></script>
</head>
<body>
<button>start</button>
<input type='range' value='50'>
<div id='left'>0</div>
<div id='right'>0</div>
<script type="text/javascript">
//panner
var pan = new Tone.AutoPanner();
//input signals
var sine = new Tone.Oscillator();
//connect it up
sine.connect(pan);
pan.toMaster();
//meter
var meter = new Tone.Meter(2);
pan.connect(meter);
//star the panner lfo
pan.start();
var leftMeter = document.querySelector("#left");
var rightMeter = document.querySelector("#right");
//meter the content
setInterval(function(){
leftMeter.textContent = "left: " + meter.getDb(0).toFixed(2) + " db";
rightMeter.textContent = "right: " + meter.getDb(1).toFixed(2) + " db";
}, 100);
//INTERFACE//
var button = document.querySelector("button");
//called when the start button is clicked
button.onclick = function(){
if (!sine.started){
sine.start();
button.textContent = "stop";
} else {
sine.stop();
button.textContent = "start";
}
}
var range = document.querySelector("input");
//called when the range is changed
range.onchange = function(){
var val = range.value;
pan.setDry(val / 50 - 1, "+ .1");
}
</script>
</body>
</html>