Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2025-01-13 20:39:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

started meter GUI

Browse source
This commit is contained in:
Yotam Mann 2014-03-12 13:44:29 -04:00
parent 82e81cc87c
commit e739f8d811
5 changed files with 157 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
examples/pingPongDelay.html Normal file
View file

@ -0,0 +1,67 @@
<html>
<head>
<title>Web Audio</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../src/core/WebAudio.js"></script>
<script type="text/javascript" src="../src/core/Unit.js"></script>
<script type="text/javascript" src="../src/components/Player.js"></script>
<script type="text/javascript" src="../src/components/Meter.js"></script>
<script type="text/javascript" src="../src/components/Envelope.js"></script>
<script type="text/javascript" src="../src/components/LFO.js"></script>
<script type="text/javascript" src="../src/components/Noise.js"></script>
<script type="text/javascript" src="../src/components/StereoSplit.js"></script>
<script type="text/javascript" src="../src/effects/Effect.js"></script>
<script type="text/javascript" src="../src/effects/FeedbackDelay.js"></script>
<script type="text/javascript" src="../src/effects/PingPongDelay.js"></script>
<script type="text/javascript" src="../src/GUI/GUI.Meter.js"></script>
</head>
<body>
<style type="text/css">
#meter {
width: 100%;
text-align: center;
font-size: 10px;
}
</style>
<div id='Instructions'>Press 'e'</div>
<div id='meter'></div>
<script type="text/javascript">
var player = new WebAudio.Player("../audio/A3.mp3");
var meter = new WebAudio.Meter(2);
var env = new WebAudio.Envelope(.01, .05, 0, 0);
var lfo = new WebAudio.LFO(undefined, 1, .5, 1);
var noise = new WebAudio.Noise();
var feedbackDelay = new WebAudio.PingPongDelay(.25);
var meterGui = new WebAudio.GUI.Meter($("#meter")[0], meter);
noise.connect(env);
env.connect(feedbackDelay);
feedbackDelay.setFeedback(.5);
// lfo.connect(feedbackDelay);
// env.connect(WebAudio.output);
feedbackDelay.connect(meter);
feedbackDelay.connect(WebAudio.output);
noise.setVolume(.4);
player.load(function(){
// player.loop(0, 0, 1);
player.loop();
});
setInterval(function(){
// var text = meter.getVolume(0).toFixed(3);
// text += " "+meter.getVolume(1).toFixed(3)
// $("#meter").html(text);
}, 100);
$(document).keydown(function(e){
if (e.which == 69){
env.triggerAttack();
} else if (e.which == 83) {
env.triggerRelease();
}
});
</script>
</body>
</html>

1
index.html
View file

@ -27,6 +27,7 @@
noise.connect(env);
env.connect(feedbackDelay);
feedbackDelay.setFeedback(.5);
// lfo.connect(feedbackDelay);
// env.connect(WebAudio.output);
feedbackDelay.connect(meter);

85
src/GUI/GUI.Meter.js
View file

@ -0,0 +1,85 @@
WebAudio.GUI = WebAudio.GUI || {};
WebAudio.GUI.Meter = function(container, meter, height){
this.meter = meter;
setInterval(this.update.bind(this), 200);
this.element = document.createElement("div");
container.appendChild(this.element);
//some light styling
this.element.style.fontFamily = "monospace";
this.element.style.whiteSpace = "pre";
}
WebAudio.GUI.Meter.prototype.update = function(){
var text = this.drawBars(this.meter.volume, 40);
// text += gainToDb(leftVol).toFixed(1);
// text += gainToDb(rightVol).toFixed(1);
this.element.textContent = text;
if (this.meter.isClipped()){
this.element.style.color = "red";
} else {
this.element.style.color = "inherit";
}
}
WebAudio.GUI.Meter.prototype.slowUpdate = function(){
this.meterNumbers = "";
}
WebAudio.GUI.Meter.prototype.drawBars = function(volumes, segments){
var text = [];
for (var channel = 0; channel < volumes.length; channel++){
text.push(" _____ ");
}
text.push("\n");
for (var i = 0; i < segments; i++){
text.push("|");
for (var channel = 0; channel < volumes.length; channel++){
var volume = Math.pow(1 - volumes[channel], 6);
var volumeSegments = Math.round(volume * segments);
if (i < volumeSegments){
text.push(" ");
} else {
if (volumeSegments === segments){
text.push("_____");
} else {
text.push("-----");
}
}
if (channel == volumes.length - 1){
text.push("|\n");
} else {
text.push(" ");
}
}
}
for (var channel = 0; channel < volumes.length; channel++){
var db = this.meter.getDb(channel);
if (isFinite(db)){
if (db > -10){
db = " "+db.toFixed(1)+" ";
} else {
db = " "+db.toFixed(1);
}
} else {
db = " -inf ";
}
text.push(db + " ");
}
text.push("\n");
// console.log(text);
return text.join("");
}
//@param {number} db
//@returns {number} gain
var dbToGain = function(db) {
return Math.pow(2, db / 6);
}
//@param {number} gain
//@returns {number} db
var gainToDb = function(gain) {
return 20 * (Math.log(gain) / Math.LN10);
}

3
src/GUI/GUI.js Normal file
View file

@ -0,0 +1,3 @@
WebAudio.GUI = (function(){
});

2
src/components/Meter.js
View file

@ -74,6 +74,6 @@ WebAudio.Meter.prototype.onprocess = function(event){
sum += x * x;
}
var rms = Math.sqrt(sum / bufferSize);
this.volume[channel] = Math.max(rms, this.volume[channel] * .8);
this.volume[channel] = Math.max(rms, this.volume[channel] * .9);
}
}