npm - speaker-calibration - Versions diffs - 2.2.270 → 2.2.272 - Mend

speaker-calibration 2.2.270 → 2.2.272

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/.env.example +1 -1
package/.eslintignore +71 -71
package/.eslintrc.json +40 -40
package/.gitignore +81 -81
package/.prettierignore +69 -69
package/.prettierrc +14 -14
package/LICENSE +21 -21
package/README.md +133 -133
package/__mocks__/fileMock.js +1 -1
package/__mocks__/styleMock.js +1 -1
package/babel.config.js +3 -3
package/coverage/clover.xml +71 -71
package/coverage/coverage-final.json +224 -224
package/coverage/lcov-report/PythonServerInterface.js.html +265 -265
package/coverage/lcov-report/base.css +354 -354
package/coverage/lcov-report/block-navigation.js +82 -82
package/coverage/lcov-report/index.html +123 -123
package/coverage/lcov-report/prettify.css +101 -101
package/coverage/lcov-report/prettify.js +937 -937
package/coverage/lcov-report/sorter.js +189 -189
package/coverage/lcov-report/src/index.html +121 -121
package/coverage/lcov-report/src/server/PythonServerInterface.js.html +268 -268
package/coverage/lcov-report/src/server/index.html +123 -123
package/coverage/lcov-report/src/tasks/audioCalibrator.js.html +499 -499
package/coverage/lcov-report/src/tasks/audioRecorder.js.html +412 -412
package/coverage/lcov-report/src/tasks/index.html +143 -143
package/coverage/lcov-report/src/tasks/volume/index.html +123 -123
package/coverage/lcov-report/src/tasks/volume/volume.js.html +409 -409
package/coverage/lcov-report/src/utils.js.html +172 -172
package/coverage/lcov.info +91 -91
package/dist/example/NoSleep.min.js +1 -1
package/dist/example/index.html +47 -47
package/dist/example/server.js +51 -51
package/dist/example/speaker.html +145 -145
package/dist/example/speakerUI.js +273 -273
package/dist/example/styles.css +152 -152
package/dist/main.js +3208 -2
package/dist/main.js.LICENSE.txt +118 -118
package/dist/mlsGen.js +6814 -6814
package/dist/mlsGen.wasm +0 -0
package/dist/package-lock.json +1018 -1018
package/dist/package.json +18 -18
package/dist/phonePeer.js +1242 -1
package/doc/AudioCalibrator.html +417 -417
package/doc/AudioPeer.html +251 -251
package/doc/AudioRecorder.html +195 -195
package/doc/ImpulseResponse.html +215 -215
package/doc/Listener.html +308 -308
package/doc/MlsGenInterface.html +226 -226
package/doc/MyEventEmitter.html +274 -274
package/doc/PythonServerAPI.html +109 -109
package/doc/Speaker.html +276 -276
package/doc/Takes%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +128 -128
package/doc/Takes%20the%20url%20of%20the%20current%20site%0Aand%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +138 -138
package/doc/Takes%20the%20url%20of%20the%20current%20site%20and%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +137 -137
package/doc/Volume.html +88 -88
package/doc/audioCalibrator.js.html +179 -179
package/doc/audioPeer.js.html +175 -175
package/doc/audioRecorder.js.html +163 -163
package/doc/creates%20a%20new%20AudioRecorder%20instance.%20%0ASets%20up%20the%20audio%20context%20and%20file%20reader..html +114 -114
package/doc/fonts/OpenSans-Bold-webfont.svg +1829 -1829
package/doc/fonts/OpenSans-BoldItalic-webfont.svg +1829 -1829
package/doc/fonts/OpenSans-Italic-webfont.svg +1829 -1829
package/doc/fonts/OpenSans-Light-webfont.svg +1830 -1830
package/doc/fonts/OpenSans-LightItalic-webfont.svg +1834 -1834
package/doc/fonts/OpenSans-Regular-webfont.svg +1830 -1830
package/doc/global.html +308 -308
package/doc/index.html +58 -58
package/doc/listener.js.html +170 -170
package/doc/mlsGen_mlsGenInterface.js.html +117 -117
package/doc/myEventEmitter.js.html +124 -124
package/doc/peer-connection_audioPeer.js.html +188 -188
package/doc/peer-connection_listener.js.html +311 -311
package/doc/peer-connection_speaker.js.html +381 -381
package/doc/scripts/linenumber.js +25 -25
package/doc/scripts/prettify/Apache-License-2.0.txt +202 -202
package/doc/scripts/prettify/lang-css.js +24 -24
package/doc/scripts/prettify/prettify.js +640 -640
package/doc/server_PythonServerAPI.js.html +160 -160
package/doc/speaker.js.html +248 -248
package/doc/styles/jsdoc-default.css +371 -371
package/doc/styles/prettify-jsdoc.css +111 -111
package/doc/styles/prettify-tomorrow.css +163 -163
package/doc/tasks_audioCalibrator.js.html +207 -207
package/doc/tasks_audioRecorder.js.html +190 -190
package/doc/tasks_impulse-response_impulseResponse.js.html +442 -442
package/doc/tasks_impulse-response_mlsGen_mlsGenInterface.js.html +175 -175
package/doc/tasks_volume_volume.js.html +185 -185
package/doc/utils.js.html +105 -105
package/jest.config.js +173 -173
package/netlify.toml +26 -26
package/package.json +78 -78
package/src/config/firebase.js +27 -27
package/src/index.html +21 -21
package/src/listener-app/PhonePeer.js +504 -504
package/src/main.js +22 -22
package/src/myEventEmitter.js +83 -83
package/src/peer-connection/audioPeer.js +100 -100
package/src/peer-connection/listener.js +298 -298
package/src/peer-connection/peerErrors.js +25 -25
package/src/peer-connection/speaker.js +996 -996
package/src/powerCheck.js +110 -110
package/src/server/PythonServerAPI.js +1001 -1001
package/src/tasks/audioCalibrator.js +451 -451
package/src/tasks/audioRecorder.js +351 -351
package/src/tasks/combination/combination.js +3988 -3988
package/src/tasks/combination/mlsGen/mlsGen.cpp +98 -98
package/src/tasks/combination/mlsGen/mlsGen.hpp +303 -303
package/src/tasks/combination/mlsGen/mlsGenInterface.js +131 -131
package/src/tasks/combination/mlsGen/mlsGenTest.cpp +180 -180
package/src/tasks/impulse-response/impulseResponse.js +610 -610
package/src/tasks/impulse-response/mlsGen/mlsGen.cpp +98 -98
package/src/tasks/impulse-response/mlsGen/mlsGen.hpp +303 -303
package/src/tasks/impulse-response/mlsGen/mlsGenInterface.js +131 -131
package/src/tasks/impulse-response/mlsGen/mlsGenTest.cpp +180 -180
package/src/tasks/volume/volume.cpp +2 -2
package/src/tasks/volume/volume.hpp +22 -22
package/src/tasks/volume/volume.js +279 -279
package/src/utils.js +220 -220
package/webpack.config.js +72 -72

