diff options
author | Justin Worthe <justin@worthe-it.co.za> | 2017-12-28 23:06:19 +0200 |
---|---|---|
committer | Justin Worthe <justin@worthe-it.co.za> | 2017-12-28 23:06:19 +0200 |
commit | 452366b0abbae346b2beec761c910b72f3dd2fd6 (patch) | |
tree | 32202dcb26f4c9a76e7c4df02122d8a018e0c70c /web | |
parent | da50c0294696c3a327db4b2a0a089d7977df488e (diff) |
Updated WASM build to use the new wasm32-unknown-unknown target
It's only in the nightly compiler at the moment.
Diffstat (limited to 'web')
-rw-r--r-- | web/index.html | 75 | ||||
-rw-r--r-- | web/main.js | 72 |
2 files changed, 99 insertions, 48 deletions
diff --git a/web/index.html b/web/index.html index d3f6a4b..2d957cc 100644 --- a/web/index.html +++ b/web/index.html @@ -1,47 +1,48 @@ +<!DOCTYPE html> <html> <head> + <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> - </head> - <body> - <h1>Rusty Microphone</h1> - <div id="loading"> - Loading... - </div> - <div id="browser-support-error" class="error" style="display:none;"> - <p> - It looks like something has gone wrong while loading. The - most likely reason for this is that this app doesn't support - your web browser. - </p> + </head> + <body> + <h1>Rusty Microphone</h1> + <div id="loading"> + Loading... + </div> + <div id="browser-support-error" class="error" style="display:none;"> + <p> + It looks like something has gone wrong while loading. The + most likely reason for this is that this app doesn't support + your web browser. + </p> - <p> - I test with the latest version of Firefox, but it should - also work with recent versions of Chrome, Microsoft Edge, - Safari and Opera. If you're running one of these browsers, - please make sure you've updated to the latest version. - </p> + <p> + I test with the latest version of Firefox, but it should + also work with recent versions of Chrome, Microsoft Edge, + Safari and Opera. If you're running one of these browsers, + please make sure you've updated to the latest version. + </p> + </div> + <div id="unexpected-error" class="error" style="display:none;"> + <p> + An unexpected error has occurred. Please try again later. + </p> + </div> + <div id="rusty-microphone" style="display:none;"> + <p>The current note being played is <span id="pitch-label">unknown</span></p> + <div id="pitch-indicator-bar-container"> + <div id="pitch-indicator-bar"></div> </div> - <div id="unexpected-error" class="error" style="display:none;"> - <p> - An unexpected error has occurred. Please try again later. - </p> + <div id="pitch-indicator-colours"> + <div id="flat-indicator"></div> + <div id="sharp-indicator"></div> </div> - <div id="rusty-microphone" style="display:none;"> - <p>The current note being played is <span id="pitch-label">unknown</span></p> - <div id="pitch-indicator-bar-container"> - <div id="pitch-indicator-bar"></div> - </div> - <div id="pitch-indicator-colours"> - <div id="flat-indicator"></div> - <div id="sharp-indicator"></div> - </div> - <canvas id="oscilloscope" width="320" height="300"></canvas> + <canvas id="oscilloscope" width="320" height="300"></canvas> - <p>The current framerate is <span id="frame-rate">0</span>FPS</p> - </div> + <p>The current framerate is <span id="frame-rate">0</span>FPS</p> + </div> - <script src="main.js"></script> - <script src="rusty_microphone.js"></script> - </body> + <script src="main.js"></script> + </body> </html> diff --git a/web/main.js b/web/main.js index 02e94fc..8d7fa33 100644 --- a/web/main.js +++ b/web/main.js @@ -5,7 +5,30 @@ var Module = { onRuntimeInitialized: main, onAbort: onAbort }; -checkBrowserSupport(); + +var env = { + log2f: Math.log2, + roundf: Math.round +}; +checkBrowserSupport(function() { + fetch('rusty_microphone.wasm') + .then(response => response.arrayBuffer()) + .then(bytes => WebAssembly.instantiate(bytes, { env:env })) + .then(results => { + var mod = results.instance; + Module._find_fundamental_frequency = mod.exports.find_fundamental_frequency; + Module._hz_to_pitch = mod.exports.hz_to_pitch; + Module._hz_to_cents_error = mod.exports.hz_to_cents_error; + Module._correlation = mod.exports.correlation; + + Module.memory = mod.exports.memory; + Module._malloc = mod.exports.malloc; + Module._free = mod.exports.free; + Module._free_str = mod.exports.free_str; + + Module.onRuntimeInitialized(); + }); +}); function onAbort(reason) { document.getElementById('loading').setAttribute('style', 'display:none'); @@ -24,11 +47,14 @@ function supportsUserMedia() { typeof AudioContext === "function"; } -function checkBrowserSupport() { +function checkBrowserSupport(supportedCallback) { if (!supportsWasm() || !supportsUserMedia()) { document.getElementById('loading').setAttribute('style', 'display:none'); document.getElementById('browser-support-error').removeAttribute('style'); - } + } + else { + supportedCallback(); + } } /** @@ -49,7 +75,7 @@ function jsArrayToF32ArrayPtr(jsArray, callback) { var nDataBytes = data.length * data.BYTES_PER_ELEMENT; var dataPtr = Module._malloc(nDataBytes); - var dataHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, nDataBytes); + var dataHeap = new Uint8Array(Module.memory.buffer, dataPtr, nDataBytes); dataHeap.set(new Uint8Array(data.buffer)); var result = callback(dataPtr, jsArray.length); @@ -79,12 +105,12 @@ function jsArrayToF32ArrayPtrMutateInPlace(jsArray, mutate) { var nDataBytes = data.length * data.BYTES_PER_ELEMENT; var dataPtr = Module._malloc(nDataBytes); - var dataHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, nDataBytes); + var dataHeap = new Uint8Array(Module.memory.buffer, dataPtr, nDataBytes); dataHeap.set(new Uint8Array(data.buffer)); mutate(dataPtr, jsArray.length); - var mutatedData = new Float32Array(Module.HEAPU8.buffer, dataPtr, jsArray.length); + var mutatedData = new Float32Array(Module.memory.buffer, dataPtr, jsArray.length); var result = Array.prototype.slice.call(mutatedData); Module._free(dataPtr); @@ -112,21 +138,45 @@ function findFundamentalFrequencyNoFree(data, samplingRate) { if (!dataPtr) { nDataBytes = data.length * data.BYTES_PER_ELEMENT; dataPtr = Module._malloc(nDataBytes); - dataHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, nDataBytes); + dataHeap = new Uint8Array(Module.memory.buffer, dataPtr, nDataBytes); } dataHeap.set(new Uint8Array(data.buffer, data.buffer.byteLength - nDataBytes)); return Module._find_fundamental_frequency(dataPtr, data.length, samplingRate); } +/** + * Takes a pointer to a C-style string (ends in a 0), and interprets it as UTF-8. + */ +function copyCStr(ptr) { + var iter = ptr; + + // ye olde 0 terminated string + function* collectCString() { + var memory = new Uint8Array(Module.memory.buffer); + while (memory[iter] !== 0) { + if (memory[iter] === undefined) { + throw new Error("Tried to read undef mem"); + } + yield memory[iter]; + iter += 1; + } + }; + + var buffer_as_u8 = new Uint8Array(collectCString()); + var utf8Decoder = new TextDecoder("UTF-8"); + var buffer_as_utf8 = utf8Decoder.decode(buffer_as_u8); + Module._free_str(ptr); + return buffer_as_utf8; +} + function hzToCentsError(hz) { return Module._hz_to_cents_error(hz); } -var hzToPitch = function(hz) { - var wrapped = Module.cwrap('hz_to_pitch', 'string', ['number']); - hzToPitch = wrapped; - return wrapped(hz); +function hzToPitch(hz) { + var strPtr = Module._hz_to_pitch(hz); + return copyCStr(strPtr); }; function correlation(data, samplingRate) { |