Gain slidey

homepage/style.css

@@ -551,9 +551,11 @@ button:hover {
   width:25px !important;
   height:25px !important;
 }
+
 .relative {
   position:relative;
 }
+
 .sortbutton {
   margin-top:10px;
   font-size:x-large;
@@ -561,6 +563,7 @@ button:hover {
   padding:5px;
   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
 }
+
 button.legacyview {
   color:gray;
   margin:5px;
@@ -573,6 +576,7 @@ button.legacyview {
   transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
+
 button.legacyview:hover  { 
   box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 }
@@ -586,12 +590,15 @@ button.loadmore {
   box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
   
 }
+
 button.loadmore:hover { 
   box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 }
+
 #searchterm {
   transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 #searchterm:hover {
   box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 }
@@ -599,29 +606,36 @@ button.loadmore:hover {
 tr {
   background-color:#9fe29b;
 }
+
 .history.centered form {
   display:flex;
   justify-content: center;
 }
+
 .history.centered input {
   margin-right:5px;
   border:0px;
 }
+
 .centered form#views button {
   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
   margin:2px;
   transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
+
 .centered form#views button:hover {
   box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 }
+
 input {
   box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);
 }
+
 dialog {
   border:none;
 }
+
 dialog::backdrop {
   background: repeating-linear-gradient(
     30deg,
@@ -632,12 +646,14 @@ dialog::backdrop {
   );
   backdrop-filter: blur(1px)
 }
+
 .centered_image_container {
   font-size:19px !important;
   display:inline-block;
   position:relative;
   margin-bottom:3px;
 }
+
 .centered_image_container img.img1 {
   transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
@@ -649,19 +665,27 @@ dialog::backdrop {
   border-radius: 5px;
   width:unset;
 }
+
 .centered_image_container img.img1:hover{
   opacity:0.8;
   box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 }
+
 .centered_image_container * {
   font-size:19px !important;
 }
+
 .centered_image_container form {
   margin-bottom:0px;
 }
+
 .brbanner {
   padding:15px;
   background-color:rgb(159, 226, 155);
   text-align:center;
   font-size:large;
 }
+
+#gain.centered {
+  margin-bottom:10px;
+}

scripts/spectrogram.php

@@ -5,6 +5,7 @@
 //  before a user gesture. This fixes it.
 var started = null;
 var player = null;
+var gain = 128;
 const ctx = null;
 window.onload = function(){
   // if user agent includes iPhone or Mac use legacy mode
@@ -129,7 +130,7 @@ function initialize() {
       CTX.putImageData(imgData, 0, 0);
       ANALYSER.getByteFrequencyData(DATA);
       for (let i = 0; i < LEN; i++) {
-        let rat = DATA[i] / 128 ;
+        let rat = DATA[i] / gain ;
         let hue = Math.round((rat * 120) + 280 % 360);
         let sat = '100%';
         let lit = 10 + (70 * rat) + '%';
@@ -166,6 +167,26 @@ h1 {
 
 <img id="spectrogramimage" style="width:100%;height:100%;display:none" src="/spectrogram.png?nocache=<?php echo $time;?>">
 
+<div id="gain" class="centered">
+<label>Gain: </label>
+<span class="slidecontainer">
+  <input name="gain_input" type="range" min="0" max="255" value="128" class="slider" id="gain_input">
+  <span id="gain_value"></span>%
+</span>
+</div>
+
 <audio style="display:none" controls="" crossorigin="anonymous" id='player' preload="none"><source src="/stream"></audio>
 <h1>Loading...</h1>
 <canvas></canvas>
+
+<script>
+var slider = document.getElementById("gain_input");
+var output = document.getElementById("gain_value");
+output.innerHTML = slider.value; // Display the default slider value
+
+// Update the current slider value (each time you drag the slider handle)
+slider.oninput = function() {
+  output.innerHTML = this.value;
+  gain=Math.abs(this.value - 255);
+}
+</script>