ok

assets/css/style.css

@@ -124,9 +124,17 @@
     fill: white;
     background-color: #e9c046;
 }
+.nav-icons.router-link-active{
+    fill: white;
+    background-color: #e9c046;
+}
 .nav-icons.router-link-exact-active svg path{
     fill: white;
 }
+.nav-icons.router-link-active svg path{
+    fill: white;
+    
+}
 
 @media only screen and (max-width: 396px){
     .checklabel{

components/homebar.vue

@@ -17,11 +17,11 @@
             <ul class="nav  float-end px-1 py-1 " style="border-radius: 6px;background-color: #f5f5f5">
 
               <li class="nav-item">
-                <nuxt-link to="/" class="nav-link nav-icons " style="padding: 5px 8px" id="foucused-icon" >
+                <a @click.prevent="playSound" :class="{'router-link-exact-active':play}" class="nav-link nav-icons " style="padding: 5px 8px" id="foucused-icon" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 19 20" fill="none">
                     <path d="M2.69824 0.055674C1.5521 0.101019 0.5 1.0361 0.5 2.29591V17.7041C0.5 19.3839 2.37138 20.486 3.84082 19.6719L17.7451 11.9678C19.2568 11.1301 19.2568 8.86988 17.7451 8.03224L3.84082 0.328135C3.47346 0.124617 3.08029 0.0405589 2.69824 0.055674ZM2.71582 1.53321C2.84512 1.53266 2.98064 1.56618 3.11328 1.63966L17.0186 9.34376C17.5678 9.64811 17.5678 10.3519 17.0186 10.6563L3.11328 18.3604C2.58272 18.6543 2 18.3104 2 17.7041V2.29591C2 1.99278 2.14535 1.75582 2.35742 1.63087C2.46346 1.5684 2.58652 1.53377 2.71582 1.53321Z" fill="#030504" fill-opacity="0.4"/>
                   </svg>
-                </nuxt-link>
+                </a>
               </li>
 
               <li class="nav-item dropdown ">
@@ -133,6 +133,22 @@ export default {
   name:'HomeBar',
   props:{
     title:String
+  },
+  data(){
+    return{
+
+      play:false,
+    }
+  },
+  methods:{
+    playSound(){
+      if(!this.play){
+        this.play=true;
+      }else {
+        this.play=false;
+      }
+      this.$emit('play',this.play)
+    }
   }
 }
 </script>

pages/about.vue

@@ -7,6 +7,63 @@
 </template>
 <script>
 export default {
+  mounted() {
+    let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    let upperPercentile = 0.9;
+    let lowerPercentile = 0.1;
+    let buffer = [];
+    let levelValues = [];
+    let upperValue = 0;
+    let lowerValue = 0;
+
+    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+      let source = audioCtx.createMediaStreamSource(stream);
+
+      let bandPass65 = audioCtx.createBiquadFilter();
+      bandPass65.type = "bandpass";
+      bandPass65.frequency.value = 65;
+      bandPass65.Q.value = 1.41;
+
+      let bandPass125 = audioCtx.createBiquadFilter();
+      bandPass125.type = "bandpass";
+      bandPass125.frequency.value = 125;
+      bandPass125.Q.value = 1.41;
+
+      let analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 512;
+      analyser.minDecibels = -100;
+      analyser.maxDecibels = -1;
+
+      source.connect(bandPass65);
+      bandPass65.connect(bandPass125);
+      bandPass125.connect(analyser);
+
+      let dataArray = new Float32Array(analyser.frequencyBinCount);
+
+      function update() {
+        analyser.getFloatFrequencyData(dataArray);
+        buffer.push(...dataArray);
+        if (buffer.length > 10 * audioCtx.sampleRate) {
+          buffer = buffer.slice(-10 * audioCtx.sampleRate);
+        }
+
+        levelValues = buffer.map(val => Math.pow(10, (val / 20)));
+        levelValues = levelValues.map(val => Math.floor(val));
+
+        let sortedData = levelValues.slice().sort((a, b) => a - b);
+        upperValue = sortedData[Math.floor(upperPercentile * sortedData.length)];
+        lowerValue = sortedData[Math.floor(lowerPercentile * sortedData.length)];
+
+        console.log("Upper Percentile in Decimal: " + upperValue);
+
+
+        console.log("Lower Percentile in Decimal: " + lowerValue);
+        requestAnimationFrame(update);
+      }
+
+      update();
+    });
+    },
   data(){
       return{
         text : "Helo World",

pages/band.vue

@@ -13,6 +13,12 @@
 
             <div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
 
+            <div class="row">
+              <div class="col-md-2">
+                <p>Mili Seconds: {{totalms}}</p>
+              </div>
+
+            </div>
             <table class="table table-bordered">
               <thead>
               <tr>
@@ -81,6 +87,9 @@
               </tbody>
             </table>
           </div>
+          <div>
+            {{LevelValues}}
+          </div>
 
         </div>
       </div>
@@ -140,11 +149,13 @@ export default {
       time:{},
 
       Timeframe: 125,
+      timeHeight:0,
       UpperPercentile: 0.9,
       LowerPercentile: 0.1,
       LimitA: 2.5,
       LimitB:10.0,
 
+      totalms:0,
       audioCtx:{},
       source:{},
       stream:{},
@@ -260,7 +271,10 @@ export default {
       bandPass4000:{},
       bandPass8000:{},
       bandPass16000:{},
-
+      lastArrayCouhter:0,
+      firstArrayCounter:0,
+      data125CountArray:[],
+      dt125counter:0
 
     }
 
@@ -311,8 +325,13 @@ export default {
     },
 
 
+
     RMStoDBFS(InputArray){
       for (var i = 0; i < InputArray.length; i++) {
+        if (typeof InputArray[i] !== 'number' || InputArray[i] <= 0) {
+         // console.log("InputArray[" + i + "] is not a valid number or <=0, skipping...");
+          continue;
+        }
         InputArray[i] = 20 * Math.log10(InputArray[i])
       }
     },
@@ -333,7 +352,7 @@ export default {
       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);
+      // console.log('percentile Value = ' + this.PercentileValue);
 
       if (this.PercentileValue < this.LimitA) {
         this.Result = 1
@@ -352,6 +371,27 @@ export default {
 
       return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
     },
+    reset25(){
+
+
+
+      // this.LevelValues65.splice(0,this.firstArrayCounter);
+      // this.LevelValues125.slice(this.firstArrayCounter);
+      // this.LevelValues250.slice(this.firstArrayCounter);
+      // this.LevelValues500.slice(this.firstArrayCounter);
+      // this.LevelValues1000.slice(this.firstArrayCounter);
+      // this.LevelValues2000.slice(this.firstArrayCounter);
+      // this.LevelValues4000.slice(this.firstArrayCounter);
+      // this.LevelValues8000.slice(this.firstArrayCounter);
+      // this.LevelValues16000.slice(this.firstArrayCounter);
+
+
+
+      //
+      // this.ArrayCounter=this.LevelValues65.length;
+      // console.log("Real Array Counter",this.ArrayCounter);
+
+      },
 
 
     stopmeasurement() {
@@ -368,6 +408,8 @@ export default {
       // if (this.height == 100) {
         // this.stopmeasurement();
         // console.log(this.LevelValues);
+      //console.log("Before",this.LevelValues65);
+
        this.Percentile_Global= this.Percentile(this.LevelValues,0);
         this.Percentile_65=this.Percentile(this.LevelValues65,65)
         this.Percentile_125=this.Percentile(this.LevelValues125,125)
@@ -379,11 +421,12 @@ export default {
         this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
         this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
         // this.Percentile(this.LevelValues65);
-      this.ResetLevelValues();
+      // this.ResetLevelValues();
 
+     // console.log("After",this.LevelValues65);
       this.height++;
       // this.ResetLevelValues();
-        console.log("OK");
+       // console.log("OK");
       // }
       // else {
       //   this.height++;
@@ -406,12 +449,42 @@ export default {
       //requestAnimationFrame(this.RecentLevel);
       this.height = 0;
       requestAnimationFrame(this.RecentLevel);
-      setTimeout(()=>{
+      // setTimeout(()=>{
-        this.id = setInterval(this.frame, this.Timeframe);
+      //   this.id = setInterval(this.frame, this.Timeframe);
-      },5000)
+      // },5000)
 
       //this.frame();
 
+
+      this.id=setInterval(()=>{
+
+        if(this.timeHeight>40){
+          this.frame();
+          // this.reset25();
+
+          // console.log("Array Counter",this.ArrayCounter);
+          // console.log("Last",this.lastArrayCouhter);
+          // this.lastArrayCouhter=this.ArrayCounter;
+
+        }
+        // console.log(this.ArrayCounter);
+        // console.log("Last",this.lastArrayCouhter);
+        // this.lastArrayCouhter=this.ArrayCounter;
+
+        // if(this.timeHeight <= 0){
+        //   this.firstArrayCounter=this.ArrayCounter;
+        //   // console.log("First",this.firstArrayCounter);
+        // }
+        ++this.timeHeight
+        this.totalms+=125;
+
+        console.log('Lendgt',this.LevelValues.length);
+        // this.data125CountArray[this.dt125counter]=this.ArrayCounter;
+        // ++this.dt125counter;
+        // // console.log('Array',this.data125CountArray);
+        // console.log(this.data125CountArray);
+
+      },this.Timeframe)
     },
 
     CancleMeasurement() {
@@ -419,6 +492,10 @@ export default {
       this.previousPage();
       this.MicError=0;
     },
+    Reset125(){
+     this.LevelValues65.shift();
+      this.ArrayCounter=this.LevelValues65.length;
+    },
 
     //RMS Value
     RecentLevel(){
@@ -492,6 +569,7 @@ export default {
       this.RecentRMS65 /= 512;
       this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
 
+      // console.log(this.RecentLevelValue65);
       // Freq 125
       this.RecentRMS125 /= 512;
       this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
@@ -519,34 +597,61 @@ export default {
       this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
 
 
-      this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
+      this.LevelValues.push(this.RecentLevelValue);
-      this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
+      this.LevelValues65.push(this.RecentLevelValue65) ;
-      this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
+      this.LevelValues125.push(this.RecentLevelValue125);
-      this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
+      this.LevelValues250.push(this.RecentLevelValue250);
-      this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
+      this.LevelValues500.push(this.RecentLevelValue500);
-      this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
+      this.LevelValues1000.push(this.RecentLevelValue1000);
-      this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
+      this.LevelValues2000.push(this.RecentLevelValue2000);
-      this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
+      this.LevelValues4000.push(this.RecentLevelValue4000);
-      this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
+      this.LevelValues8000.push(this.RecentLevelValue8000);
-      this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
+      this.LevelValues16000.push(this.RecentLevelValue16000);
+
+      if (this.timeHeight > 40){
+        this.LevelValues.shift();
+        this.LevelValues65.shift();
+        this.LevelValues125.shift();
+        this.LevelValues250.shift();
+        this.LevelValues500.shift();
+        this.LevelValues1000.shift();
+        this.LevelValues2000.shift();
+        this.LevelValues4000.shift();
+        this.LevelValues8000.shift();
+        this.LevelValues16000.shift();
+      }
+      // console.log('Level 65',this.LevelValues65.length)
+
 
 
       this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
-      if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
+      // if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
-        this.stopmeasurement();
+      //   this.stopmeasurement();
-        this.MicError = 1;
+      //   this.MicError = 1;
-      }
+      // }
 
-      if (isNaN(this.RecentLevelValue)){
+      // if (isNaN(this.RecentLevelValue)
-        this.stopmeasurement();
+      //     || isNaN(this.RecentLevelValue65)
-        this.MicError = 1;
+      //     || isNaN(this.RecentLevelValue125)
-      }
+      //     || isNaN(this.RecentLevelValue250)
+      //     || isNaN(this.RecentLevelValue500)
+      //     || isNaN(this.RecentLevelValue1000)
+      //     || isNaN(this.RecentLevelValue2000)
+      //     || isNaN(this.RecentLevelValue4000)
+      //     || isNaN(this.RecentLevelValue16000)
+      // ){
+      //   this.stopmeasurement();
+      //   this.MicError = 1;
+      // }
 
-      if (this.RecentLevelValue > 0.5){
+      // if (this.RecentLevelValue > 0.5){
-        this.stopmeasurement();
+      //   this.stopmeasurement();
-        this.MicError = 2;
+      //   this.MicError = 2;
-      }
+      // }
       ++this.ArrayCounter;
+      // if(this.timeHeight >=40){
+      //   this.Reset125()
+      // }
       // console.log("Recent Level",this.RecentLevelValue);
       // console.log("Recent Level 65",this.RecentLevelValue65);
       this.AnimationID = requestAnimationFrame(this.RecentLevel);

pages/homeforest.vue

@@ -3,12 +3,12 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 px-0 mx-0">
-          <audio autoplay src="/sounds/Forest.aac" loop></audio>
+          <audio ref="audio"  src="/sounds/Forest.aac" loop></audio>
           <video-background
               src="video/Forest.mp4"
               style=" height: 100vh;"
           >
-            <home-bar :title="title" />
+            <home-bar :title="title" v-on:play="playPause" />
             <div class="container-fluid">
               <div class="row justify-content-center">
                 <div class="adaptive pb-3">
@@ -238,12 +238,21 @@ export default {
   components: {HomeBar},
   data(){
     return{
-      title:'Forest soundscape'
+      title:'Forest soundscape',
     }
   },
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 

pages/homemeadow.vue

@@ -3,12 +3,12 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 px-0 mx-0">
-          <audio autoplay src="/sounds/Meadow.aac" loop></audio>
+          <audio ref="audio" src="/sounds/Meadow.aac" loop></audio>
           <video-background
               src="video/Meadow.mp4"
               style=" height: 100vh;"
           >
-            <home-bar :title="title" />
+            <home-bar :title="title" v-on:play="playPause" />
             <div class="container-fluid">
               <div class="row justify-content-center">
                 <div class="adaptive pb-3">
@@ -245,6 +245,15 @@ export default {
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 

pages/hometropics.vue

@@ -3,13 +3,9 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 px-0 mx-0">
-          <audio autoplay src="/sounds/Tropics.aac" loop></audio>
+          <audio ref="audio" src="/sounds/Tropics.aac" loop></audio>
-          <video-background
+          <video-background src="video/Tropics.mp4" style=" height: 100vh;">
-              src="video/Tropics.mp4"
+            <home-bar v-on:play="playPause" :title="title" />
-              style=" height: 100vh;"
-          >
-            <home-bar :title="title" />
-
             <div class="container-fluid">
               <div class="row justify-content-center">
                 <div class="adaptive pb-3">
@@ -248,6 +244,15 @@ export default {
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 

pages/index.vue

@@ -3,14 +3,14 @@
       <div class="container-fluid">
         <div class="row">
           <div class="col-12 px-0 mx-0">
-            <audio autoplay src="/sounds/Lagoon.aac" loop></audio>
+            <audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
             <video-background
                 src="video/bg-video.mp4"
                 style=" height: 100vh;"
             >
 
 
-              <home-bar :title="title" />
+              <home-bar v-on:play="playPause" :title="title" />
 
 
 
@@ -174,6 +174,15 @@ export default {
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 

pages/onboarding.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <video-background
-        src="video/bg-video.mp4"
+        src="/video/bg-video.mp4"
         style=" height: 100vh;"
     >
 

pages/onboarding/index.vue

@@ -11,7 +11,7 @@
     </div>
     <div class="row pt-5 text-center">
       <div class="d-flex mx-auto justify-content-center ">
-        <div class="checkmark pt-2 d-block d-sm-inline-block px-1">
+        <nuxt-link to="/onboarding/onboarding2"  @click.once="increment(50)" class="checkmark pt-2 d-block d-sm-inline-block px-1">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off">
           <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 41" fill="none">
@@ -19,7 +19,7 @@
             </svg>
             <p class=" text-center">In-Ear</p>
           </label>
-        </div>
+        </nuxt-link>
 
         <nuxt-link to="/onboarding/onboarding2"  @click.once="increment(50)" class="checkmark px-1 pt-2 d-inline-block">
           <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">

pages/onboarding/onboarding2.vue

@@ -10,7 +10,7 @@
         </div>
         <div class=" pt-5 text-center">
           <div class="d-flex mx-auto justify-content-center ">
-            <div class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
+            <nuxt-link to="/onboarding/onboarding3"  @click.once="increment(75)"  class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
               <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
               <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
@@ -18,7 +18,7 @@
                 </svg>
                 <p class=" text-center">No</p>
               </label>
-            </div>
+            </nuxt-link>
 
             <nuxt-link to="/onboarding/onboarding3"  @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
               <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">

pages/onboarding/onboarding3.vue

@@ -9,7 +9,7 @@
         </div>
         <div class=" pt-5 text-center">
           <div class=" d-flex mx-auto justify-content-center">
-            <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
+            <nuxt-link to="/onboarding/onboarding4"  @click.once="increment(100)" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
               <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
               <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60"  viewBox="0 0 51 56" fill="none">
@@ -17,7 +17,7 @@
                 </svg>
                 <p class=" text-center">Creativity</p>
               </label>
-            </div>
+            </nuxt-link>
 
             <nuxt-link to="/onboarding/onboarding4"  @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
               <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">

pages/onboarding/onboarding4.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="col-12 text-center ">
         <div class="d-flex mx-auto justify-content-center ">
-          <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
+          <nuxt-link  to="/letsgo" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
           <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="55" height="60" viewBox="0 0 60 46" fill="none">
@@ -17,7 +17,7 @@
             </svg>
             <p class=" text-center">In-Ear</p>
           </label>
-          </div>
+          </nuxt-link>
 
           <nuxt-link to="/letsgo" class="checkmark px-1 pt-2 d-inline-block">
           <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
@@ -30,7 +30,7 @@
           </nuxt-link>
         </div>
         <div class="d-flex mx-auto justify-content-center ">
-          <div class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
+          <nuxt-link to="/letsgo" class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined2" autocomplete="off" >
           <label class="btn checklabel py-3 px-5" for="success-outlined2">
             <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -39,8 +39,8 @@
 
             <p class=" text-center">Forest</p>
           </label>
-          </div>
+          </nuxt-link>
-          <div class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
+          <nuxt-link to="/letsgo" class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
           <input type="radio" class="btn-check  " name="options-outlined" id="danger-outlined" autocomplete="off">
           <label class="btn checklabel ms-0 ms-lg-3 py-3 px-5 " for="danger-outlined">
             <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -50,7 +50,7 @@
             <p class=" text-center">Meadow</p>
           </label>
 
-          </div>
+          </nuxt-link>
         </div>
         </div>
       </div>