package/dist/example/index.html CHANGED Viewed

@@ -1,47 +1,47 @@
-<!DOCTYPE html>
-<html class="no-js" lang="">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Sound Check</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <!--CSS-->
-    <link href="../example/styles.css" rel="stylesheet" typ="text/css" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-      crossorigin="anonymous"
-    />
-  </head>
-  <body>
-    <!--[if lt IE 8]>
-      <p class="browserupgrade">
-        You are using an <strong>outdated</strong> browser. Please
-        <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
-      </p>
-    <![endif]-->
-    <div class="container">
-      <h1>Check out /speaker</h1>
-      <p class="lead">
-        Go to <a id="speakerLink">/speaker</a> to simulate calibrating as part of an experiment
-        running on a participant's computer. The page will instruct the user on how to use their
-        mobile device as a calibration microphone.
-      </p>
-    </div>
-    <script type="text/javascript">
-      const speakerLink = '/speaker.html';
-      const baseURL = location.href.substring(0, location.href.lastIndexOf('/'));
-      document.getElementById('speakerLink').setAttribute('href', baseURL + speakerLink);
-    </script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-      crossorigin="anonymous"
-    ></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Sound Check</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!--CSS-->
+    <link href="../example/styles.css" rel="stylesheet" typ="text/css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
+      </p>
+    <![endif]-->
+    <div class="container">
+      <h1>Check out /speaker</h1>
+      <p class="lead">
+        Go to <a id="speakerLink">/speaker</a> to simulate calibrating as part of an experiment
+        running on a participant's computer. The page will instruct the user on how to use their
+        mobile device as a calibration microphone.
+      </p>
+    </div>
+    <script type="text/javascript">
+      const speakerLink = '/speaker.html';
+      const baseURL = location.href.substring(0, location.href.lastIndexOf('/'));
+      document.getElementById('speakerLink').setAttribute('href', baseURL + speakerLink);
+    </script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>

