summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorJustin Worthe <justin@worthe-it.co.za>2017-12-28 23:06:19 +0200
committerJustin Worthe <justin@worthe-it.co.za>2017-12-28 23:06:19 +0200
commit452366b0abbae346b2beec761c910b72f3dd2fd6 (patch)
tree32202dcb26f4c9a76e7c4df02122d8a018e0c70c /web
parentda50c0294696c3a327db4b2a0a089d7977df488e (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.html75
-rw-r--r--web/main.js72
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) {