Mic sound visualisation

Author: PeeachPie

.dockerignore

@@ -1,5 +1,6 @@
 .git
 venv
+.venv
 .idea
 .ssl
 __pycache__

.gitignore

@@ -1,4 +1,5 @@
 venv
+.venv
 .idea
 ssl
 __pycache__

app/static/css/training.css

@@ -20,7 +20,7 @@
 }
 .tutorButtons{
     width: 80px;
-    height 30px;
+    height: 30px;
 }
 .model {
     display: none;
@@ -37,7 +37,7 @@
     background-color: #f2dede;
     margin: 15% auto;
     padding: 20px;
-    border: 1px solid #ebccd;
+    border: 1px solid #ebccd0;
     width: 50%;
     text-align: center;
     color: #a94442;
@@ -47,11 +47,13 @@
     display: flex;
     font-size: 18px;
     margin-top: 1%;
+    align-items: center;
+    gap: 30px;
 }
 .pulse{
     position: relative;
     text-align: center;
-    left: 25px;
+    /* left: 25px; */
     border-radius: 50%;
     background: #ff0000;
     width: 20px;

app/static/js/recording.js

@@ -56,9 +56,13 @@ function startRecording() {
                 time++;
             }, 1000);
         }, 3000);
+
         let audioContext = new window.AudioContext();
         gumStream = stream;
         input = audioContext.createMediaStreamSource(stream);
+
+        startMicVisualizer(stream, audioContext);
+
         recorder = new WebAudioRecorder(input, {
             workerDir: "/static/js/libraries/WebAudioRecorder.js/",
             encoding: "mp3",
@@ -126,3 +130,91 @@ $(document).ready(function () {
         return "Do you really want to close?";
     };
 });
+
+function startMicVisualizer (stream, audioContext) {
+    const canvasElement = document.querySelector("#mic-visualizer-canvas");
+    const canvasVisializerCxt = canvasElement.getContext("2d");
+    const volumeLevelElement = document.querySelector("#volume-level-box");
+
+    const audioStream = audioContext.createMediaStreamSource( stream );
+    const analyser = audioContext.createAnalyser();
+    const fftSize = 128;
+
+    analyser.fftSize = fftSize;
+    audioStream.connect(analyser);
+
+    const bufferLength = analyser.frequencyBinCount;
+
+    let frequencyArray = new Uint8Array(bufferLength);
+
+    const setUpCanvas = function () {
+        canvasVisializerCxt.fillStyle = "rgb(255 255 255)";
+        canvasVisializerCxt.fillRect(0, 0, canvasElement.width, canvasElement.height);
+      
+        canvasVisializerCxt.lineWidth = 1.5;
+        canvasVisializerCxt.strokeStyle = "rgb(0 0 0)";
+      
+        canvasVisializerCxt.beginPath();
+    }
+
+    const doDraw = function () {
+        requestAnimationFrame(doDraw);
+
+        setUpCanvas();
+
+        const sliceWidth = (canvasElement.width * 1.0) / (bufferLength + 1);
+
+        canvasVisializerCxt.moveTo(0, canvasElement.height / 2);
+
+        let x = 0 + sliceWidth;
+
+        analyser.getByteFrequencyData(frequencyArray);
+
+        let direction = 1;
+
+        for (let i = 0; i < bufferLength; i++) {
+            const v = frequencyArray[i] / (canvasElement.height * 2);
+            const y = (v * canvasElement.height) / 2;
+        
+            canvasVisializerCxt.lineTo(x, canvasElement.height / 2 + y * direction);
+        
+            x += sliceWidth;
+            direction *= -1;
+        }
+
+        canvasVisializerCxt.lineTo(canvasElement.width, canvasElement.height / 2);
+        canvasVisializerCxt.stroke();
+    }
+    
+    const showVolume = function () {
+        setTimeout(showVolume, 500);
+
+        analyser.getByteFrequencyData(frequencyArray);
+        let total = 0
+
+        for(let i = 0; i < bufferLength; i++) {
+            let x = frequencyArray[i];
+            total += x * x;
+        }
+
+        const rms = Math.sqrt(total / bufferLength);
+        let db = 20 * ( Math.log(rms) / Math.log(10) );
+
+        db = Math.max(db, 0);
+
+        let status = "";
+
+        // добавить эти поля в локаль
+        if (db == 0) {
+            status = "Ваш микрофон не работает";
+        }
+        else if (db <= 35) { // или другое значение/проверка (например только по средним частотам)
+            status = "Пожалуйста, говорите громче"; // проверить, что пауза достаточно продолжительна
+        }
+
+        volumeLevelElement.innerHTML = `db: ${db.toFixed(1)} ${status}`;
+    }
+
+    doDraw();
+    showVolume();
+}

app/templates/training.html

@@ -19,7 +19,8 @@
 <div id="record-contain" style="display: none;">
   Идёт запись
   <div class="pulse"></div>
-
+  <canvas id="mic-visualizer-canvas" width="128" height="96"></canvas>
+  <span id="volume-level-box"></span>
 </div>
 
 <div id="controls">

app_conf/no_docker.ini

@@ -0,0 +1,32 @@
+[constants]
+presentation_file_max_size_in_megabytes=16
+app_secret_key=secret_key_placeholder
+lti_consumer_key=secretconsumerkey
+lti_consumer_secret=supersecretconsumersecret
+version_file=VERSION.json
+backup_path=../dump/database-dump/
+
+[mongodb]
+url=mongodb://localhost:27017/
+database_name=database
+
+[vosk]
+url=ws://localhost:2700
+
+[whisper]
+url=http://whisper:9000/asr
+
+[user_agent_platform]
+windows=True
+linux=True
+
+[user_agent_browser]
+chrome=89
+firefox=87
+
+[locale]
+language=ru
+
+[bugreport]
+form_link=https://docs.google.com/forms/d/e/1FAIpQLScUudcDPUwtTvmN_sbeljicHYhubK7pPQIM1o8Wh54HstT2BQ/viewform?usp=sf_link
+report_mail[email protected]