package/dist/example/server.js CHANGED Viewed

@@ -1,51 +1,51 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const express = require('express');
-const path = require('path');
-const app = express();
-const port = 3000;
-app.use('/', express.static(path.join(__dirname, '/../'))); // serve the distribution folder
-// Middleware to check we have all the params we need
-const checkParams = (req, res, next) => {
-  if (!Object.prototype.hasOwnProperty.call(req.query, 'speakerPeerId')) {
-    console.log('No peerID given.');
-    throw new Error('No peerID given -- unable to connect to peer.');
-  }
-  next();
-};
-// Simple Routing
-app.get('/', (req, res) => {
-  res.sendFile(path.join(__dirname, 'index.html'));
-});
-app.get('/speaker', (req, res) => {
-  res.sendFile(path.join(__dirname, 'speaker.html'));
-});
-app.get('/listener', checkParams, (req, res) => {
-  res.sendFile(path.join(__dirname, 'listener.html'));
-});
-app.use((err, req, res, next) => {
-  res.status(err.status || 500);
-  res.send({
-    error: err.message,
-  });
-});
-app.use((req, res) => {
-  res.status(404);
-  res.send({
-    error: '404 not found',
-  });
-});
-// if (!module.parent) {
-//   app.listen(port);
-//   console.log(`Express started`);
-// }
-app.listen(process.env.PORT || port);
+// eslint-disable-next-line import/no-extraneous-dependencies
+const express = require('express');
+const path = require('path');
+const app = express();
+const port = 3000;
+app.use('/', express.static(path.join(__dirname, '/../'))); // serve the distribution folder
+// Middleware to check we have all the params we need
+const checkParams = (req, res, next) => {
+  if (!Object.prototype.hasOwnProperty.call(req.query, 'speakerPeerId')) {
+    console.log('No peerID given.');
+    throw new Error('No peerID given -- unable to connect to peer.');
+  }
+  next();
+};
+// Simple Routing
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
+app.get('/speaker', (req, res) => {
+  res.sendFile(path.join(__dirname, 'speaker.html'));
+});
+app.get('/listener', checkParams, (req, res) => {
+  res.sendFile(path.join(__dirname, 'listener.html'));
+});
+app.use((err, req, res, next) => {
+  res.status(err.status || 500);
+  res.send({
+    error: err.message,
+  });
+});
+app.use((req, res) => {
+  res.status(404);
+  res.send({
+    error: '404 not found',
+  });
+});
+// if (!module.parent) {
+//   app.listen(port);
+//   console.log(`Express started`);
+// }
+app.listen(process.env.PORT || port);

package/dist/example/speaker.html CHANGED Viewed

