Gain slidey

ehpersonal38 · ehpersonal38 · commit d86d94e64e27 · 2022-05-24T14:53:50.000-04:00
diff --git a/homepage/style.css b/homepage/style.css
@@ -551,16 +551,19 @@ button:hover {
   width:25px !important;
   height:25px !important;
 }
+
 .relative {
   position:relative;
 }
+
 .sortbutton {
   margin-top:10px;
   font-size:x-large;
   background:#dbffeb;
   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,42 +590,52 @@ 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%);
 }
 
 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;
 }
diff --git a/scripts/spectrogram.php b/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 loop() {
       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 @@ function loop() {
 
 <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>

Original file line number	Diff line number	Diff line change
`@@ -551,16 +551,19 @@ button:hover {`
`551`	`551`	`width:25px !important;`
`552`	`552`	`height:25px !important;`
`553`	`553`	`}`
	`554`	`+`
`554`	`555`	`.relative {`
`555`	`556`	`position:relative;`
`556`	`557`	`}`
	`558`	`+`
`557`	`559`	`.sortbutton {`
`558`	`560`	`margin-top:10px;`
`559`	`561`	`font-size:x-large;`
`560`	`562`	`background:#dbffeb;`
`561`	`563`	`padding:5px;`
`562`	`564`	`box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);`
`563`	`565`	`}`
	`566`	`+`
`564`	`567`	`button.legacyview {`
`565`	`568`	`color:gray;`
`566`	`569`	`margin:5px;`
`@@ -573,6 +576,7 @@ button.legacyview {`
`573`	`576`	`transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);`
`574`	`577`	`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%);`
`575`	`578`	`}`
	`579`	`+`
`576`	`580`	`button.legacyview:hover {`
`577`	`581`	`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%);`
`578`	`582`	`}`
`@@ -586,42 +590,52 @@ button.loadmore {`
`586`	`590`	`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%);`
`587`	`591`
`588`	`592`	`}`
	`593`	`+`
`589`	`594`	`button.loadmore:hover {`
`590`	`595`	`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%);`
`591`	`596`	`}`
	`597`	`+`
`592`	`598`	`#searchterm {`
`593`	`599`	`transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);`
`594`	`600`	`}`
	`601`	`+`
`595`	`602`	`#searchterm:hover {`
`596`	`603`	`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%);`
`597`	`604`	`}`
`598`	`605`
`599`	`606`	`tr {`
`600`	`607`	`background-color:#9fe29b;`
`601`	`608`	`}`
	`609`	`+`
`602`	`610`	`.history.centered form {`
`603`	`611`	`display:flex;`
`604`	`612`	`justify-content: center;`
`605`	`613`	`}`
	`614`	`+`
`606`	`615`	`.history.centered input {`
`607`	`616`	`margin-right:5px;`
`608`	`617`	`border:0px;`
`609`	`618`	`}`
	`619`	`+`
`610`	`620`	`.centered form#views button {`
`611`	`621`	`box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);`
`612`	`622`	`margin:2px;`
`613`	`623`	`transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);`
`614`	`624`	`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%);`
`615`	`625`	`}`
	`626`	`+`
`616`	`627`	`.centered form#views button:hover {`
`617`	`628`	`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%);`
`618`	`629`	`}`
	`630`	`+`
`619`	`631`	`input {`
`620`	`632`	`box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);`
`621`	`633`	`}`
	`634`	`+`
`622`	`635`	`dialog {`
`623`	`636`	`border:none;`
`624`	`637`	`}`
	`638`	`+`
`625`	`639`	`dialog::backdrop {`
`626`	`640`	`background: repeating-linear-gradient(`
`627`	`641`	`30deg,`
`@@ -632,12 +646,14 @@ dialog::backdrop {`
`632`	`646`	`);`
`633`	`647`	`backdrop-filter: blur(1px)`
`634`	`648`	`}`
	`649`	`+`
`635`	`650`	`.centered_image_container {`
`636`	`651`	`font-size:19px !important;`
`637`	`652`	`display:inline-block;`
`638`	`653`	`position:relative;`
`639`	`654`	`margin-bottom:3px;`
`640`	`655`	`}`
	`656`	`+`
`641`	`657`	`.centered_image_container img.img1 {`
`642`	`658`	`transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);`
`643`	`659`	`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 {`
`649`	`665`	`border-radius: 5px;`
`650`	`666`	`width:unset;`
`651`	`667`	`}`
	`668`	`+`
`652`	`669`	`.centered_image_container img.img1:hover{`
`653`	`670`	`opacity:0.8;`
`654`	`671`	`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%);`
`655`	`672`	`}`
	`673`	`+`
`656`	`674`	`.centered_image_container * {`
`657`	`675`	`font-size:19px !important;`
`658`	`676`	`}`
	`677`	`+`
`659`	`678`	`.centered_image_container form {`
`660`	`679`	`margin-bottom:0px;`
`661`	`680`	`}`
	`681`	`+`
`662`	`682`	`.brbanner {`
`663`	`683`	`padding:15px;`
`664`	`684`	`background-color:rgb(159, 226, 155);`
`665`	`685`	`text-align:center;`
`666`	`686`	`font-size:large;`
	`687`	`+}`
	`688`	`+`
	`689`	`+#gain.centered {`
	`690`	`+ margin-bottom:10px;`
`667`	`691`	`}`