dev-audioprocessing/pages/index.vue

<template>
    <div>
      <div class="container-fluid" style="background-image: url('/images/posters/poster2.png');background-size: cover">
        <div class="row">
          <div class="col-12 px-0 mx-0">
            <audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
            <video-background
                preload="auto"
                poster="/images/poster.png"
                src="/video/bg-video.mp4"
                style=" height: 100vh;"
            >


              <home-bar v-on:play="playPause" :title="title" />



              <div class="container-fluid">
                <div class="row justify-content-center">
                  <div class="adaptive pb-3">


                  <div class="col-12 ">
                    <div class="d-none d-md-block mx-auto  pb-1" style="width: 225px" >
                      <div class="progress " style="height: 10px">
                        <div class="progress-bar bar" role="progressbar"  aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </div>
                    <div class="d-flex justify-content-center  mb-1">
                      <nuxt-link to="#adaptive-modal" data-bs-target="#adaptive-modal" data-bs-toggle="modal" class="text-muted text-decoration-none fw-bold fs-6 ">{{t('adaptive_soundscap')}} : <span class="" style="color: #e9c046">On</span> </nuxt-link><span class="ps-3"><i style="padding: 5px 0px;" class="fa-solid text-muted d-flex  fa-chevron-right"></i></span>
                    </div>
                    <div class="d-block d-md-none mx-auto  pb-1" style="width: 225px" >
                    <div class="progress " style="height: 10px">
                      <div class="progress-bar bar" role="progressbar"  aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    </div>
                  </div>
               <BootomBar/>
                </div>
                </div>
              </div>
            </video-background>
<!--            <video  muted id="myVideo" autoplay loop>-->
<!--              <source src="~/assets/video/bg-video.mp4" type="video/mp4">-->
<!--              <source src="~/assets/video/bg-video.ogg" type="video/ogg">-->
<!--              Your browser does not support HTML5 video.-->
<!--            </video>-->

          </div>
        </div>
      </div>

    </div>
</template>
<script>

import HomeBar from "../components/homebar";
import BootomBar from "~/components/BootomBar.vue";
export default {
  setup() {
    definePageMeta({

      middleware: 'auth'
    })
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  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);
        });
  },

  components: {BootomBar, HomeBar},
  data(){
    return{
      title:'Lagoon soundscape',
      bar_width:0,
      analyser:null,
      dataArray:null,
    }
  },
  methods:{
    handleAnimation: function (anim) {
      this.anim = anim;
    },
    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;
    },
    playPause(play){
      console.log("Play Pause");
      if (play){
        this.$refs['audio'].play();
      }else {
        this.$refs['audio'].pause();

      }
    }
  }

}
</script>

<style>
#myVideo{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;

  padding: 0;
  margin: 0;
  z-index: -99;
}
.adaptive{
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
}

</style>