dev-audioprocessing/pages/onboarding.vue

<template>
  <div>
    <video-background
        src="/video/bg-video.mp4"
        style=" height: 100vh;"
        poster="/images/poster.png"
    >

    <div class="container-fluid  pt-3">

      <div class="row">
        <div class="col-12 col-lg-3 text-center text-sm-start">
          <nuxt-link class="navbar-brand" to="/">
            <img src="/svglogo.svg" height="35" class="img " alt="imae">
        </nuxt-link>
        </div>


          <div class="col-12 text-center d-flex justify-content-center col-lg-12 pt-1">
            <div class="progress mx-auto   mt-2 " style="width: 50%;height: 12px">
              <div class="progress-bar bar" style="transition: 0.1s !important;" :style="{width:bar_width+'%'}"  role="progressbar"  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>

          <div class="col-12 pt-3">
            <h6 class="text-muted text-center">{{t("We are analyzing your background noise...")}} </h6>
          </div>


      </div>


      <NuxtPage page-key="child" />


      <div class="row pt-5 mt-0 mt-sm-4 " style="position: fixed;bottom: 0px;left: 0;right: 0">
        <div class="col-12 text-center pt-5 mt-3   pb-2 mb-2" >
          <NuxtLink class="btn btn-warning px-2 mx-1" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/selectinput')"></NuxtLink>
          <NuxtLink class="btn btn-warning px-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding')"></NuxtLink>
          <NuxtLink class="btn btn-warning px-2 mx-2"  exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding2')"></NuxtLink>
          <NuxtLink class="btn btn-warning px-2 " exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding3')"></NuxtLink>
          <NuxtLink class="btn btn-warning px-2 mx-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding4')"></NuxtLink>
          <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
        </div>

      </div>
    </div>
    </video-background>
  </div>
</template>


<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
export default {
  setup() {
    const {t} = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  computed: {
    ...mapState(useCounterStore, ['count'])
  },
  methods:{
    ...mapActions(useCounterStore,['increment']),
    ...mapActions(useCounterStore,['decrement']),
    updateMeter(){
      requestAnimationFrame(this.updateMeter);
      this.analyser.getByteFrequencyData(this.dataArray);
      var rms = this.getRMS(this.dataArray);
      var level = 20 * Math.log10(rms / 128);
      level = Math.max(0, Math.min(100, level + 100));
      // bar.style.width = level + '%';

      this.bar_width=level;

    },
    getRMS(dataArray) {
      var rms = 0;
      for (var i = 0; i < dataArray.length; i++) {
        rms += dataArray[i] * dataArray[i];
      }
      rms /= dataArray.length;
      rms = Math.sqrt(rms);
      return rms;
    }
  },
  mounted() {
    navigator.mediaDevices.getUserMedia({audio: true})
        .then((stream)=> {
          var audioCtx = new AudioContext();
          var source = audioCtx.createMediaStreamSource(stream);
          this.analyser = audioCtx.createAnalyser();
          source.connect(this.analyser);
          this.analyser.fftSize = 2048;
          var bufferLength = this.analyser.frequencyBinCount;
          this.dataArray = new Uint8Array(bufferLength);

          this.updateMeter();
        })
        .catch(function(err) {
          console.log('Error accessing microphone', err);
        });


    },
  data(){
    return{
      bar_val:25,
      bar_width:0,
      analyser:null,
      dataArray:null,
    }
  }
}
</script>

<style >
.bar{
  background-color: #e9c046 !important;
}
.checklabel{
  background-color: white !important;
  width: 150px ;
  height: 134px ;
}
.px-4{
  transition: 1s;
}
</style>