speaker-calibration 2.2.198 → 2.2.200

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 (122) hide show
  1. package/.eslintignore +71 -71
  2. package/.eslintrc.json +40 -40
  3. package/.github/workflows/update-phrases.yml +37 -0
  4. package/.prettierignore +69 -69
  5. package/.prettierrc +14 -14
  6. package/LICENSE +20 -20
  7. package/README.md +133 -133
  8. package/__mocks__/fileMock.js +1 -1
  9. package/__mocks__/styleMock.js +1 -1
  10. package/babel.config.js +3 -3
  11. package/coverage/clover.xml +71 -71
  12. package/coverage/coverage-final.json +224 -224
  13. package/coverage/lcov-report/PythonServerInterface.js.html +265 -265
  14. package/coverage/lcov-report/base.css +354 -354
  15. package/coverage/lcov-report/block-navigation.js +82 -82
  16. package/coverage/lcov-report/index.html +123 -123
  17. package/coverage/lcov-report/prettify.css +101 -101
  18. package/coverage/lcov-report/prettify.js +937 -937
  19. package/coverage/lcov-report/sorter.js +189 -189
  20. package/coverage/lcov-report/src/index.html +121 -121
  21. package/coverage/lcov-report/src/server/PythonServerInterface.js.html +268 -268
  22. package/coverage/lcov-report/src/server/index.html +123 -123
  23. package/coverage/lcov-report/src/tasks/audioCalibrator.js.html +499 -499
  24. package/coverage/lcov-report/src/tasks/audioRecorder.js.html +412 -412
  25. package/coverage/lcov-report/src/tasks/index.html +143 -143
  26. package/coverage/lcov-report/src/tasks/volume/index.html +123 -123
  27. package/coverage/lcov-report/src/tasks/volume/volume.js.html +409 -409
  28. package/coverage/lcov-report/src/utils.js.html +172 -172
  29. package/coverage/lcov.info +91 -91
  30. package/dist/example/NoSleep.min.js +1 -1
  31. package/dist/example/fetch-languages-sheets.js +77 -77
  32. package/dist/example/i18n.js +27366 -27366
  33. package/dist/example/index.html +47 -47
  34. package/dist/example/listener.html +79 -79
  35. package/dist/example/listener.js +149 -149
  36. package/dist/example/server.js +51 -51
  37. package/dist/example/speaker.html +145 -145
  38. package/dist/example/speakerUI.js +273 -273
  39. package/dist/example/styles.css +99 -99
  40. package/dist/main.js +1234 -1234
  41. package/dist/mlsGen.js +6814 -6814
  42. package/dist/mlsGen.wasm +0 -0
  43. package/dist/package-lock.json +1018 -1018
  44. package/dist/package.json +18 -18
  45. package/doc/AudioCalibrator.html +417 -417
  46. package/doc/AudioPeer.html +251 -251
  47. package/doc/AudioRecorder.html +195 -195
  48. package/doc/ImpulseResponse.html +215 -215
  49. package/doc/Listener.html +308 -308
  50. package/doc/MlsGenInterface.html +226 -226
  51. package/doc/MyEventEmitter.html +274 -274
  52. package/doc/PythonServerAPI.html +109 -109
  53. package/doc/Speaker.html +276 -276
  54. package/doc/Takes%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +128 -128
  55. package/doc/Takes%20the%20url%20of%20the%20current%20site%0Aand%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +138 -138
  56. package/doc/Takes%20the%20url%20of%20the%20current%20site%20and%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +137 -137
  57. package/doc/Volume.html +88 -88
  58. package/doc/audioCalibrator.js.html +179 -179
  59. package/doc/audioPeer.js.html +175 -175
  60. package/doc/audioRecorder.js.html +163 -163
  61. package/doc/creates%20a%20new%20AudioRecorder%20instance.%20%0ASets%20up%20the%20audio%20context%20and%20file%20reader..html +114 -114
  62. package/doc/fonts/OpenSans-Bold-webfont.svg +1829 -1829
  63. package/doc/fonts/OpenSans-BoldItalic-webfont.svg +1829 -1829
  64. package/doc/fonts/OpenSans-Italic-webfont.svg +1829 -1829
  65. package/doc/fonts/OpenSans-Light-webfont.svg +1830 -1830
  66. package/doc/fonts/OpenSans-LightItalic-webfont.svg +1834 -1834
  67. package/doc/fonts/OpenSans-Regular-webfont.svg +1830 -1830
  68. package/doc/global.html +308 -308
  69. package/doc/index.html +58 -58
  70. package/doc/listener.js.html +170 -170
  71. package/doc/mlsGen_mlsGenInterface.js.html +117 -117
  72. package/doc/myEventEmitter.js.html +124 -124
  73. package/doc/peer-connection_audioPeer.js.html +188 -188
  74. package/doc/peer-connection_listener.js.html +311 -311
  75. package/doc/peer-connection_speaker.js.html +381 -381
  76. package/doc/scripts/linenumber.js +25 -25
  77. package/doc/scripts/prettify/Apache-License-2.0.txt +202 -202
  78. package/doc/scripts/prettify/lang-css.js +24 -24
  79. package/doc/scripts/prettify/prettify.js +640 -640
  80. package/doc/server_PythonServerAPI.js.html +160 -160
  81. package/doc/speaker.js.html +248 -248
  82. package/doc/styles/jsdoc-default.css +371 -371
  83. package/doc/styles/prettify-jsdoc.css +111 -111
  84. package/doc/styles/prettify-tomorrow.css +163 -163
  85. package/doc/tasks_audioCalibrator.js.html +207 -207
  86. package/doc/tasks_audioRecorder.js.html +190 -190
  87. package/doc/tasks_impulse-response_impulseResponse.js.html +442 -442
  88. package/doc/tasks_impulse-response_mlsGen_mlsGenInterface.js.html +175 -175
  89. package/doc/tasks_volume_volume.js.html +185 -185
  90. package/doc/utils.js.html +105 -105
  91. package/jest.config.js +173 -173
  92. package/makefile +74 -0
  93. package/netlify.toml +26 -26
  94. package/package.json +73 -72
  95. package/src/config/firebase.js +26 -26
  96. package/src/index.html +21 -21
  97. package/src/main.js +23 -23
  98. package/src/myEventEmitter.js +83 -83
  99. package/src/peer-connection/audioPeer.js +178 -178
  100. package/src/peer-connection/listener.js +340 -340
  101. package/src/peer-connection/peerErrors.js +25 -25
  102. package/src/peer-connection/speaker.js +731 -724
  103. package/src/powerCheck.js +98 -98
  104. package/src/server/PythonServerAPI.js +869 -869
  105. package/src/tasks/audioCalibrator.js +335 -335
  106. package/src/tasks/audioRecorder.js +315 -315
  107. package/src/tasks/combination/combination.js +2969 -3033
  108. package/src/tasks/combination/mlsGen/mlsGen.cpp +98 -98
  109. package/src/tasks/combination/mlsGen/mlsGen.hpp +303 -303
  110. package/src/tasks/combination/mlsGen/mlsGenInterface.js +131 -131
  111. package/src/tasks/combination/mlsGen/mlsGenTest.cpp +180 -180
  112. package/src/tasks/impulse-response/impulseResponse.js +610 -610
  113. package/src/tasks/impulse-response/mlsGen/mlsGen.cpp +98 -98
  114. package/src/tasks/impulse-response/mlsGen/mlsGen.hpp +303 -303
  115. package/src/tasks/impulse-response/mlsGen/mlsGenInterface.js +131 -131
  116. package/src/tasks/impulse-response/mlsGen/mlsGenTest.cpp +180 -180
  117. package/src/tasks/volume/volume.cpp +2 -2
  118. package/src/tasks/volume/volume.hpp +22 -22
  119. package/src/tasks/volume/volume.js +279 -279
  120. package/src/utils.js +205 -205
  121. package/webpack.config.js +37 -37
  122. package/.gitignore +0 -81
