ok

components/VueMeter.vue

@@ -0,0 +1,95 @@
+<template>
+  <canvas
+      :width="width"
+      :height="height"
+      v-draw-meter="{ amp: dBVal, peak: dBPeakVal, clipSize: clipSize, showPeaks: showPeaks }"
+  />
+</template>
+<script>
+export default {
+
+	   props: {
+	     val: {
+	       type: Number,
+	       default: 0
+	     },
+	     peakVal: {
+	       type: Number,
+	       default: 0
+	     },
+	     refreshRate: {
+	       type: Number,
+		 default: 0.1
+	     },
+	     clipSize: {
+	       type: Number,
+	       default: 10
+	     },
+	     width: {
+	       type: Number,
+		 default: 20
+	     },
+	     height: {
+	       type: Number,
+		 default: 128
+	     },
+	     showPeaks: {
+	       type: Boolean,
+	       default: false
+	     }
+	   },
+	   computed: {
+	     dBVal: function () {
+	       return 40 * Math.log10(this.val)+20;
+	     },
+	     dBPeakVal: function () {
+	       return 40 * Math.log10(this.peakVal)+20;
+	     }
+	   },
+	   watch: {
+	     val: function (newVal, oldVal) {
+	       if (this.showPeaks) {
+	         var smoothingFactor = 50;
+	         if (newVal > this.peakVal) {
+	           this.peakVal = newVal;
+	         } else {
+	           this.peakVal =
+	             newVal * (1 / smoothingFactor) +
+	             this.peakVal * ((smoothingFactor - 1) / smoothingFactor);
+	         }
+	       }
+	     }
+	   },
+	   directives: {
+	     drawMeter: function (canvas, binding) {
+	       var clipSize = binding.value.clipSize;
+	       var showPeaks = binding.value.showPeaks;
+	       var amp = binding.value.amp / 76 + 1;
+	       var peak = binding.value.peak / 76 + 1;
+	       var w = canvas.width;
+	       var h = canvas.height;
+	       var hInRange = h - clipSize;
+	       var ctx = canvas.getContext("2d");
+	       var gradient = ctx.createLinearGradient(0, 0, 0, h);
+	       gradient.addColorStop(0, "red");
+	       gradient.addColorStop(clipSize / h, "orange");
+	       gradient.addColorStop(clipSize / h, "greenyellow");
+	       gradient.addColorStop(1, "#009374");
+	       ctx.clearRect(0, 0, w, h);
+	       ctx.fillStyle = gradient;
+	       ctx.fillRect(0, h - hInRange * amp, w, hInRange * amp);
+	       if (showPeaks) {
+	         if (peak >= 1) {
+	           ctx.fillStyle = "red";
+	         } else {
+	           ctx.fillStyle = "greenyellow";
+	         }
+	         ctx.fillRect(0, Math.round(h - hInRange * peak), w, 1);
+	       }
+	       ctx.fillStyle = "white";
+	       ctx.fillRect(0, clipSize, w, 1);
+	     }
+	   }
+
+}
+</script>

layouts/default.vue

@@ -1,14 +1,45 @@
 <template>
   <div>
-<div class="">
+<div class="text-center">
+
+  <client-only>
+    <Vue3Lottie
+        v-if="show"
+        style="position: fixed;background-color: white;z-index: 99999"
+        :animation-data="anim"
+        :loop="true"
+        width="100%"
+        height="100%"
+    />
+  </client-only>
+
   <slot/>
-<!--  <NuxtPage />-->
+
+
 </div>
   </div>
 
 </template>
 
+<script>
+import * as animationData from "~/assets/animation.json";
+import 'vue3-lottie/dist/style.css'
+export default {
+  data() {
+    return {
+      show:true,
+      anim: animationData.default, // for saving the reference to the animation
+      lottieOptions: { animationData: animationData.default }
+    };
+  },
+
+  mounted() {
+    this.show=false;
+  }
+}
+</script>
 <script setup>
+
 useHead({
   title:'MindBoost',
   link:[

package-lock.json

@@ -12,6 +12,7 @@
         "vue": "^3.2.26",
         "vue-audio-visual": "^3.0.3",
         "vue-lottie": "^0.2.1",
+        "vue3-circle-progress": "^1.0.7",
         "vue3-lottie": "^2.4.0"
       },
       "devDependencies": {
@@ -3462,6 +3463,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.0.tgz",
+      "integrity": "sha512-wY6cKosevs430KRkHUIsvepDXHGjlXOZO3hYXNyqpD6JvB0X28aXyv0t1Y1vZMwE7SoKmtfa6IASHCPN52FwBQ==",
+      "hasInstallScript": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -10093,6 +10105,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-circle-progress": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vue3-circle-progress/-/vue3-circle-progress-1.0.7.tgz",
+      "integrity": "sha512-Z916xKQhuEcaOvwIfCFUX9r/gPUNd40G2aJbROcRtotm5FE4dZPP4S4iDEISexE9XMF813swkdc5VzCdFxfE8g==",
+      "peerDependencies": {
+        "core-js": "^3.9.0",
+        "vue": "^3.0.5"
+      }
+    },
     "node_modules/vue3-lottie": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.4.0.tgz",
@@ -13038,6 +13059,12 @@
         "keygrip": "~1.1.0"
       }
     },
+    "core-js": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.0.tgz",
+      "integrity": "sha512-wY6cKosevs430KRkHUIsvepDXHGjlXOZO3hYXNyqpD6JvB0X28aXyv0t1Y1vZMwE7SoKmtfa6IASHCPN52FwBQ==",
+      "peer": true
+    },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -17781,6 +17808,12 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vue3-circle-progress": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vue3-circle-progress/-/vue3-circle-progress-1.0.7.tgz",
+      "integrity": "sha512-Z916xKQhuEcaOvwIfCFUX9r/gPUNd40G2aJbROcRtotm5FE4dZPP4S4iDEISexE9XMF813swkdc5VzCdFxfE8g==",
+      "requires": {}
+    },
     "vue3-lottie": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.4.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "vue": "^3.2.26",
     "vue-audio-visual": "^3.0.3",
     "vue-lottie": "^0.2.1",
+    "vue3-circle-progress": "^1.0.7",
     "vue3-lottie": "^2.4.0"
   }
 }

pages/band.vue

@@ -1,14 +1,102 @@
 <template>
+<div>
+  <client-only>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
           <div class="home">
 
