dB SPL display

src/main/base/store.ts

@@ -123,6 +123,8 @@ export class Store {
             "quality": "HIGH",
             "seamless_audio": true,
             "normalization": false,
+            "dBSPL": false,
+            "dBSPLcalibration": 90,
             "maikiwiAudio": {
                 "ciderPPE": false,
                 "ciderPPE_value": "MAIKIWI",

src/main/plugins/raop.ts

@@ -181,7 +181,7 @@ export default class RAOP {
                 this.portairplay = ipport;
                 this.device = this.airtunes.add(ipv4, {
                     port: ipport,
-                    volume: 60,
+                    volume: 50,
                     password: sepassword,
                     txt: txt
                 });

src/renderer/main/vueapp.js

@@ -284,6 +284,9 @@ const app = new Vue({
                 }
             }
         },
+        formatVolumeTooltip() {
+            return this.cfg.audio.dBSPL ? (Number(this.cfg.audio.dBSPLcalibration) + (Math.log10(this.mk.volume) * 20)).toFixed(2) + ' dB SPL' : (Math.log10(this.mk.volume) * 20).toFixed(2) + ' dBFS'
+        },
         mainMenuVisibility(val) {
             if (val) {
                 (this.mk.isAuthorized) ? this.chrome.menuOpened = !this.chrome.menuOpened : false;

src/renderer/views/app/chrome-bottom.ejs

@@ -101,7 +101,7 @@
                     :class="{'active': this.cfg.audio.volume == 0}"></button>
             <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
                    v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
-                   v-b-tooltip.hover :title="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
+                   v-b-tooltip.hover :title="formatVolumeTooltip()">
         </div>
         <div class="app-chrome-item generic">
             <button class="playback-button--small miniplayer"

src/renderer/views/app/chrome-top.ejs

@@ -134,7 +134,7 @@
                         :class="{'active': this.cfg.audio.volume == 0}"></button>
                 <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
                        v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
-                       v-b-tooltip.hover :title="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
+                       v-b-tooltip.hover :title="formatVolumeTooltip()">
             </div>
             <div class="app-chrome-item generic">
                 <button class="playback-button--small miniplayer"

src/renderer/views/app/sidebar.ejs

@@ -216,7 +216,7 @@
                     <input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
                         :max="cfg.audio.maxVolume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
                         @change="checkMuteChange()" v-b-tooltip.hover
-                        :title="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
+                        :title="formatVolumeTooltip()">
                 </div>
             </div>
         </div>

src/renderer/views/components/audio-controls.ejs

@@ -14,7 +14,7 @@
                     <div class="md-option-segment md-option-segment_auto percent">
                         <input type="number"
                                style="width: 100%; text-align: center; margin-right: 5px;" min="0"
-                               step="5" v-model="volume"/>
+                               step="2" v-model="volume"/>
                     </div>
                 </div>
                 <div class="md-option-line">

src/renderer/views/components/fullscreen.ejs

@@ -82,7 +82,7 @@
                         <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
                         <input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
                                v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
-                               v-b-tooltip.hover :title="`${(Math.log10(app.mk.volume) * 20).toFixed(2)} dB`">
+                               v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
                         </div>       
                     </div>
                     </div>

src/renderer/views/pages/settings.ejs

@@ -441,6 +441,30 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="md-option-line" v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization">
+                            <div class="md-option-segment">
+                                dB SPL Display
+                                <br>
+                                <small>(Advanced users only) Display dB SPL instead of dBFS on the volume slider.</small>
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.audio.dBSPL" switch/>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="md-option-line" v-show="app.cfg.audio.dBSPL">
+                            <div class="md-option-segment">
+                                0 dBFS Calibration
+                                <br>
+                                <small>Enter the peak Z-weighted dB SPL when Cider is at 0 dBFS.</small>
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="number" v-model="app.cfg.audio.dBSPLcalibration"/>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </b-tab>