equalizer

src/i18n/en_US.jsonc

@@ -98,6 +98,8 @@
   "term.developer": "Developer",
   "term.socialTeam": "Social Team",
   "term.contributors": "Contributors",
+  "term.equalizer": "Equalizer",
+  "term.reset": "Reset",
 
   // Home
   "home.title": "Home",

src/main/base/store.ts

@@ -49,6 +49,18 @@ export class ConfigStore {
                     "down": 'acoustic-ceiling-tiles',
                     "up": 'acoustic-ceiling-tiles',
                 }
+            }, 
+            "equalizer": {
+                '60' : 0, 
+                '170': 0 ,
+                '310': 0 ,
+                '600': 0 , 
+                '1000': 0 , 
+                '3000': 0 , 
+                '6000': 0 , 
+                '12000': 0 , 
+                '14000': 0 ,
+                '16000': 0 ,
             }
         },
         "visual": {

src/renderer/audio/audio.js

@@ -5,6 +5,7 @@ var CiderAudio = {
         gainNode : null,
         spatialNode : null,
         spatialInput: null,
+        audioBands : null,
     },
     init: function (cb = function () { }) {
         //AudioOutputs.fInit = true;
@@ -42,6 +43,7 @@ var CiderAudio = {
         if (app.cfg.audio.spatial){
             CiderAudio.spatialOn()
         }    
+        CiderAudio.equalizer()
     },
     normalizerOn: function (){},
     normalizerOff: function (){
@@ -49,7 +51,7 @@ var CiderAudio = {
     },
     spatialOn: function (){
         try{
-        CiderAudio.audioNodes.gainNode.connect(CiderAudio.context.destination);} catch(e){}
+        CiderAudio.audioNodes.gainNode.disconnect(CiderAudio.context.destination);} catch(e){}
         CiderAudio.audioNodes.spatialNode = new ResonanceAudio(CiderAudio.context);
         CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.context.destination);
         let roomDimensions = {
@@ -90,6 +92,43 @@ var CiderAudio = {
             }
           );                   
         }
+    },
+    equalizer: function (){
+        const BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000];
+        CiderAudio.audioNodes.audioBands = {};
+
+        BANDS.forEach((band, i) => {
+        const filter = CiderAudio.context.createBiquadFilter();
+
+        CiderAudio.audioNodes.audioBands[band] = filter;
+
+        if (i === 0) {
+            // The first filter, includes all lower frequencies
+            filter.type = "lowshelf";
+        } else if (i === BANDS.length - 1) {
+            // The last filter, includes all higher frequencies
+            filter.type = "highshelf";
+        } else {
+            filter.type = "peaking";
+        }
+        filter.frequency.value = band;
+        filter.gain.value = 0;
+        if (i == 0){
+            if (app.cfg.audio.spatial) {
+                CiderAudio.audioNodes.spatialNode.output.disconnect(CiderAudio.context.destination);
+                CiderAudio.audioNodes.spatialNode.output.connect(filter);
+            } else {
+                CiderAudio.audioNodes.gainNode.disconnect(CiderAudio.context.destination);
+                CiderAudio.audioNodes.gainNode.connect(filter);
+            }
+        } else if (i === BANDS.length - 1) {
+        CiderAudio.audioNodes.audioBands[BANDS[i - 1]].connect(filter);
+        } else {
+        CiderAudio.audioNodes.audioBands[BANDS[i - 1]].connect(filter);
+        filter.connect(CiderAudio.context.destination);
+        }
+
+        });
     }
 
 }

src/renderer/index.js