@@ -1,51 +1,51 @@
1
- // eslint-disable-next-line import/no-extraneous-dependencies
2
- const express = require('express');
3
- const path = require('path');
4
-
5
- const app = express();
6
- const port = 3000;
7
-
8
- app.use('/', express.static(path.join(__dirname, '/../'))); // serve the distribution folder
9
-
10
- // Middleware to check we have all the params we need
11
- const checkParams = (req, res, next) => {
12
- if (!Object.prototype.hasOwnProperty.call(req.query, 'speakerPeerId')) {
13
- console.log('No peerID given.');
14
- throw new Error('No peerID given -- unable to connect to peer.');
15
- }
16
- next();
17
- };
18
-
19
- // Simple Routing
20
- app.get('/', (req, res) => {
21
- res.sendFile(path.join(__dirname, 'index.html'));
22
- });
23
-
24
- app.get('/speaker', (req, res) => {
25
- res.sendFile(path.join(__dirname, 'speaker.html'));
26
- });
27
-
28
- app.get('/listener', checkParams, (req, res) => {
29
- res.sendFile(path.join(__dirname, 'listener.html'));
30
- });
31
-
32
- app.use((err, req, res, next) => {
33
- res.status(err.status || 500);
34
- res.send({
35
- error: err.message,
36
- });
37
- });
38
-
39
- app.use((req, res) => {
40
- res.status(404);
41
- res.send({
42
- error: '404 not found',
43
- });
44
- });
45
-
46
- // if (!module.parent) {
47
- // app.listen(port);
48
- // console.log(`Express started`);
49
- // }
50
-
51
- app.listen(process.env.PORT || port);
1
+ // eslint-disable-next-line import/no-extraneous-dependencies
2
+ const express = require('express');
3
+ const path = require('path');
4
+
5
+ const app = express();
6
+ const port = 3000;
7
+
8
+ app.use('/', express.static(path.join(__dirname, '/../'))); // serve the distribution folder
9
+
10
+ // Middleware to check we have all the params we need
11
+ const checkParams = (req, res, next) => {
12
+ if (!Object.prototype.hasOwnProperty.call(req.query, 'speakerPeerId')) {
13
+ console.log('No peerID given.');
14
+ throw new Error('No peerID given -- unable to connect to peer.');
15
+ }
16
+ next();
17
+ };
18
+
19
+ // Simple Routing
20
+ app.get('/', (req, res) => {
21
+ res.sendFile(path.join(__dirname, 'index.html'));
22
+ });
23
+
24
+ app.get('/speaker', (req, res) => {
25
+ res.sendFile(path.join(__dirname, 'speaker.html'));
26
+ });
27
+
28
+ app.get('/listener', checkParams, (req, res) => {
29
+ res.sendFile(path.join(__dirname, 'listener.html'));
30
+ });
31
+
32
+ app.use((err, req, res, next) => {
33
+ res.status(err.status || 500);
34
+ res.send({
35
+ error: err.message,
36
+ });
37
+ });
38
+
39
+ app.use((req, res) => {
40
+ res.status(404);
41
+ res.send({
42
+ error: '404 not found',
43
+ });
44
+ });
45
+
46
+ // if (!module.parent) {
47
+ // app.listen(port);
48
+ // console.log(`Express started`);
49
+ // }
50
+
51
+ app.listen(process.env.PORT || port);
@@ -1,145 +1,145 @@
1
- <!DOCTYPE html>
2
- <html class="no-js" lang="">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta http-equiv="x-ua-compatible" content="ie=edge" />
6
- <title>Speaker</title>
7
- <meta name="description" content="" />
8
- <meta name="viewport" content="width=device-width, initial-scale=1" />
9
- <!--CSS-->
10
- <link href="../example/styles.css" rel="stylesheet" type="text/css" />
11
- <link
12
- href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
13
- rel="stylesheet"
14
- integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
15
- crossorigin="anonymous"
16
- />
17
- <script src="../main.js"></script>
18
- <link
19
- rel="icon"
20
- 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>"
21
- />
22
- <!--<script src="https://www.unpkg.com/sound-check"></script>-->
23
- <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"
24
- integrity="sha256-ErZ09KkZnzjpqcane4SCyyHsKAXMvID9/xwbl/Aq1pc=" crossorigin="anonymous"></script> -->
25
- <script src="../example/speakerUI.js"></script>
26
- </head>
27
-
28
- <body>
29
- <h1 id = 'speak123'></h1>
30
- <div class="container-fluid background">
31
- <div class="container bg-light popup shadow p-3 mb-5 rounded">
32
- <div class="row">
33
- <h1>Speaker Page [Admin]</h1>
34
- <p class="lead">
35
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maxime sapiente
36
- repudiandae est, magnam ex sint iure quo porro ullam debitis inventore at temporibus
37
- quod ducimus nesciunt dolorem laboriosam. Eius!
38
- </p>
39
- </div>
40
- <div class="row justify-content-around">
41
- <div class="col-lg-3 options-panel shadow p-3 mb-5 bg-white rounded">
42
- <h3>New Capture</h3>
43
- <p class="lead">Run a new calibration from end-to-end</p>
44
- <div class="row">
45
- <div class="form-check form-switch">
46
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckVolume" />
47
- <label class="form-check-label" for="flexSwitchCheckVolume">Volume</label>
48
- </div>
49
- </div>
50
- <div class="row">
51
- <div class="form-check form-switch">
52
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckIR" />
53
- <label class="form-check-label" for="flexSwitchCheckIR">Impulse Response</label>
54
- </div>
55
- </div>
56
- <div class="row">
57
- <div class="form-check form-switch">
58
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckCombo" checked />
59
- <label class="form-check-label" for="flexSwitchCheckCombo">Combination</label>
60
- </div>
61
- </div>
62
- <div class="row">
63
- <div class="form-check form-switch">
64
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckDownload" />
65
- <label class="form-check-label" for="flexSwitchCheckDownload">Download Data</label>
66
- </div>
67
- </div>
68
- <div class="row">
69
- <input type="number" id="mlsOrder" class="form-control" value="18" />
70
- <label class="form-label" for="mlsOrder">Order of MLS</label>
71
- </div>
72
- <div class="row">
73
- <input type="number" id="numCapturesInput" class="form-control" value="3" />
74
- <label class="form-label" for="numCapturesInput">Number of Captures</label>
75
- </div>
76
- <div class="row">
77
- <input type="number" id="numMLSPerCaptureInput" class="form-control" value="4" />
78
- <label class="form-label" for="numMLSPerCaptureInput"
79
- >Number of MLS burts per capture</label
80
- >
81
- </div>
82
- <div class="row">
83
- <input type="number" id="calibrateSoundHzBox" class="form-control" value="52000" />
84
- <label class="form-label" for="calibrateSoundHzBox"
85
- >calibrateSoundHz</label
86
- >
87
- </div>
88
- <div class="row">
89
- <input type="number" id="calibrateSoundSamplingDesiredBitsBox" class="form-control" value="24" />
90
- <label class="form-label" for="calibrateSoundSamplingDesiredBitsBox"
91
- >calibrateSoundSamplingDesiredBits</label
92
- >
93
- </div>
94
- <div class="row">
95
- <button id="calibrationBeginButton" type="button" class="btn btn-primary">
96
- Calibrate
97
- </button>
98
- </div>
99
- </div>
100
- <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
101
- <h3>Previous Captures</h3>
102
- <p class="lead">Upload a specific portion of the calibration to test it</p>
103
- <div class="mb-3">
104
- <label for="previous-capture-csv" class="form-label">Recorded MLS</label>
105
- <input class="form-control" type="file" id="previous-capture-csv" />
106
- </div>
107
- <div class="mb-3">
108
- <label for="iir-csv" class="form-label">Inverted Impulse Response</label>
109
- <input class="form-control" type="file" id="iir-csv" />
110
- </div>
111
- <div class="mb-3">
112
- <div class="form-check form-switch">
113
- <input class="form-check-input" type="checkbox" id="flexSwitchPlayAndRecord" />
114
- <label class="form-check-label" for="flexSwitchPlayAndRecord">Play & Record</label>
115
- </div>
116
- </div>
117
- </div>
118
- <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
119
- <h3>WAV file test</h3>
120
- <p class="lead">Upload a WAV file to play it</p>
121
- <div class="mb-3">
122
- <label for="wav-file" class="form-label">WAV File</label>
123
- <input class="form-control" type="file" id="wav-file" />
124
- </div>
125
- <audio id="sound" controls></audio>
126
- </div>
127
- </div>
128
- <div class="row justify-content-around">
129
- <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
130
- <h3>Output</h3>
131
- <div class="row justify-content-center">
132
- <div id="display" class="border"></div>
133
- <span id="updates"></span>
134
- </div>
135
- </div>
136
- </div>
137
- </div>
138
- </div>
139
- <script
140
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
141
- integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
142
- crossorigin="anonymous"
143
- ></script>
144
- </body>
145
- </html>
1
+ <!DOCTYPE html>
2
+ <html class="no-js" lang="">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="x-ua-compatible" content="ie=edge" />
6
+ <title>Speaker</title>
7
+ <meta name="description" content="" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+ <!--CSS-->
10
+ <link href="../example/styles.css" rel="stylesheet" type="text/css" />
11
+ <link
12
+ href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
13
+ rel="stylesheet"
14
+ integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
15
+ crossorigin="anonymous"
16
+ />
17
+ <script src="../main.js"></script>
18
+ <link
19
+ rel="icon"
20
+ 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>"
21
+ />
22
+ <!--<script src="https://www.unpkg.com/sound-check"></script>-->
23
+ <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"
24
+ integrity="sha256-ErZ09KkZnzjpqcane4SCyyHsKAXMvID9/xwbl/Aq1pc=" crossorigin="anonymous"></script> -->
25
+ <script src="../example/speakerUI.js"></script>
26
+ </head>
27
+
28
+ <body>
29
+ <h1 id = 'speak123'></h1>
30
+ <div class="container-fluid background">
31
+ <div class="container bg-light popup shadow p-3 mb-5 rounded">
32
+ <div class="row">
33
+ <h1>Speaker Page [Admin]</h1>
34
+ <p class="lead">
35
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maxime sapiente
36
+ repudiandae est, magnam ex sint iure quo porro ullam debitis inventore at temporibus
37
+ quod ducimus nesciunt dolorem laboriosam. Eius!
38
+ </p>
39
+ </div>
40
+ <div class="row justify-content-around">
41
+ <div class="col-lg-3 options-panel shadow p-3 mb-5 bg-white rounded">
42
+ <h3>New Capture</h3>
43
+ <p class="lead">Run a new calibration from end-to-end</p>
44
+ <div class="row">
45
+ <div class="form-check form-switch">
46
+ <input class="form-check-input" type="checkbox" id="flexSwitchCheckVolume" />
47
+ <label class="form-check-label" for="flexSwitchCheckVolume">Volume</label>
48
+ </div>
49
+ </div>
50
+ <div class="row">
51
+ <div class="form-check form-switch">
52
+ <input class="form-check-input" type="checkbox" id="flexSwitchCheckIR" />
53
+ <label class="form-check-label" for="flexSwitchCheckIR">Impulse Response</label>
54
+ </div>
55
+ </div>
56
+ <div class="row">
57
+ <div class="form-check form-switch">
58
+ <input class="form-check-input" type="checkbox" id="flexSwitchCheckCombo" checked />
59
+ <label class="form-check-label" for="flexSwitchCheckCombo">Combination</label>
60
+ </div>
61
+ </div>
62
+ <div class="row">
63
+ <div class="form-check form-switch">
64
+ <input class="form-check-input" type="checkbox" id="flexSwitchCheckDownload" />
65
+ <label class="form-check-label" for="flexSwitchCheckDownload">Download Data</label>
66
+ </div>
67
+ </div>
68
+ <div class="row">
69
+ <input type="number" id="mlsOrder" class="form-control" value="18" />
70
+ <label class="form-label" for="mlsOrder">Order of MLS</label>
71
+ </div>
72
+ <div class="row">
73
+ <input type="number" id="numCapturesInput" class="form-control" value="3" />
74
+ <label class="form-label" for="numCapturesInput">Number of Captures</label>
75
+ </div>
76
+ <div class="row">
77
+ <input type="number" id="numMLSPerCaptureInput" class="form-control" value="4" />
78
+ <label class="form-label" for="numMLSPerCaptureInput"
79
+ >Number of MLS burts per capture</label
80
+ >
81
+ </div>
82
+ <div class="row">
83
+ <input type="number" id="calibrateSoundHzBox" class="form-control" value="52000" />
84
+ <label class="form-label" for="calibrateSoundHzBox"
85
+ >calibrateSoundHz</label
86
+ >
87
+ </div>
88
+ <div class="row">
89
+ <input type="number" id="calibrateSoundSamplingDesiredBitsBox" class="form-control" value="24" />
90
+ <label class="form-label" for="calibrateSoundSamplingDesiredBitsBox"
91
+ >calibrateSoundSamplingDesiredBits</label
92
+ >
93
+ </div>
94
+ <div class="row">
95
+ <button id="calibrationBeginButton" type="button" class="btn btn-primary">
96
+ Calibrate
97
+ </button>
98
+ </div>
99
+ </div>
100
+ <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
101
+ <h3>Previous Captures</h3>
102
+ <p class="lead">Upload a specific portion of the calibration to test it</p>
103
+ <div class="mb-3">
104
+ <label for="previous-capture-csv" class="form-label">Recorded MLS</label>
105
+ <input class="form-control" type="file" id="previous-capture-csv" />
106
+ </div>
107
+ <div class="mb-3">
108
+ <label for="iir-csv" class="form-label">Inverted Impulse Response</label>
109
+ <input class="form-control" type="file" id="iir-csv" />
110
+ </div>
111
+ <div class="mb-3">
112
+ <div class="form-check form-switch">
113
+ <input class="form-check-input" type="checkbox" id="flexSwitchPlayAndRecord" />
114
+ <label class="form-check-label" for="flexSwitchPlayAndRecord">Play & Record</label>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
119
+ <h3>WAV file test</h3>
120
+ <p class="lead">Upload a WAV file to play it</p>
121
+ <div class="mb-3">
122
+ <label for="wav-file" class="form-label">WAV File</label>
123
+ <input class="form-control" type="file" id="wav-file" />
124
+ </div>
125
+ <audio id="sound" controls></audio>
126
+ </div>
127
+ </div>
128
+ <div class="row justify-content-around">
129
+ <div class="col-lg-3 shadow p-3 mb-5 bg-white rounded">
130
+ <h3>Output</h3>
131
+ <div class="row justify-content-center">
132
+ <div id="display" class="border"></div>
133
+ <span id="updates"></span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <script
140
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
141
+ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
142
+ crossorigin="anonymous"
143
+ ></script>
144
+ </body>
145
+ </html>