feat: replace mp3 sounds with cuelume; deprecate volume setting

app/apps/users/forms.py

@@ -140,7 +140,6 @@ class UserSettingsForm(forms.ModelForm):
             "date_format",
             "datetime_format",
             "number_format",
-            "volume",
             "default_account",
         ]
         widgets = {

app/templates/includes/scripts/hyperscript/sounds.html

@@ -1,20 +1,12 @@
 <script type="text/hyperscript">
 on paid if body do not include #settings-mute-sound
   js
-    volume = JSON.parse(document.getElementById('volume').textContent) / 10
+    playSound("sparkle")
-    paidSound.pause()
-    paidSound.currentTime = 0
-    paidSound.volume = volume
-    paidSound.play()
   end
 end
 on unpaid if body do not include #settings-mute-sound
   js
-    volume = JSON.parse(document.getElementById('volume').textContent) / 10
+    playSound("bloom")
-    unpaidSound.pause()
-    unpaidSound.currentTime = 0
-    unpaidSound.volume = volume
-    unpaidSound.play()
   end
 end
 </script>

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "bootstrap": "^5.3.8",
         "chart.js": "^4.5.1",
         "chartjs-chart-sankey": "^0.14.3",
+        "cuelume": "^0.1.2",
         "daisyui": "5.5.20",
         "htmx.org": "^2.0.10",
         "hyperscript.org": "^0.9.91",
@@ -1287,6 +1288,12 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/cuelume": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/cuelume/-/cuelume-0.1.2.tgz",
+      "integrity": "sha512-VxL0k9l1fyKGot3VKM+wm5Xd2K75fVeBHdNTrR1EHiqKRtD6S5Dxy/vY7hwl9gXp3QT/TIywFXUos77n39YZVQ==",
+      "license": "MIT"
+    },
     "node_modules/daisyui": {
       "version": "5.5.20",
       "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.20.tgz",

frontend/package.json

@@ -30,6 +30,7 @@
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "chartjs-chart-sankey": "^0.14.3",
+    "cuelume": "^0.1.2",
     "daisyui": "5.5.20",
     "htmx.org": "^2.0.10",
     "hyperscript.org": "^0.9.91",
@@ -47,4 +48,4 @@
   "resolutions": {
     "rollup": "npm:@rollup/wasm-node"
   }
-}
+}

frontend/src/js/htmx.js

@@ -14,11 +14,6 @@ Alpine.plugin(mask);
 Alpine.plugin(collapse);
 Alpine.start();
 
-const successAudio = new Audio("/static/sounds/success.mp3");
-const popAudio = new Audio("/static/sounds/pop.mp3");
-window.paidSound = successAudio;
-window.unpaidSound = popAudio;
-
 /**
  * Parse a localized number to a float.
  * @param {string} stringNumber - the localized number

frontend/src/js/sounds.js

@@ -0,0 +1,4 @@
+import { play } from "cuelume";
+
+
+window.playSound = play;

frontend/src/main.js

@@ -3,6 +3,7 @@ import 'vite/modulepreload-polyfill';
 import './js/bootstrap.js';
 import './js/datepicker.js';
 import './js/htmx.js';
+import './js/sounds.js';
 import './js/select.js';
 import './js/charts.js';
 import './js/autosize.js';