From e739f8d811e190a8efbee1bbba71cfe8dca06676 Mon Sep 17 00:00:00 2001 From: Yotam Mann Date: Wed, 12 Mar 2014 13:44:29 -0400 Subject: [PATCH] started meter GUI --- examples/pingPongDelay.html | 67 +++++++++++++++++++++++++++++ index.html | 1 + src/GUI/GUI.Meter.js | 85 +++++++++++++++++++++++++++++++++++++ src/GUI/GUI.js | 3 ++ src/components/Meter.js | 2 +- 5 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 examples/pingPongDelay.html create mode 100644 src/GUI/GUI.js diff --git a/examples/pingPongDelay.html b/examples/pingPongDelay.html new file mode 100644 index 00000000..61933fc6 --- /dev/null +++ b/examples/pingPongDelay.html @@ -0,0 +1,67 @@ + + + Web Audio + + + + + + + + + + + + + + + + + +
Press 'e'
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index a0910932..09be4d69 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,7 @@ noise.connect(env); env.connect(feedbackDelay); + feedbackDelay.setFeedback(.5); // lfo.connect(feedbackDelay); // env.connect(WebAudio.output); feedbackDelay.connect(meter); diff --git a/src/GUI/GUI.Meter.js b/src/GUI/GUI.Meter.js index e69de29b..de3b4999 100644 --- a/src/GUI/GUI.Meter.js +++ b/src/GUI/GUI.Meter.js @@ -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); +} diff --git a/src/GUI/GUI.js b/src/GUI/GUI.js new file mode 100644 index 00000000..f26c1cab --- /dev/null +++ b/src/GUI/GUI.js @@ -0,0 +1,3 @@ +WebAudio.GUI = (function(){ + +}); \ No newline at end of file diff --git a/src/components/Meter.js b/src/components/Meter.js index 6003ef42..ecab5cfe 100644 --- a/src/components/Meter.js +++ b/src/components/Meter.js @@ -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); } } \ No newline at end of file