fixed slider issues

index.html

@@ -27,7 +27,6 @@
       Please enable it to continue.</strong>
   </noscript>
   <div id="app"></div>
-  <script type="module" src="./src/modules/id3/dist/id3.js"></script>
   <script type="module" src="/src/main.ts"></script>
 
 </body>

src/Core/Equalizer.ts

@@ -1,5 +1,20 @@
 import { audio } from '../store'
 export class Equalizer {
+  audio: HTMLAudioElement
+  audioCtx: AudioContext
+  analyser: AnalyserNode
+  source: MediaElementAudioSourceNode
+  merger: any
+  splitter: any
+  delays: DelayNode[]
+  feedback: GainNode[]
+  bands: BiquadFilterNode[]
+  bass: BiquadFilterNode
+  bassBooster: GainNode
+  treble: BiquadFilterNode
+  trebleBooster: GainNode
+  roomEffect: () => void
+  connects: () => void
   /**
    *
    * @param {HTMLAudioElement} audio
@@ -58,7 +73,7 @@ export class Equalizer {
       new BiquadFilterNode(this.audioCtx, { type: 'peaking', frequency: 16000, gain: 0 })
     ]
     // base nknob
-    this.bass = new BiquadFilterNode(this.audioCtx, { type: 'lowpass', frequency: 80, gain: 0 })
+    this.bass = new BiquadFilterNode(this.audioCtx, { type: 'lowpass', frequency: 60, gain: 0 })
     this.bassBooster = new GainNode(this.audioCtx, { gain: 0 })
     /**
      * Stereo band boost

src/components/EqaulizerWidget/Bands.vue

@@ -1,37 +1,60 @@
 <template>
   <div class="bands">
+    <!-- {{ bandGain }} -->
     <span class="label">
       {{ frequency > 500 ? frequency.toString().replace('000', 'k') : frequency }}Hz
     </span>
-    <input type="range" v-model="value" @input="updateBand" max="15" min="-15" step="0.01" />
+    <slider
+      class="band-slider"
+      v-model="value"
+      @change="bandChange"
+      :max="15"
+      :min="-15"
+      :step="0.01"
+    />
     <span class="label">{{ Number(value).toFixed(1) }}</span>
   </div>
 </template>
 
 <script>
+import Slider from 'primevue/slider'
 import { mapGetters } from 'vuex'
 export default {
   name: 'Eq-Bands',
+  components: {
+    Slider
+  },
+  computed: {
+    ...mapGetters(['getBands'])
+  },
   props: {
     id: Number,
-    bandValue: Number,
     frequency: Number,
     bandGain: Number
   },
   data() {
     return {
-      value: this.bandValue
+      value: 0
     }
   },
+  mounted() {
+    setInterval(() => {
+      this.value = this.getBands[this.id]
+    }, 500)
+  },
   methods: {
-    updateBand() {
-      this.$store.commit('updateBands', [this.id, this.bandValue])
+    bandChange() {
+      this.$emit('bandChange', [this.$props.id, this.value])
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.band-slider {
+  width: 400px;
+  height: 2px;
+}
 .bands {
   display: flex;
   flex-direction: row;

src/components/EqaulizerWidget/Equalizer.vue

@@ -1,18 +1,26 @@
 <!-- eslint-disable vue/no-reserved-keys -->
 <template>
   <div class="widget">
+    <!-- <tab-view>
+      <TabPanel header="Room effects" />
+      <TabPanel header="Equalizer" />
+      <TabPanel header="Compressor" />
+    </tab-view>
+    <TabMenu></TabMenu> -->
     <div class="equalizer">
       <Bands
         :key="index"
         :id="index"
         :frequency="band.frequency.value"
-        :bandValue="update[index]"
+        :bandGain="update[index]"
         v-for="(band, index) in bandSet"
+        @bandChange="updateBandGain"
       />
     </div>
     <!-- </div> -->
     <div class="side">
       <button class="closeEQ" @click="this.$emit('closeEQ')">Close</button>
+
       <select ref="choice" @change="updateBand">
         <option v-for="(preset, index) in presets" v-bind:key="index" :value="preset.value">
           {{ preset.name }}
@@ -25,12 +33,15 @@
         <b>Bass </b>
         <knob
           @change="updateBass"
-          :max="10"
+          :max="15"
           :min="0"
           :step="0.01"
           :size="150"
-          :valueTemplate="`${Math.floor((bass / 10) * 100)} dB`"
+          :valueTemplate="`${Math.floor((bass / 15) * 100)} dB`"
           v-model="bass"
+          rangeColor="#232323"
+          valueColor="orange"
+          textColor="#fff"
           v-bind:strokeWidth="10"
         />
       </p>
@@ -59,25 +70,32 @@
 <script>
 import Bands from './Bands.vue'
 import Knob from 'primevue/knob'
+import TabView from 'primevue/tabview'
+
 // import slider from "../widget/slider.vue";
 import { Presets } from '../../Core/Presets'
-
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
+import TabPanel from 'primevue/tabpanel'
+import TabMenu from 'primevue/tabmenu'
 export default {
   name: 'V-EQ',
-  components: { Bands, Knob },
+  components: {
+    Bands,
+    Knob
+    // TabPanel, TabView, TabMenu
+  },
   computed: {
-    ...mapGetters(['bandGains']),
+    ...mapGetters(['getBands']),
     bands() {
-      return this.bandGains
+      return this.getBands
     }
   },
 
   data() {
     return {
       bass: 0,
       treble: 0,
-      update: [],
+      update: this.getBands,
       presets: [
         {
           name: 'Normal',
@@ -153,21 +171,27 @@ export default {
     this.update = this.bands
   },
   methods: {
+    ...mapMutations(['updateBands', 'updateGains', 'tuneBass', 'tuneTreble']),
     eqBand(bands, array) {
       this.update = array
-      // console.log(array)
+      this.updateGains(array)
       for (let index = 0; index < bands.length; index++) {
         bands[index].gain.value = array[index]
+        // bands[index].Q.value = array[index] / 2
         this.out = array[index]
       }
     },
+    updateBandGain(gain) {
+      console.log(gain)
+      this.updateBands([gain[0], gain[1]])
+    },
     trebleUpdate() {
       //   console.log(e.value);
-      this.$store.commit('tuneTreble', this.treble)
+      this.tuneTreble(this.treble)
     },
     updateBass() {
       // console.log(this.bass);
-      this.$store.commit('tuneBass', this.bass)
+      this.tuneBass(this.bass)
     },
     updateBand() {
       switch (this.$refs['choice'].value) {

src/components/Lyrics/Lyrics.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
 export default {
   name: 'V-Lyrics',
   props: {
@@ -18,16 +20,24 @@ export default {
   data() {
     return {
       monitor: 0,
-      count: 0
+      count: 0,
+      player: 0
     }
   },
+  computed: {
+    ...mapGetters(['getPlayer'])
+  },
   created() {
-    const player = this.$store.getters.getPlayer
+    const player = this.getPlayer
     player.ontimeupdate = () => {
-      let val = Math.floor(player.duration * player.currenTime)
+      let val = player.currentTime
       console.log(val)
       this.$refs['center'].scroll({ behavior: 'smooth', top: val / 40 })
     }
+
+    axios.get(`http://15.190.273:5050/getLyrics/`).then((response) => {
+      console.log(response.json())
+    })
   },
   methods: {
     increaseCount() {

src/components/Room/Feedback.vue

@@ -1,14 +1,14 @@
 <template lang="html">
   <div>
     <label>{{ Number(valueTune).toFixed(2) }} dB</label>
-    <knob max="1" step="0.01" min="0" @change="changeTuner" v-model="value" />
+    <slider class="sslider" :max="2" :step="0.01" :min="0" @change="changeTuner" v-model="value" />
   </div>
 </template>
 <script>
-import Knob from 'primevue/knob'
+import Slider from 'primevue/slider'
 export default {
   name: 'V-Feedback',
-  components: { Knob },
+  components: { Slider },
   props: {
     valueTune: Number,
     feedback: Number
@@ -29,36 +29,23 @@ export default {
 </script>
 <style lang="scss" scoped>
 div {
-  // transform: rotate(90deg);
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: row-reverse;
+  justify-content: center;
+  margin: 10px;
   align-items: center;
+  .sslider {
+    width: 200px;
+    height: 2px;
+  }
   label {
     font: 300 12px Arial;
-    margin: 8px;
+    margin: 15px;
     background: #222;
     color: #fff;
     border-radius: 10px;
     padding: 5px;
     transform: rotate(90deg);
   }
-  [type='range'] {
-    appearance: none;
-    width: 250px;
-    background: #736cdd;
-    // overflow: hidden;
-    border-radius: 10px;
-    height: 5px;
-    margin: 30px;
-    &::-webkit-slider-thumb {
-      appearance: none;
-      width: 20px;
-      background: #1506e7;
-      cursor: pointer;
-      height: 20px;
-      border-radius: 10px;
-    }
-  }
 }
 </style>