-    <button @click="StartButtonPressed">Start</button>
+            <button class="btn btn-success" @click="StartButtonPressed">Start</button>
+            <VueMeter
+                :val="RecentLevelValue"
+            />
+
+            <div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
+
+            <table class="table table-bordered">
+              <thead>
+              <tr>
+                <th>Band Frequency</th>
+                <th>Percentile</th>
+                <th>Result ABC</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                <td>Global</td>
+                <td>{{Percentile_Global.percentile}}</td>
+                <td>{{Percentile_Global.result}}</td>
+              </tr>
+              <tr>
+                <td>Bandpass 65</td>
+                <td>{{Percentile_65.percentile}}</td>
+                <td>{{Percentile_65.result}}</td>
+              </tr>
+
+              <tr>
+                <td>Bandpass 125</td>
+                <td>{{Percentile_125.percentile}}</td>
+                <td>{{Percentile_125.result}}</td>
+              </tr>
+
+              <tr>
+                <td>Bandpass 250</td>
+                <td>{{Percentile_250.percentile}}</td>
+                <td>{{Percentile_250.result}}</td>
+              </tr>
+
+              <tr>
+                <td>Bandpass 500</td>
+                <td>{{Percentile_500.percentile}}</td>
+                <td>{{Percentile_500.result}}</td>
+              </tr>
+
+              <tr>
+                <td>Bandpass 1000</td>
+                <td>{{Percentile_1000.percentile}}</td>
+                <td>{{Percentile_1000.result}}</td>
+              </tr>
+              <tr>
+                <td>Bandpass 2000</td>
+                <td>{{Percentile_2000.percentile}}</td>
+                <td>{{Percentile_2000.result}}</td>
+              </tr>
+
+              <tr>
+                <td>Bandpass 4000</td>
+                <td>{{Percentile_4000.percentile}}</td>
+                <td>{{Percentile_4000.result}}</td>
+              </tr>
+              <tr>
+                <td>Bandpass 8000</td>
+                <td>{{Percentile_8000.percentile}}</td>
+                <td>{{Percentile_8000.result}}</td>
+              </tr>
+
+              <tr>
+                <td>Bandpass 16000</td>
+                <td>{{Percentile_16000.percentile}}</td>
+                <td>{{Percentile_16000.result}}</td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </client-only>
 </div>
 </template>
 
 <script>
