Add audio taper to volume slider

diff --git a/src/littlesongplace/static/player.js b/src/littlesongplace/static/player.js
index 9c18b43fb147154d529946ba7e30eb5fd0cc18a0..d712b5eff550abd623f44927af6bebb5fa890734 100644 (file)
--- a/src/littlesongplace/static/player.js
+++ b/src/littlesongplace/static/player.js
@@ -255,6 +255,22 @@ function resetLove() {
     updateImageColors();
 }
 
     updateImageColors();
 }
 

+function clamp(x, min, max) {
+    if (x > max) return max;
+    if (x < min) return min;
+    return x;
+}
+
+// Set the playback volume from a slider position
+function setVolume(audio, slider) {
+    // Apply audio taper. Lower a = more extreme curve.
+    const a = 0.2;
+    const volExp = a * (Math.pow((1 / a + 1), slider.value) - 1);
+    const vol = clamp(volExp, 0, 1);
+    console.log(vol);
+    audio.volume = vol;
+}
+

 // Add event listeners
 var m_firstLoadPlayer = true;
 document.addEventListener("DOMContentLoaded", (event) => {
 // Add event listeners
 var m_firstLoadPlayer = true;
 document.addEventListener("DOMContentLoaded", (event) => {


@@ -262,7 +278,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
     // Sync volume with current slider position (may be reset after refresh)
     var audio = document.getElementById("player-audio");
     const slider = document.getElementById("volume-slider");
     // Sync volume with current slider position (may be reset after refresh)
     var audio = document.getElementById("player-audio");
     const slider = document.getElementById("volume-slider");

-    audio.volume = slider.value;
+    setVolume(audio, slider);

 
     // The player never gets rebuilt, so we only need to set it up the first time
     if (!m_firstLoadPlayer) {
 
     // The player never gets rebuilt, so we only need to set it up the first time
     if (!m_firstLoadPlayer) {


@@ -329,7 +345,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
     // Volume
     document.getElementById("volume-slider").oninput = function(event) {
 
     // Volume
     document.getElementById("volume-slider").oninput = function(event) {

-        audio.volume = event.target.value;
+        setVolume(audio, event.target);

     }
 
     // Show mini player on scroll
     }
 
     // Show mini player on scroll

diff --git a/src/littlesongplace/templates/news.html b/src/littlesongplace/templates/news.html
index a1b9f1aff8d546a6d0304590337d9c9f09c46caa..83ac3707756cc8cf19938bc8eec94f69bfaeb7d7 100644 (file)
--- a/src/littlesongplace/templates/news.html
+++ b/src/littlesongplace/templates/news.html
@@ -6,11 +6,18 @@
 
 <h1>site news</h1>
 
 
 <h1>site news</h1>
 

-<h2>2026-08-22 - Private Songs</h2>
+<h2>2026-08-22 - Better Volume & Private Songs</h2>

 <p>
 <p>

-You can now mark songs as private, so they will only be visible to you.  This
-works basically the same way as it does for playlists.
+This update has two parts:

 </p>
 </p>

+<ul>
+    <li>The volume slider (on desktop) now has a proper audio taper, making it
+        a little easier to find the volume you want.
+    </li>
+    <li>You can now mark songs as private, so they will only be visible to
+        you.  This works basically the same way as it does for playlists.
+    </li>
+</ul>

 
 <h2>2026-03-10 - New Email</h2>
 <p>
 
 <h2>2026-03-10 - New Email</h2>
 <p>