@@ -1,145 +1,145 @@
-<!DOCTYPE html>
-<html class="no-js" lang="">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Speaker</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--CSS-->
-    <link href="../example/styles.css" rel="stylesheet" type="text/css" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-      crossorigin="anonymous"
-    />
-    <script src="../main.js"></script>
-    <link
-      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔈</text></svg>"
-    />
-    <!--<script src="https://www.unpkg.com/sound-check"></script>-->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"
-    integrity="sha256-ErZ09KkZnzjpqcane4SCyyHsKAXMvID9/xwbl/Aq1pc=" crossorigin="anonymous"></script> -->
-    <script src="../example/speakerUI.js"></script>
-  </head>
-  <body>
-    <h1 id = 'speak123'></h1>
-    <div class="container-fluid background">
-      <div class="container bg-light popup shadow p-3 mb-5 rounded">
-        <div class="row">
-          <h1>Speaker Page [Admin]</h1>
-          <p class="lead">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maxime sapiente
-            repudiandae est, magnam ex sint iure quo porro ullam debitis inventore at temporibus
-            quod ducimus nesciunt dolorem laboriosam. Eius!
-          </p>
-        </div>
-        <div class="row justify-content-around">
-          <div class="col-lg-3 options-panel shadow p-3 mb-5 bg-white rounded">
-            <h3>New Capture</h3>
-            <p class="lead">Run a new calibration from end-to-end</p>
-            <div class="row">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="flexSwitchCheckVolume" />
-                <label class="form-check-label" for="flexSwitchCheckVolume">Volume</label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="flexSwitchCheckIR" />
-                <label class="form-check-label" for="flexSwitchCheckIR">Impulse Response</label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="flexSwitchCheckCombo" checked />
-                <label class="form-check-label" for="flexSwitchCheckCombo">Combination</label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDownload" />
-                <label class="form-check-label" for="flexSwitchCheckDownload">Download Data</label>
-              </div>
-            </div>
-            <div class="row">
-              <input type="number" id="mlsOrder" class="form-control" value="18" />
-              <label class="form-label" for="mlsOrder">Order of MLS</label>
-            </div>
-            <div class="row">
-              <input type="number" id="numCapturesInput" class="form-control" value="3" />
-              <label class="form-label" for="numCapturesInput">Number of Captures</label>
-            </div>
-            <div class="row">
-              <input type="number" id="numMLSPerCaptureInput" class="form-control" value="4" />
-              <label class="form-label" for="numMLSPerCaptureInput"
-                >Number of MLS burts per capture</label
-              >
-            </div>
-            <div class="row">
-              <input type="number" id="calibrateSoundHzBox" class="form-control" value="52000" />
-              <label class="form-label" for="calibrateSoundHzBox"
-                >calibrateSoundHz</label
-              >
-            </div>
-            <div class="row">
-              <input type="number" id="calibrateSoundSamplingDesiredBitsBox" class="form-control" value="24" />
-              <label class="form-label" for="calibrateSoundSamplingDesiredBitsBox"
-                >calibrateSoundSamplingDesiredBits</label
-              >
-            </div>
-            <div class="row">
-              <button id="calibrationBeginButton" type="button" class="btn btn-primary">
-                Calibrate
-              </button>
-            </div>
-          </div>
-          <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
-            <h3>Previous Captures</h3>
-            <p class="lead">Upload a specific portion of the calibration to test it</p>
-            <div class="mb-3">
-              <label for="previous-capture-csv" class="form-label">Recorded MLS</label>
-              <input class="form-control" type="file" id="previous-capture-csv" />
-            </div>
-            <div class="mb-3">
-              <label for="iir-csv" class="form-label">Inverted Impulse Response</label>
-              <input class="form-control" type="file" id="iir-csv" />
-            </div>
-            <div class="mb-3">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="flexSwitchPlayAndRecord" />
-                <label class="form-check-label" for="flexSwitchPlayAndRecord">Play & Record</label>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
-            <h3>WAV file test</h3>
-            <p class="lead">Upload a WAV file to play it</p>
-            <div class="mb-3">
-              <label for="wav-file" class="form-label">WAV File</label>
-              <input class="form-control" type="file" id="wav-file" />
-            </div>
-            <audio id="sound" controls></audio>
-          </div>
-        </div>
-        <div class="row justify-content-around">
-          <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
-            <h3>Output</h3>
-            <div class="row justify-content-center">
-              <div id="display" class="border"></div>
-              <span id="updates"></span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-      crossorigin="anonymous"
-    ></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Speaker</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--CSS-->
+    <link href="../example/styles.css" rel="stylesheet" type="text/css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <script src="../main.js"></script>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔈</text></svg>"
+    />
+    <!--<script src="https://www.unpkg.com/sound-check"></script>-->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"
+    integrity="sha256-ErZ09KkZnzjpqcane4SCyyHsKAXMvID9/xwbl/Aq1pc=" crossorigin="anonymous"></script> -->
+    <script src="../example/speakerUI.js"></script>
+  </head>
+  <body>
+    <h1 id = 'speak123'></h1>
+    <div class="container-fluid background">
+      <div class="container bg-light popup shadow p-3 mb-5 rounded">
+        <div class="row">
+          <h1>Speaker Page [Admin]</h1>
+          <p class="lead">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maxime sapiente
+            repudiandae est, magnam ex sint iure quo porro ullam debitis inventore at temporibus
+            quod ducimus nesciunt dolorem laboriosam. Eius!
+          </p>
+        </div>
+        <div class="row justify-content-around">
+          <div class="col-lg-3 options-panel shadow p-3 mb-5 bg-white rounded">
+            <h3>New Capture</h3>
+            <p class="lead">Run a new calibration from end-to-end</p>
+            <div class="row">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="flexSwitchCheckVolume" />
+                <label class="form-check-label" for="flexSwitchCheckVolume">Volume</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="flexSwitchCheckIR" />
+                <label class="form-check-label" for="flexSwitchCheckIR">Impulse Response</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="flexSwitchCheckCombo" checked />
+                <label class="form-check-label" for="flexSwitchCheckCombo">Combination</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDownload" />
+                <label class="form-check-label" for="flexSwitchCheckDownload">Download Data</label>
+              </div>
+            </div>
+            <div class="row">
+              <input type="number" id="mlsOrder" class="form-control" value="18" />
+              <label class="form-label" for="mlsOrder">Order of MLS</label>
+            </div>
+            <div class="row">
+              <input type="number" id="numCapturesInput" class="form-control" value="3" />
+              <label class="form-label" for="numCapturesInput">Number of Captures</label>
+            </div>
+            <div class="row">
+              <input type="number" id="numMLSPerCaptureInput" class="form-control" value="4" />
+              <label class="form-label" for="numMLSPerCaptureInput"
+                >Number of MLS burts per capture</label
+              >
+            </div>
+            <div class="row">
+              <input type="number" id="calibrateSoundHzBox" class="form-control" value="52000" />
+              <label class="form-label" for="calibrateSoundHzBox"
+                >calibrateSoundHz</label
+              >
+            </div>
+            <div class="row">
+              <input type="number" id="calibrateSoundSamplingDesiredBitsBox" class="form-control" value="24" />
+              <label class="form-label" for="calibrateSoundSamplingDesiredBitsBox"
+                >calibrateSoundSamplingDesiredBits</label
+              >
+            </div>
+            <div class="row">
+              <button id="calibrationBeginButton" type="button" class="btn btn-primary">
+                Calibrate
+              </button>
+            </div>
+          </div>
+          <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
+            <h3>Previous Captures</h3>
+            <p class="lead">Upload a specific portion of the calibration to test it</p>
+            <div class="mb-3">
+              <label for="previous-capture-csv" class="form-label">Recorded MLS</label>
+              <input class="form-control" type="file" id="previous-capture-csv" />
+            </div>
+            <div class="mb-3">
+              <label for="iir-csv" class="form-label">Inverted Impulse Response</label>
+              <input class="form-control" type="file" id="iir-csv" />
+            </div>
+            <div class="mb-3">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="flexSwitchPlayAndRecord" />
+                <label class="form-check-label" for="flexSwitchPlayAndRecord">Play & Record</label>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
+            <h3>WAV file test</h3>
+            <p class="lead">Upload a WAV file to play it</p>
+            <div class="mb-3">
+              <label for="wav-file" class="form-label">WAV File</label>
+              <input class="form-control" type="file" id="wav-file" />
+            </div>
+            <audio id="sound" controls></audio>
+          </div>
+        </div>
+        <div class="row justify-content-around">
+          <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
+            <h3>Output</h3>
+            <div class="row justify-content-center">
+              <div id="display" class="border"></div>
+              <span id="updates"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>