-
+import "vue3-circle-progress/dist/circle-progress.css";
+import CircleProgress from "vue3-circle-progress";
 export default {
   name: 'HomeView',
+  components:{
+    CircleProgress
+  },
   data(){
     return{
       // This object holds all state of the app
@@ -51,7 +139,7 @@ export default {
       date:{},
       time:{},
 
-      Timeframe: 250,
+      Timeframe: 5000,
       UpperPercentile: 0.9,
       LowerPercentile: 0.1,
       LimitA: 2.5,
@@ -63,26 +151,97 @@ export default {
       Gain:{},
       HPF:{},
       LPF:{},
+      BandPass_65:{},
+      BandPass_125:{},
+      BandPass_250:{},
+      BandPass_500:{},
+      BandPass_1000:{},
+      BandPass_2000:{},
+      BandPass_4000:{},
+      BandPass_8000:{},
+      BandPass_6000:{},
       analyser:{},
       LevelAnalyser:{},
       LevelBuffer:{},
-
+      AnalyserbandPass65:{},
+      AnalyserbandPass125:{},
+      AnalyserbandPass250:{},
+      AnalyserbandPass500:{},
+      AnalyserbandPass1000:{},
+      AnalyserbandPass2000:{},
+      AnalyserbandPass4000:{},
+      AnalyserbandPass8000:{},
+      AnalyserbandPass16000:{},
+      bandPass65Buffer:[],
+      bandPass125Buffer:[],
+      bandPass250Buffer:[],
+      bandPass500Buffer:[],
+      bandPass1000Buffer:[],
+      bandPass2000Buffer:[],
+      bandPass4000Buffer:[],
+      bandPass8000Buffer:[],
+      bandPass16000Buffer:[],
       AnimationID:{},
       id:{},
 
       bufferLength:{},
       dataArray:{},
       RecentRMS: 0,
+      RecentRMS65: 0,
+      RecentRMS125: 0,
+      RecentRMS250: 0,
+      RecentRMS500: 0,
+      RecentRMS1000: 0,
+      RecentRMS2000: 0,
+      RecentRMS4000: 0,
+      RecentRMS8000: 0,
+      RecentRMS16000: 0,
       ByteToDecimal: 0,
       RecentLevelValue: 0,
+      RecentLevelValue65: 0,
+      RecentLevelValue125: 0,
+      RecentLevelValue250: 0,
+      RecentLevelValue500: 0,
+      RecentLevelValue1000: 0,
+      RecentLevelValue2000: 0,
+      RecentLevelValue4000: 0,
+      RecentLevelValue8000: 0,
+      RecentLevelValue16000: 0,
 
       ArrayCounter:0,
       LevelValues:[],
+      LevelValues65:[],
+      LevelValues125:[],
+      LevelValues250:[],
+      LevelValues500:[],
+      LevelValues1000:[],
+      LevelValues2000:[],
+      LevelValues4000:[],
+      LevelValues8000:[],
+      LevelValues16000:[],
       CummulatedLevelValues:0,
+      CummulatedLevelValues65:0,
+      CummulatedLevelValues125:0,
+      CummulatedLevelValues250:0,
+      CummulatedLevelValues5000:0,
+      CummulatedLevelValues1000:0,
+      CummulatedLevelValues2000:0,
+      CummulatedLevelValues4000:0,
       SortedArray:[],
+      SortedArray65:[],
       IndexMax:{},
       IndexMin:{},
       PercentileValue:{},
+      Percentile_65:{},
+      Percentile_125:{},
+      Percentile_250:{},
+      Percentile_500:{},
+      Percentile_1000:{},
+      Percentile_2000:{},
+      Percentile_4000:{},
+      Percentile_8000:{},
+      Percentile_16000:{},
+      Percentile_Global:{},
 
       height:0,
       value:1,
@@ -93,6 +252,14 @@ export default {
 
       MicError:0,
       bandPass1:{},
+      bandPass125:{},
+      bandPass250:{},
+      bandPass500:{},
+      bandPass1000:{},
+      bandPass2000:{},
+      bandPass4000:{},
+      bandPass8000:{},
+      bandPass16000:{},
 
 
     }
@@ -132,6 +299,15 @@ export default {
     ResetLevelValues() {
       this.ArrayCounter = 0;
       this.LevelValues = [];
+      this.LevelValues65=[];
+      this.LevelValues125=[];
+      this.LevelValues250=[];
+      this.LevelValues500=[];
+      this.LevelValues1000=[];
+      this.LevelValues2000=[];
+      this.LevelValues4000=[];
+      this.LevelValues8000=[];
+      this.LevelValues16000=[];
     },
 
 
@@ -146,10 +322,11 @@ export default {
     },
 
 
-    Percentile(InputArray) {
+    Percentile(InputArray,band=0) {
 
       this.SortedArray = InputArray.sort(this.numSort);
       this.RMStoDBFS(this.SortedArray);
+
       //console.log('Sortiertes Array DBFS: ' + SortedArray);
 
       this.IndexMax = Math.round(this.SortedArray.length * this.UpperPercentile);
@@ -172,7 +349,8 @@ export default {
       //console.log('seite = ' + this.seite);
 
       this.NeueSeite = 4;
-      this.ResetLevelValues();
+
+      return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
     },
 
 
@@ -183,25 +361,39 @@ export default {
       this.height = 0;
       this.secondsDown = 25;
       this.CummulatedLevelValues = 0;
+      this.CummulatedLevelValues65 = 0;
     },
 
     frame() {
-      if (this.height == 100) {
+      // if (this.height == 100) {
-        this.stopmeasurement();
+        // this.stopmeasurement();
-        this.Percentile(this.LevelValues);
+        // console.log(this.LevelValues);
+       this.Percentile_Global= this.Percentile(this.LevelValues,0);
+        this.Percentile_65=this.Percentile(this.LevelValues65,65)
+        this.Percentile_125=this.Percentile(this.LevelValues125,125)
+        this.Percentile_250=this.Percentile(this.LevelValues250,250)
+        this.Percentile_500=this.Percentile(this.LevelValues500,500)
+        this.Percentile_1000=this.Percentile(this.LevelValues1000,1000)
+        this.Percentile_2000=this.Percentile(this.LevelValues2000,2000)
+        this.Percentile_4000=this.Percentile(this.LevelValues4000,4000)
+        this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
+        this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
+        // this.Percentile(this.LevelValues65);
+      this.ResetLevelValues();
 
-
-        console.log("OK");
-      }
-      else {
       this.height++;
-        console.log(this.height);
+      // this.ResetLevelValues();
-        this.value = this.height+2;
+        console.log("OK");
-        console.log(this.height);
+      // }
-        if (this.height % 4 == 0){
+      // else {
-          this.secondsDown = 25 - (this.height/4);
+      //   this.height++;
-        }
+      //   console.log(this.height);
-      }
+      //   this.value = this.height+2;
+      //   console.log(this.height);
+      //   if (this.height % 4 == 0){
+      //     this.secondsDown = 25 - (this.height/4);
+      //   }
+      // }
     },
 
     startmeasurement() {
@@ -228,16 +420,113 @@ export default {
     //RMS Value
     RecentLevel(){
       this.LevelAnalyser.getByteTimeDomainData(this.LevelBuffer);
+      this.AnalyserbandPass65.getByteTimeDomainData(this.bandPass65Buffer);
+      this.AnalyserbandPass125.getByteTimeDomainData(this.bandPass125Buffer)
+      this.AnalyserbandPass250.getByteTimeDomainData(this.bandPass250Buffer)
+      this.AnalyserbandPass500.getByteTimeDomainData(this.bandPass500Buffer)
+      this.AnalyserbandPass1000.getByteTimeDomainData(this.bandPass1000Buffer)
+      this.AnalyserbandPass2000.getByteTimeDomainData(this.bandPass2000Buffer)
+      this.AnalyserbandPass4000.getByteTimeDomainData(this.bandPass4000Buffer)
+      this.AnalyserbandPass8000.getByteTimeDomainData(this.bandPass8000Buffer)
+      this.AnalyserbandPass16000.getByteTimeDomainData(this.bandPass16000Buffer)
 
       for (var i = 0; i < 512; i++) {
         this.ByteToDecimal = (this.LevelBuffer[i]-128)/128;
         //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
         this.RecentRMS += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass65Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS65 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass125Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS125 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass250Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS250 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass500Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS500 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass1000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS1000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+        this.ByteToDecimal = (this.bandPass2000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS2000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+        this.ByteToDecimal = (this.bandPass4000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS4000 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass8000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS8000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+        this.ByteToDecimal = (this.bandPass16000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS16000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
       }
+
+
+
+
+
+      // Global
       this.RecentRMS /= 512;
       this.RecentLevelValue = Math.sqrt(this.RecentRMS);
 
+      // Freq 65
+      this.RecentRMS65 /= 512;
+      this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
+
+      // Freq 125
+      this.RecentRMS125 /= 512;
+      this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
+
+      // Freq 250
+      this.RecentRMS250 /= 512;
+      this.RecentLevelValue250= Math.sqrt(this.RecentRMS250);
+
+      this.RecentRMS500 /= 512;
+      this.RecentLevelValue500= Math.sqrt(this.RecentRMS500);
+
+      this.RecentRMS1000 /= 512;
+      this.RecentLevelValue1000= Math.sqrt(this.RecentRMS1000);
+
+      this.RecentRMS2000 /= 512;
+      this.RecentLevelValue2000= Math.sqrt(this.RecentRMS2000);
+
+      this.RecentRMS4000 /= 512;
+      this.RecentLevelValue4000= Math.sqrt(this.RecentRMS4000);
+
+      this.RecentRMS8000 /= 512;
+      this.RecentLevelValue8000= Math.sqrt(this.RecentRMS8000);
+
+      this.RecentRMS16000 /= 512;
+      this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
+
+
       this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
+      this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
+      this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
+      this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
+      this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
+      this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
+      this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
+      this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
+      this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
+      this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
+
 
       this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
       if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
@@ -255,7 +544,8 @@ export default {
         this.MicError = 2;
       }
       ++this.ArrayCounter;
-      console.log("Recent Level",this.RecentLevelValue);
+      // console.log("Recent Level",this.RecentLevelValue);
+      // console.log("Recent Level 65",this.RecentLevelValue65);
       this.AnimationID = requestAnimationFrame(this.RecentLevel);
     },
 
@@ -298,6 +588,7 @@ export default {
 
 
 
+
           this.analyser = this.audioCtx.createAnalyser();
           this.analyser.fftSize = 256;
           this.analyser.minDecibels = -90;
@@ -311,15 +602,162 @@ export default {
           this.LevelAnalyser.smoothingTimeConstant = 0.95;
           this.LevelBuffer = new Uint8Array(512);
 
+          // Band Pass 65
+          this.AnalyserbandPass65 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass65.fftSize = 512;
+          this.AnalyserbandPass65.minDecibels = -100;
+          this.AnalyserbandPass65.maxDecibels = -1;
+          this.AnalyserbandPass65.smoothingTimeConstant = 0.95;
+          this.bandPass65Buffer = new Uint8Array(512);
+
+          // Band Pass 125
+          this.AnalyserbandPass125 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass125.fftSize = 512;
+          this.AnalyserbandPass125.minDecibels = -100;
+          this.AnalyserbandPass125.maxDecibels = -1;
+          this.AnalyserbandPass125.smoothingTimeConstant = 0.95;
+          this.bandPass125Buffer = new Uint8Array(512);
+
+          this.bandPass125=this.audioCtx.createBiquadFilter();
+          this.bandPass125.type='bandpass'
+          this.bandPass125.frequency.value=125;
+          this.bandPass125.Q.value=1.41;
+
+
+          // Band Pass 250
+          this.AnalyserbandPass250 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass250.fftSize = 512;
+          this.AnalyserbandPass250.minDecibels = -100;
+          this.AnalyserbandPass250.maxDecibels = -1;
+          this.AnalyserbandPass250.smoothingTimeConstant = 0.95;
+          this.bandPass250Buffer = new Uint8Array(512);
+
+          this.bandPass250=this.audioCtx.createBiquadFilter();
+          this.bandPass250.type='bandpass'
+          this.bandPass250.frequency.value=250;
+          this.bandPass250.Q.value=1.41;
+
+          // Band Pass 500
+          this.AnalyserbandPass500 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass500.fftSize = 512;
+          this.AnalyserbandPass500.minDecibels = -100;
+          this.AnalyserbandPass500.maxDecibels = -1;
+          this.AnalyserbandPass500.smoothingTimeConstant = 0.95;
+          this.bandPass500Buffer = new Uint8Array(512);
+
+          this.bandPass500=this.audioCtx.createBiquadFilter();
+          this.bandPass500.type='bandpass'
+          this.bandPass500.frequency.value=500;
+          this.bandPass500.Q.value=1.41;
+
+          // Band Pass 1000
+          this.AnalyserbandPass1000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass1000.fftSize = 512;
+          this.AnalyserbandPass1000.minDecibels = -100;
+          this.AnalyserbandPass1000.maxDecibels = -1;
+          this.AnalyserbandPass1000.smoothingTimeConstant = 0.95;
+          this.bandPass1000Buffer = new Uint8Array(512);
+
+          this.bandPass1000=this.audioCtx.createBiquadFilter();
+          this.bandPass1000.type='bandpass'
+          this.bandPass1000.frequency.value=1000;
+          this.bandPass1000.Q.value=1.41;
+
+          // Band Pass 2000
+          this.AnalyserbandPass2000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass2000.fftSize = 512;
+          this.AnalyserbandPass2000.minDecibels = -100;
+          this.AnalyserbandPass2000.maxDecibels = -1;
+          this.AnalyserbandPass2000.smoothingTimeConstant = 0.95;
+          this.bandPass2000Buffer = new Uint8Array(512);
+
+          this.bandPass2000=this.audioCtx.createBiquadFilter();
+          this.bandPass2000.type='bandpass'
+          this.bandPass2000.frequency.value=2000;
+          this.bandPass2000.Q.value=1.41;
+
+          // Band Pass 4000
+          this.AnalyserbandPass4000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass4000.fftSize = 512;
+          this.AnalyserbandPass4000.minDecibels = -100;
+          this.AnalyserbandPass4000.maxDecibels = -1;
+          this.AnalyserbandPass4000.smoothingTimeConstant = 0.95;
+          this.bandPass4000Buffer = new Uint8Array(512);
+
+          this.bandPass4000=this.audioCtx.createBiquadFilter();
+          this.bandPass4000.type='bandpass'
+          this.bandPass4000.frequency.value=4000;
+          this.bandPass4000.Q.value=1.41;
+
+
+
+          // Band Pass 8000
+          this.AnalyserbandPass8000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass8000.fftSize = 512;
+          this.AnalyserbandPass8000.minDecibels = -100;
+          this.AnalyserbandPass8000.maxDecibels = -1;
+          this.AnalyserbandPass8000.smoothingTimeConstant = 0.95;
+          this.bandPass8000Buffer = new Uint8Array(512);
+
+          this.bandPass8000=this.audioCtx.createBiquadFilter();
+          this.bandPass8000.type='bandpass'
+          this.bandPass8000.frequency.value=8000;
+          this.bandPass8000.Q.value=1.41;
+
+          // Band Pass 16000
+          this.AnalyserbandPass16000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass16000.fftSize = 512;
+          this.AnalyserbandPass16000.minDecibels = -100;
+          this.AnalyserbandPass16000.maxDecibels = -1;
+          this.AnalyserbandPass16000.smoothingTimeConstant = 0.95;
+          this.bandPass16000Buffer = new Uint8Array(512);
+
+          this.bandPass16000=this.audioCtx.createBiquadFilter();
+          this.bandPass16000.type='bandpass'
+          this.bandPass16000.frequency.value=400;
+          this.bandPass16000.Q.value=1.41;
+
+
+
           this.source = this.audioCtx.createMediaStreamSource(stream);
           this.source.connect(this.Gain);
           this.Gain.connect(this.HPF);
           this.HPF.connect(this.LPF);
           this.LPF.connect(this.analyser);
           this.LPF.connect(this.LevelAnalyser);
-          this.bandPass1.connect(this.LPF);
 
-          this.bandPass1.connect(this.audioCtx.destination);
+          this.source.connect(this.bandPass1);
+          this.bandPass1.connect(this.AnalyserbandPass65);
+          // this.bandPass1.connect(this.audioCtx.destination);
+          // 125 Band
+          this.source.connect(this.bandPass125);
+          this.bandPass125.connect(this.AnalyserbandPass125);
+
+          this.source.connect(this.bandPass250);
+          this.bandPass250.connect(this.AnalyserbandPass250);
+
+          this.source.connect(this.bandPass500);
+          this.bandPass500.connect(this.AnalyserbandPass500);
+
+          this.source.connect(this.bandPass1000);
+          this.bandPass1000.connect(this.AnalyserbandPass1000);
+
+          this.source.connect(this.bandPass2000);
+          this.bandPass2000.connect(this.AnalyserbandPass2000);
+
+          this.source.connect(this.bandPass4000);
+          this.bandPass4000.connect(this.AnalyserbandPass4000);
+
+          this.source.connect(this.bandPass8000);
+          this.bandPass8000.connect(this.AnalyserbandPass8000);
+          //
+          this.source.connect(this.bandPass16000);
+          this.bandPass16000.connect(this.AnalyserbandPass16000);
+
+
+
+          // this.source.connect(this.bandPass1);
+          // this.bandPass1.connect(this.audioCtx.destination);
           // this.LevelAnalyser.connect(this.audioCtx.destination);
 
           this.FirstStart = false;

pages/band_30.vue

@@ -0,0 +1,780 @@
+<template>
+  <div>
+    <client-only>
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="home">
+
+              <button class="btn btn-success" @click="StartButtonPressed">Start</button>
+              <VueMeter
+                  :val="RecentLevelValue"
+              />
+
+              <div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
+
+              <table class="table table-bordered">
+                <thead>
+                <tr>
+                  <th>Band Frequency</th>
+                  <th>Percentile</th>
+                  <th>Result ABC</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                  <td>Global</td>
+                  <td>{{Percentile_Global.percentile}}</td>
+                  <td>{{Percentile_Global.result}}</td>
+                </tr>
+                <tr>
+                  <td>Bandpass 65</td>
+                  <td>{{Percentile_65.percentile}}</td>
+                  <td>{{Percentile_65.result}}</td>
+                </tr>
+
+                <tr>
+                  <td>Bandpass 125</td>
+                  <td>{{Percentile_125.percentile}}</td>
+                  <td>{{Percentile_125.result}}</td>
+                </tr>
+
+                <tr>
+                  <td>Bandpass 250</td>
+                  <td>{{Percentile_250.percentile}}</td>
+                  <td>{{Percentile_250.result}}</td>
+                </tr>
+
+                <tr>
+                  <td>Bandpass 500</td>
+                  <td>{{Percentile_500.percentile}}</td>
+                  <td>{{Percentile_500.result}}</td>
+                </tr>
+
+                <tr>
+                  <td>Bandpass 1000</td>
+                  <td>{{Percentile_1000.percentile}}</td>
+                  <td>{{Percentile_1000.result}}</td>
+                </tr>
+                <tr>
+                  <td>Bandpass 2000</td>
+                  <td>{{Percentile_2000.percentile}}</td>
+                  <td>{{Percentile_2000.result}}</td>
+                </tr>
+
+                <tr>
+                  <td>Bandpass 4000</td>
+                  <td>{{Percentile_4000.percentile}}</td>
+                  <td>{{Percentile_4000.result}}</td>
+                </tr>
+                <tr>
+                  <td>Bandpass 8000</td>
+                  <td>{{Percentile_8000.percentile}}</td>
+                  <td>{{Percentile_8000.result}}</td>
+                </tr>
+
+                <tr>
+                  <td>Bandpass 16000</td>
+                  <td>{{Percentile_16000.percentile}}</td>
+                  <td>{{Percentile_16000.result}}</td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </client-only>
+  </div>
+</template>
+
+<script>
+import "vue3-circle-progress/dist/circle-progress.css";
+import CircleProgress from "vue3-circle-progress";
+export default {
+  name: 'HomeView',
+  components:{
+    CircleProgress
+  },
+  data(){
+    return{
+      // This object holds all state of the app
+      classes: [
+        ['h1', 'Heading 1', '6rem', '300', '-.015625em', -1],
+        ['h2', 'Heading 2', '3.75rem', '300', '-.0083333333em', 0],
+        ['h3', 'Heading 3', '3rem', '400', 'normal', 1],
+        ['h4', 'Heading 4', '2.125rem', '400', '.0073529412em', 2],
+        ['h5', 'Heading 5', '1.5rem', '400', 'normal', 2],
+        ['h6', 'Heading 6', '1.25rem', '500', '.0125em', 3],
+        ['subtitle-1', 'Subtitle 1', '1rem', '400', '.009375em', 4],
+        ['subtitle-2', 'Subtitle 2', '0.875rem', '500', '.0071428571em', 4],
+        ['body-1', 'Body 1', '1rem', '400', '.03125em', 4],
+        ['body-2', 'Body 2', '0.875rem', '400', '.0178571429em', 4],
+        ['button', 'Button', '0.875rem', '500', '.0892857143em', 4],
+        ['caption', 'Caption', '0.75rem', '400', '.0333333333em', 4],
+        ['overline', 'Overline', '0.75rem', '500', '.1666666667em', 4],
+      ],
+      //meineReaktiveVariable: "Leon",
+      AlteSeite: 0,
+      NeueSeite: 0,
+
+      pdf: 0,
+      valid:true,
+      Vorname:"",
+      Nachname:"",
+      nameRules:  [
+        v => !!v || 'Feld muss ausgefüllt sein',
+      ],
+      Anrede:"",
+      Mail:"",
+      emailRules: [
+        v => !!v || 'Feld muss ausgefüllt sein',
+        v => /.+@.+\..+/.test(v) || 'Eingabe ungültig',
+      ],
+      Firma:"",
+      Raum:"",
+      Zusatzinfos:"",
+
+      date:{},
+      time:{},
+
+      Timeframe: 250,
+      UpperPercentile: 0.9,
+      LowerPercentile: 0.1,
+      LimitA: 2.5,
+      LimitB:10.0,
+
+      audioCtx:{},
+      source:{},
+      stream:{},
+      Gain:{},
+      HPF:{},
+      LPF:{},
+      BandPass_65:{},
+      BandPass_125:{},
+      BandPass_250:{},
+      BandPass_500:{},
+      BandPass_1000:{},
+      BandPass_2000:{},
+      BandPass_4000:{},
+      BandPass_8000:{},
+      BandPass_6000:{},
+      analyser:{},
+      LevelAnalyser:{},
+      LevelBuffer:{},
+      AnalyserbandPass65:{},
+      AnalyserbandPass125:{},
+      AnalyserbandPass250:{},
+      AnalyserbandPass500:{},
+      AnalyserbandPass1000:{},
+      AnalyserbandPass2000:{},
+      AnalyserbandPass4000:{},
+      AnalyserbandPass8000:{},
+      AnalyserbandPass16000:{},
+      bandPass65Buffer:[],
+      bandPass125Buffer:[],
+      bandPass250Buffer:[],
+      bandPass500Buffer:[],
+      bandPass1000Buffer:[],
+      bandPass2000Buffer:[],
+      bandPass4000Buffer:[],
+      bandPass8000Buffer:[],
+      bandPass16000Buffer:[],
+      AnimationID:{},
+      id:{},
+
+      bufferLength:{},
+      dataArray:{},
+      RecentRMS: 0,
+      RecentRMS65: 0,
+      RecentRMS125: 0,
+      RecentRMS250: 0,
+      RecentRMS500: 0,
+      RecentRMS1000: 0,
+      RecentRMS2000: 0,
+      RecentRMS4000: 0,
+      RecentRMS8000: 0,
+      RecentRMS16000: 0,
+      ByteToDecimal: 0,
+      RecentLevelValue: 0,
+      RecentLevelValue65: 0,
+      RecentLevelValue125: 0,
+      RecentLevelValue250: 0,
+      RecentLevelValue500: 0,
+      RecentLevelValue1000: 0,
+      RecentLevelValue2000: 0,
+      RecentLevelValue4000: 0,
+      RecentLevelValue8000: 0,
+      RecentLevelValue16000: 0,
+
+      ArrayCounter:0,
+      LevelValues:[],
+      LevelValues65:[],
+      LevelValues125:[],
+      LevelValues250:[],
+      LevelValues500:[],
+      LevelValues1000:[],
+      LevelValues2000:[],
+      LevelValues4000:[],
+      LevelValues8000:[],
+      LevelValues16000:[],
+      CummulatedLevelValues:0,
+      CummulatedLevelValues65:0,
+      CummulatedLevelValues125:0,
+      CummulatedLevelValues250:0,
+      CummulatedLevelValues5000:0,
+      CummulatedLevelValues1000:0,
+      CummulatedLevelValues2000:0,
+      CummulatedLevelValues4000:0,
+      SortedArray:[],
+      SortedArray65:[],
+      IndexMax:{},
+      IndexMin:{},
+      PercentileValue:{},
+      Percentile_65:{},
+      Percentile_125:{},
+      Percentile_250:{},
+      Percentile_500:{},
+      Percentile_1000:{},
+      Percentile_2000:{},
+      Percentile_4000:{},
+      Percentile_8000:{},
+      Percentile_16000:{},
+      Percentile_Global:{},
+
+      height:0,
+      value:1,
+      secondsDown:25,
+
+      Result:{},
+      ResultABC:{},
+
+      MicError:0,
+      bandPass1:{},
+      bandPass125:{},
+      bandPass250:{},
+      bandPass500:{},
+      bandPass1000:{},
+      bandPass2000:{},
+      bandPass4000:{},
+      bandPass8000:{},
+      bandPass16000:{},
+
+
+    }
+
+  },
+  methods: {
+    // Write your own functions that mutate data via `this.`
+    nextPage() {
+      // this.seite = (this.seite + 1) % 3;
+      this.AlteSeite = this.NeueSeite
+      this.NeueSeite = (this.NeueSeite + 1);
+    },
+    firstPage() {
+      this.AlteSeite = this.NeueSeite;
+      this.NeueSeite = 0;
+    },
+    previousPage() {
+      this.NeueSeite = this.AlteSeite;
+      this.AlteSeite = (this.AlteSeite - 1);
+      this.pdf = 0;
+    },
+
+    pdfForm() {
+      this.pdf = 1;
+    },
+
+
+    about() {
+      this.AlteSeite = this.NeueSeite;
+      this.NeueSeite = 10;
+    },
+
+
+
+
+
+    ResetLevelValues() {
+      this.ArrayCounter = 0;
+      this.LevelValues = [];
+      this.LevelValues65=[];
+      this.LevelValues125=[];
+      this.LevelValues250=[];
+      this.LevelValues500=[];
+      this.LevelValues1000=[];
+      this.LevelValues2000=[];
+      this.LevelValues4000=[];
+      this.LevelValues8000=[];
+      this.LevelValues16000=[];
+    },
+
+
+    RMStoDBFS(InputArray){
+      for (var i = 0; i < InputArray.length; i++) {
+        InputArray[i] = 20 * Math.log10(InputArray[i])
+      }
+    },
+
+    numSort(a, b) {
+      return (a - b);
+    },
+
+
+    Percentile(InputArray,band=0) {
+
+      this.SortedArray = InputArray.sort(this.numSort);
+      this.RMStoDBFS(this.SortedArray);
+
+      //console.log('Sortiertes Array DBFS: ' + SortedArray);
+
+      this.IndexMax = Math.round(this.SortedArray.length * this.UpperPercentile);
+      this.IndexMin = Math.round(this.SortedArray.length * this.LowerPercentile);
+      this.PercentileValue = this.SortedArray[this.IndexMax] - this.SortedArray[this.IndexMin];
+      this.PercentileValue = this.PercentileValue.toFixed(2); //nach zwei Dazimalstellen abbrechen
+      console.log('percentile Value = ' + this.PercentileValue);
+
+      if (this.PercentileValue < this.LimitA) {
+        this.Result = 1
+        this.ResultABC = "A"
+      } else if (this.PercentileValue < this.LimitB) {
+        this.Result = 2
+        this.ResultABC = "B"
+      }
+      else {
+        this.Result = 3
+        this.ResultABC = "C"
+      }
+      //console.log('seite = ' + this.seite);
+
+      this.NeueSeite = 4;
+      this.ResetLevelValues();
+      return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
+    },
+
+
+    stopmeasurement() {
+      window.cancelAnimationFrame(this.AnimationID);
+      clearInterval(this.id);
+      console.log('Measurement stopped.');
+      this.height = 0;
+      this.secondsDown = 25;
+      this.CummulatedLevelValues = 0;
+      this.CummulatedLevelValues65 = 0;
+    },
+
+    frame() {
+      if (this.height == 100) {
+        this.stopmeasurement();
+        console.log(this.LevelValues);
+        this.Percentile_Global= this.Percentile(this.LevelValues,0);
+        this.Percentile_65=this.Percentile(this.LevelValues65,65)
+        this.Percentile_125=this.Percentile(this.LevelValues125,125)
+        this.Percentile_250=this.Percentile(this.LevelValues250,250)
+        this.Percentile_500=this.Percentile(this.LevelValues500,500)
+        this.Percentile_1000=this.Percentile(this.LevelValues1000,1000)
+        this.Percentile_2000=this.Percentile(this.LevelValues2000,2000)
+        this.Percentile_4000=this.Percentile(this.LevelValues4000,4000)
+        this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
+        this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
+        // this.Percentile(this.LevelValues65);
+
+
+
+
+        console.log("OK");
+      }
+      else {
+        this.height++;
+        console.log(this.height);
+        this.value = this.height+2;
+        console.log(this.height);
+        if (this.height % 4 == 0){
+          this.secondsDown = 25 - (this.height/4);
+        }
+      }
+    },
+
+    startmeasurement() {
+      //this.visualize();
+      this.ResetLevelValues();
+
+      var today = new Date();
+      this.date = today.getDate()+'.'+(today.getMonth()+1)+'.'+today.getFullYear();
+      this.time = today.getHours()+':'+today.getMinutes();
+      //requestAnimationFrame(this.RecentLevel);
+      this.height = 0;
+      requestAnimationFrame(this.RecentLevel);
+      this.id = setInterval(this.frame, this.Timeframe);
+      //this.frame();
+
+    },
+
+    CancleMeasurement() {
+      this.stopmeasurement();
+      this.previousPage();
+      this.MicError=0;
+    },
+
+    //RMS Value
+    RecentLevel(){
+      this.LevelAnalyser.getByteTimeDomainData(this.LevelBuffer);
+      this.AnalyserbandPass65.getByteTimeDomainData(this.bandPass65Buffer);
+      this.AnalyserbandPass125.getByteTimeDomainData(this.bandPass125Buffer)
+      this.AnalyserbandPass250.getByteTimeDomainData(this.bandPass250Buffer)
+      this.AnalyserbandPass500.getByteTimeDomainData(this.bandPass500Buffer)
+      this.AnalyserbandPass1000.getByteTimeDomainData(this.bandPass1000Buffer)
+      this.AnalyserbandPass2000.getByteTimeDomainData(this.bandPass2000Buffer)
+      this.AnalyserbandPass4000.getByteTimeDomainData(this.bandPass4000Buffer)
+      this.AnalyserbandPass8000.getByteTimeDomainData(this.bandPass8000Buffer)
+      this.AnalyserbandPass16000.getByteTimeDomainData(this.bandPass16000Buffer)
+
+      for (var i = 0; i < 512; i++) {
+        this.ByteToDecimal = (this.LevelBuffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass65Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS65 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass125Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS125 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass250Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS250 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass500Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS500 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass1000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS1000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+        this.ByteToDecimal = (this.bandPass2000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS2000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+        this.ByteToDecimal = (this.bandPass4000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS4000 += this.ByteToDecimal * this.ByteToDecimal;
+
+        this.ByteToDecimal = (this.bandPass8000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS8000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+        this.ByteToDecimal = (this.bandPass16000Buffer[i]-128)/128;
+        //console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
+        this.RecentRMS16000 += this.ByteToDecimal * this.ByteToDecimal;
+
+
+      }
+
+
+
+
+
+      // Global
+      this.RecentRMS /= 512;
+      this.RecentLevelValue = Math.sqrt(this.RecentRMS);
+
+      // Freq 65
+      this.RecentRMS65 /= 512;
+      this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
+
+      // Freq 125
+      this.RecentRMS125 /= 512;
+      this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
+
+      // Freq 250
+      this.RecentRMS250 /= 512;
+      this.RecentLevelValue250= Math.sqrt(this.RecentRMS250);
+
+      this.RecentRMS500 /= 512;
+      this.RecentLevelValue500= Math.sqrt(this.RecentRMS500);
+
+      this.RecentRMS1000 /= 512;
+      this.RecentLevelValue1000= Math.sqrt(this.RecentRMS1000);
+
+      this.RecentRMS2000 /= 512;
+      this.RecentLevelValue2000= Math.sqrt(this.RecentRMS2000);
+
+      this.RecentRMS4000 /= 512;
+      this.RecentLevelValue4000= Math.sqrt(this.RecentRMS4000);
+
+      this.RecentRMS8000 /= 512;
+      this.RecentLevelValue8000= Math.sqrt(this.RecentRMS8000);
+
+      this.RecentRMS16000 /= 512;
+      this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
+
+
+      this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
+      this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
+      this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
+      this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
+      this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
+      this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
+      this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
+      this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
+      this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
+      this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
+
+
+      this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
+      if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
+        this.stopmeasurement();
+        this.MicError = 1;
+      }
+
+      if (isNaN(this.RecentLevelValue)){
+        this.stopmeasurement();
+        this.MicError = 1;
+      }
+
+      if (this.RecentLevelValue > 0.5){
+        this.stopmeasurement();
+        this.MicError = 2;
+      }
+      ++this.ArrayCounter;
+      console.log("Recent Level",this.RecentLevelValue);
+      console.log("Recent Level 65",this.RecentLevelValue65);
+      this.AnimationID = requestAnimationFrame(this.RecentLevel);
+    },
+
+
+
+
+    StartButtonPressed(){
+
+      let constraints = {
+        audio : {
+          autoGainControl : false,
+          echoCancellation : false,
+          noiseSuppression : false
+        }
+      }
+      if (navigator.mediaDevices.getUserMedia) {
+        console.log('getUserMedia supported.');
+        navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
+
+          this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+          //set up the different audio nodes we will use for the app
+
+          this.Gain = this.audioCtx.createGain();
+          this.Gain.gain.setValueAtTime(2.0, this.audioCtx.currentTime);
+          // this.Gain.gain.setValueAtTime(0.5,0);
+
+          this.HPF = this.audioCtx.createBiquadFilter();
+          this.HPF.type = "highpass";
+          this.HPF.frequency.value = 450;
+
+          this.LPF = this.audioCtx.createBiquadFilter();
+          this.LPF.type = "lowpass";
+          this.LPF.frequency.value = 10000;
+
+          this.bandPass1=this.audioCtx.createBiquadFilter();
+          this.bandPass1.type='bandpass'
+          this.bandPass1.frequency.value=63;
+          this.bandPass1.Q.value=1.41;
+
+
+
+
+          this.analyser = this.audioCtx.createAnalyser();
+          this.analyser.fftSize = 256;
+          this.analyser.minDecibels = -90;
+          this.analyser.maxDecibels = -10;
+          this.analyser.smoothingTimeConstant = 0.9;
+
+          this.LevelAnalyser = this.audioCtx.createAnalyser();
+          this.LevelAnalyser.fftSize = 512;
+          this.LevelAnalyser.minDecibels = -100;
+          this.LevelAnalyser.maxDecibels = -1;
+          this.LevelAnalyser.smoothingTimeConstant = 0.95;
+          this.LevelBuffer = new Uint8Array(512);
+
+          // Band Pass 65
+          this.AnalyserbandPass65 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass65.fftSize = 512;
+          this.AnalyserbandPass65.minDecibels = -100;
+          this.AnalyserbandPass65.maxDecibels = -1;
+          this.AnalyserbandPass65.smoothingTimeConstant = 0.95;
+          this.bandPass65Buffer = new Uint8Array(512);
+
+          // Band Pass 125
+          this.AnalyserbandPass125 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass125.fftSize = 512;
+          this.AnalyserbandPass125.minDecibels = -100;
+          this.AnalyserbandPass125.maxDecibels = -1;
+          this.AnalyserbandPass125.smoothingTimeConstant = 0.95;
+          this.bandPass125Buffer = new Uint8Array(512);
+
+          this.bandPass125=this.audioCtx.createBiquadFilter();
+          this.bandPass125.type='bandpass'
+          this.bandPass125.frequency.value=125;
+          this.bandPass125.Q.value=1.41;
+
+
+          // Band Pass 250
+          this.AnalyserbandPass250 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass250.fftSize = 512;
+          this.AnalyserbandPass250.minDecibels = -100;
+          this.AnalyserbandPass250.maxDecibels = -1;
+          this.AnalyserbandPass250.smoothingTimeConstant = 0.95;
+          this.bandPass250Buffer = new Uint8Array(512);
+
+          this.bandPass250=this.audioCtx.createBiquadFilter();
+          this.bandPass250.type='bandpass'
+          this.bandPass250.frequency.value=250;
+          this.bandPass250.Q.value=1.41;
+
+          // Band Pass 500
+          this.AnalyserbandPass500 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass500.fftSize = 512;
+          this.AnalyserbandPass500.minDecibels = -100;
+          this.AnalyserbandPass500.maxDecibels = -1;
+          this.AnalyserbandPass500.smoothingTimeConstant = 0.95;
+          this.bandPass500Buffer = new Uint8Array(512);
+
+          this.bandPass500=this.audioCtx.createBiquadFilter();
+          this.bandPass500.type='bandpass'
+          this.bandPass500.frequency.value=500;
+          this.bandPass500.Q.value=1.41;
+
+          // Band Pass 1000
+          this.AnalyserbandPass1000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass1000.fftSize = 512;
+          this.AnalyserbandPass1000.minDecibels = -100;
+          this.AnalyserbandPass1000.maxDecibels = -1;
+          this.AnalyserbandPass1000.smoothingTimeConstant = 0.95;
+          this.bandPass1000Buffer = new Uint8Array(512);
+
+          this.bandPass1000=this.audioCtx.createBiquadFilter();
+          this.bandPass1000.type='bandpass'
+          this.bandPass1000.frequency.value=1000;
+          this.bandPass1000.Q.value=1.41;
+
+          // Band Pass 2000
+          this.AnalyserbandPass2000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass2000.fftSize = 512;
+          this.AnalyserbandPass2000.minDecibels = -100;
+          this.AnalyserbandPass2000.maxDecibels = -1;
+          this.AnalyserbandPass2000.smoothingTimeConstant = 0.95;
+          this.bandPass2000Buffer = new Uint8Array(512);
+
+          this.bandPass2000=this.audioCtx.createBiquadFilter();
+          this.bandPass2000.type='bandpass'
+          this.bandPass2000.frequency.value=2000;
+          this.bandPass2000.Q.value=1.41;
+
+          // Band Pass 4000
+          this.AnalyserbandPass4000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass4000.fftSize = 512;
+          this.AnalyserbandPass4000.minDecibels = -100;
+          this.AnalyserbandPass4000.maxDecibels = -1;
+          this.AnalyserbandPass4000.smoothingTimeConstant = 0.95;
+          this.bandPass4000Buffer = new Uint8Array(512);
+
+          this.bandPass4000=this.audioCtx.createBiquadFilter();
+          this.bandPass4000.type='bandpass'
+          this.bandPass4000.frequency.value=4000;
+          this.bandPass4000.Q.value=1.41;
+
+
+
+          // Band Pass 8000
+          this.AnalyserbandPass8000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass8000.fftSize = 512;
+          this.AnalyserbandPass8000.minDecibels = -100;
+          this.AnalyserbandPass8000.maxDecibels = -1;
+          this.AnalyserbandPass8000.smoothingTimeConstant = 0.95;
+          this.bandPass8000Buffer = new Uint8Array(512);
+
+          this.bandPass8000=this.audioCtx.createBiquadFilter();
+          this.bandPass8000.type='bandpass'
+          this.bandPass8000.frequency.value=8000;
+          this.bandPass8000.Q.value=1.41;
+
+          // Band Pass 16000
+          this.AnalyserbandPass16000 = this.audioCtx.createAnalyser();
+          this.AnalyserbandPass16000.fftSize = 512;
+          this.AnalyserbandPass16000.minDecibels = -100;
+          this.AnalyserbandPass16000.maxDecibels = -1;
+          this.AnalyserbandPass16000.smoothingTimeConstant = 0.95;
+          this.bandPass16000Buffer = new Uint8Array(512);
+
+          this.bandPass16000=this.audioCtx.createBiquadFilter();
+          this.bandPass16000.type='bandpass'
+          this.bandPass16000.frequency.value=400;
+          this.bandPass16000.Q.value=1.41;
+
+
+
+          this.source = this.audioCtx.createMediaStreamSource(stream);
+          this.source.connect(this.Gain);
+          this.Gain.connect(this.HPF);
+          this.HPF.connect(this.LPF);
+          this.LPF.connect(this.analyser);
+          this.LPF.connect(this.LevelAnalyser);
+
+          this.source.connect(this.bandPass1);
+          this.bandPass1.connect(this.AnalyserbandPass65);
+          // this.bandPass1.connect(this.audioCtx.destination);
+          // 125 Band
+          this.source.connect(this.bandPass125);
+          this.bandPass125.connect(this.AnalyserbandPass125);
+
+          this.source.connect(this.bandPass250);
+          this.bandPass250.connect(this.AnalyserbandPass250);
+
+          this.source.connect(this.bandPass500);
+          this.bandPass500.connect(this.AnalyserbandPass500);
+
+          this.source.connect(this.bandPass1000);
+          this.bandPass1000.connect(this.AnalyserbandPass1000);
+
+          this.source.connect(this.bandPass2000);
+          this.bandPass2000.connect(this.AnalyserbandPass2000);
+
+          this.source.connect(this.bandPass4000);
+          this.bandPass4000.connect(this.AnalyserbandPass4000);
+
+          this.source.connect(this.bandPass8000);
+          this.bandPass8000.connect(this.AnalyserbandPass8000);
+          //
+          this.source.connect(this.bandPass16000);
+          this.bandPass16000.connect(this.AnalyserbandPass16000);
+
+
+
+          // this.source.connect(this.bandPass1);
+          // this.bandPass1.connect(this.audioCtx.destination);
+          // this.LevelAnalyser.connect(this.audioCtx.destination);
+
+          this.FirstStart = false;
+          //this.startmeasurement();
+          setTimeout(this.startmeasurement, 800); //short break to avoid zeros at beginning of measurement
+        })
+
+            // Error callback
+            .catch(function(err) {
+              console.log('The following gUM error occured: ' + err);
+            })
+      }
+      else {
+        console.log('Error: This Site is not supported on your browser!');
+      }
+
+    }
+  },
+}
+</script>

pages/index.vue

@@ -3,29 +3,17 @@
       <home-bar />
       <NuxtPage page-key="child" />
 
-      <client-only>
-        <Vue3Lottie
-            :animation-data="anim"
 
-            :height="200"
-            :width="200"
-        />
-      </client-only>
     </div>
 </template>
 <script>
 
 import HomeBar from "../components/homebar";
-import * as animationData from "~/assets/animation.json";
+
 
 export default {
   components: {HomeBar},
-  data() {
+
-    return {
-      anim: animationData.default, // for saving the reference to the animation
-      lottieOptions: { animationData: animationData.default }
-    };
-  },
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;

pages/index/index.vue

@@ -4,10 +4,13 @@
     <div class="row pt-3">
       <div class="col-12 text-center">
         <img src="~/assets/image/Cloudsoftware.png">
-        <av-waveform
+       <client-only>
-            src="/maskin2.wav"
+<!--         <av-waveform-->
-            played-line-width="2"
+<!--             src="/maskin2.wav"-->
-        ></av-waveform>
+<!--             :played-line-width="3"-->
+<!--             :noplayed-line-width="3"-->
+<!--         ></av-waveform>-->
+       </client-only>
         <h4 class="fw-bold  ">Focus</h4>
         <div class="pt-3">
           <img src="~/assets/image/Frame19439.png" />