@@ -297,7 +297,8 @@ const app = new Vue({
         modals: {
             addToPlaylist: false,
             spatialProperties: false,
-            qrcode: false
+            qrcode: false,
+            equalizer: false,
         },
         socialBadges: {
             badgeMap: {},

src/renderer/style.less

@@ -5699,4 +5699,72 @@ body.no-gpu {
   overflow-y: hidden;
 }
 
+.equalizer-panel {
+  .modal-window {
+    height: 300px;
+    max-height: 300px;
+    width: 400px;
+    max-width: 400px;
+    overflow: hidden;
+
+    .info-header {
+      padding-left: 12px;
+    }
+
+    .visual-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+    }
+
+   
+    .modal-header {
+      padding: 16px;
+      position: relative;
+      overflow: hidden;
+
+      .modal-title {
+        text-align: center;
+      }
+
+      .close-btn {
+        width: 50px;
+        height: 100%;
+        background-image: var(--gfx-closeBtn);
+        background-position: center;
+        background-repeat: no-repeat;
+        -webkit-app-region: no-drag;
+        appearance: none;
+        border: 0;
+        background-color: transparent;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        &:hover {
+          background-color: rgb(196, 43, 28)
+        }
+      }
+    }
+    .modal-content{
+      display: block;
+      .input-container{
+        display: inline-grid;
+        width: 35px;
+        justify-items: center;
+        font-size: 0.7em;
+      }
+      .reset-button{
+        width: 50%;
+        margin-left: 25%;
+      }
+    }
+  }
+}
+input.eq-slider {
+  -webkit-appearance: slider-vertical;
+  width: 5%;
+}
+
 @import url("less/compact.less");

src/renderer/views/components/equalizer.ejs

@@ -0,0 +1,108 @@
+<script type="text/x-template" id="eq-view">
+    <div class="modal-fullscreen equalizer-panel">
+        <div class="modal-window" >
+            <div class="modal-header">
+                <div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
+                <button class="close-btn" @click="close()"></button>
+            </div>
+            <div class="modal-content">
+                <!-- BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]; -->
+                <div class="inputs-container">
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['60']}}
+                        <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['60']" @change="changeGain('60')">
+                        60
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['170']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['170']" @change="changeGain('170')">
+                        170
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['310']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['310']" @change="changeGain('310')">
+                        310
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['600']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['600']" @change="changeGain('600')">
+                        600
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['1000']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['1000']" @change="changeGain('1000')">
+                        1000
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['3000']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['3000']" @change="changeGain('3000')">
+                        3000
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['6000']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['6000']" @change="changeGain('6000')">
+                        6000
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['12000']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['12000']" @change="changeGain('12000')">
+                        12000
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['14000']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['14000']" @change="changeGain('14000')">
+                        14000
+                    </div>
+                    <div class="input-container">
+                        {{app.cfg.audio.equalizer['16000']}}
+                    <input type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="app.cfg.audio.equalizer['16000']" @change="changeGain('16000')">
+                        16000
+                    </div>
+                </div>
+                </br>
+                <div class="reset-button md-btn" @click="resetGain()">{{$root.getLz('term.reset')}}</div>
+            </div>    
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('eq-view', {
+        template: '#eq-view',
+        data: function () {
+            return {
+                app: this.$root,
+
+            }
+        },
+        props: ["src", "url"],
+        mounted() {
+
+        },
+        methods: {
+            close() {
+                app.resetState()
+            },
+            changeGain(i) {
+                CiderAudio.audioNodes.audioBands[i].gain.value = app.cfg.audio.equalizer[i]
+            },
+            resetGain(){
+                this.app.cfg.audio.equalizer =  {
+                    '60' : 0, 
+                    '170': 0 ,
+                    '310': 0 ,
+                    '600': 0 , 
+                    '1000': 0 , 
+                    '3000': 0 , 
+                    '6000': 0 , 
+                    '12000': 0 , 
+                    '14000': 0 ,
+                    '16000': 0 ,
+                }
+                for (var i in this.app.cfg.audio.equalizer){
+                    this.changeGain(i)
+                }
+            }
+        }
+    });
+</script>

src/renderer/views/main.ejs

@@ -264,6 +264,10 @@
                                         </div>
                                     </div>
                                 </button>
+                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
+                                @click="modals.equalizer = true">
+                                    {{$root.getLz('term.equalizer')}}
+                                </button>
                                 <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial"
                                         @click="modals.spatialProperties = true">
                                     {{$root.getLz('term.spacializedAudioSetting')}}
@@ -619,6 +623,9 @@
     <transition name="modal">
         <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
     </transition>
+    <transition name="modal">
+        <eq-view v-if="modals.equalizer"></eq-view>
+    </transition>
     <transition name="modal">
         <qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
     </transition>
@@ -730,6 +737,9 @@
 <!-- QRCode Modal -->
 <%- include('components/qrcode-modal') 
 %>
+<!-- Equalizer -->
+<%- include('components/equalizer') 
+%>
 <!-- Add to playlist -->
 <%- include('components/add-to-playlist')
 %>