feat: listen microphone and show dB level

1 files changed, 29 insertions, 0 deletions

diff --git a/scripts/microphone.js b/scripts/microphone.js
new file mode 100644
index 0000000..7e8de6a
--- /dev/null
+++ b/scripts/microphone.js
@@ -0,0 +1,29 @@
+if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    const volumeHtml = document.getElementById("volume");
+
+    navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(stream => {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const source = audioContext.createMediaStreamSource(stream);
+
+            audioContext.audioWorklet.addModule("scripts/volume_processor.js")
+                .then(() => {
+                    const volumeNode = new AudioWorkletNode(audioContext, "volume_processor");
+                    source.connect(volumeNode).connect(audioContext.destination);
+
+                    volumeNode.port.onmessage = (event) => {
+                        const volume = event.data;
+                        const db = 20 * Math.log10(volume);
+
+                        volumeHtml.innerHTML = `${db.toFixed(2)} dB`;
+                    };
+                }).catch((err) => {
+                    console.log(err);
+                })
+        })
+        .catch(err => {
+            console.error('The following getUserMedia error occurred: ' + err);
+        });
+} else {
+    console.warn('getUserMedia not supported on your browser!');
+}
\ No newline at end of file