diff options
| author | Justin Worthe <justin@worthe-it.co.za> | 2017-11-04 16:56:02 +0200 |
|---|---|---|
| committer | Justin Worthe <justin@worthe-it.co.za> | 2017-11-04 16:56:02 +0200 |
| commit | 1e37661ea154815fe4e0fa421d5be33d29e0a36d (patch) | |
| tree | 17604555bbfdfb1006fa63ef827778dea5eff0aa /web | |
| parent | ed87b9354ac737185eb177bb62e4c3f579cd52b7 (diff) | |
Updated calls from web to limit the window size to 512 samples
Diffstat (limited to 'web')
| -rw-r--r-- | web/index.html | 1 | ||||
| -rw-r--r-- | web/main.js | 17 |
2 files changed, 9 insertions, 9 deletions
diff --git a/web/index.html b/web/index.html index faf637b..7f18a7c 100644 --- a/web/index.html +++ b/web/index.html @@ -6,6 +6,7 @@ <body> <p>The current note being played is <span id="pitch-label"></span></p> <p>It is <span id="pitch-error-direction"></span> by <span id="pitch-error"></span> cents</p> + <p>The current framerate is <span id="frame-rate"></span></p> <canvas id="oscilloscope" width="300" height="300" /> </body> diff --git a/web/main.js b/web/main.js index c7ba24b..6962493 100644 --- a/web/main.js +++ b/web/main.js @@ -44,17 +44,19 @@ function findFundamentalFrequency(data, samplingRate) { }); } +var nDataBytes = null; var dataPtr = null; var dataHeap = null; function findFundamentalFrequencyNoFree(data, samplingRate) { + var length = Math.min(data.length, 512); //assume data is already a Float32Array and its length won't change from call to call if (!dataPtr) { - var nDataBytes = data.length * data.BYTES_PER_ELEMENT; + nDataBytes = length * data.BYTES_PER_ELEMENT; dataPtr = Module._malloc(nDataBytes); dataHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, nDataBytes); } - dataHeap.set(new Uint8Array(data.buffer)); - return Module._find_fundamental_frequency(dataPtr, data.length, samplingRate); + dataHeap.set(new Uint8Array(data.buffer, data.buffer.byteLength - nDataBytes)); + return Module._find_fundamental_frequency(dataPtr, length, samplingRate); } @@ -94,7 +96,7 @@ function draw(dataArray, canvas, canvasCtx) { // This draw example is currently heavily based on an example // from MDN: // https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode - var bufferLength = dataArray.length; + var bufferLength = Math.min(dataArray.length, 512); canvasCtx.fillStyle = 'rgb(200, 200, 200)'; canvasCtx.fillRect(0, 0, canvas.width, canvas.height); @@ -108,9 +110,7 @@ function draw(dataArray, canvas, canvasCtx) { var x = 0; for (var i = 0; i < bufferLength; i++) { - - var v = dataArray[i] / 128.0; - var y = v * canvas.height / 2; + var y = (dataArray[i] * canvas.height / 2) + canvas.height / 2; if (i === 0) { canvasCtx.moveTo(x, y); @@ -121,7 +121,6 @@ function draw(dataArray, canvas, canvasCtx) { x += sliceWidth; } - canvasCtx.lineTo(canvas.width, canvas.height / 2); canvasCtx.stroke(); }; @@ -146,7 +145,7 @@ function main() { var dt = timestamp - lastTimestamp; lastTimestamp = timestamp; var framerate = 100000/dt; - console.log("Framerate is", framerate); + document.getElementById('frame-rate').innerHTML = framerate.toFixed(2) + 'Hz'; } var dataArray = new Float32Array(analyser.fftSize); |