✨ feat: Use howlerJS for audio

nestrilabs · Dec 27, 2024 · 08f2643 · 08f2643
1 parent 82c1a3b
commit 08f2643
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -41,13 +41,15 @@
     "@nestri/typescript-config": "*",
     "@nestri/ui": "*",
     "@types/eslint": "8.56.10",
+    "@types/howler": "^2.2.12",
     "@types/node": "^22.5.1",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "eslint": "8.57.0",
     "eslint-plugin-qwik": "^1.8.0",
+    "howler": "^2.2.4",
     "prettier": "3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/apps/www/src/routes/pricing/index.tsx b/apps/www/src/routes/pricing/index.tsx
@@ -1,7 +1,9 @@
-import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import { TitleSection, MotionComponent, transition } from "@nestri/ui/react";
 import { NavBar, Footer, Book } from "@nestri/ui"
 import { cn } from "@nestri/ui/design";
+import { Howl, Howler } from 'howler';
+
 //FIXME: Add a FAQ section
 // FIXME: Takes too long for the price input radio input to become responsive
 const w = 280
@@ -62,13 +64,14 @@ const convertToTitle = (value: any) => {
 
 export default component$(() => {
     const priceValue = useSignal(3)
-    const audioUrl = new URL('./cash.mp3', import.meta.url).href
-    const audio = useSignal<HTMLAudioElement | undefined>()
-
     const buttonRef = useSignal<HTMLButtonElement | undefined>()
     const bookRef = useSignal<HTMLButtonElement | undefined>()
+    const audio = useSignal<NoSerialize<Howl> | undefined>()
 
     useVisibleTask$(() => {
+        audio.value = noSerialize(new Howl({ src: ["/audio/cash.mp3"] }))
+        audio.value?.volume(0.5)
+
         buttonRef.value?.addEventListener("mouseenter", () => {
             bookRef.value?.classList.add('flip')
         })
@@ -85,6 +88,11 @@ export default component$(() => {
         }
     })
 
+    const onClick = $((v: any) => {
+        priceValue.value = Number(v.target?.value) as number;
+        audio.value?.play()
+    })
+
     return (
         <>
             <NavBar />
@@ -306,11 +314,10 @@ export default component$(() => {
                                                 class="absolute transition-all duration-200 pointer-events-none w-full -top-1 z-20 right-0 left-[--left] ">
                                                 <span class="left-0 border-[0.625rem] border-gray-600 dark:border-gray-400 shadow-sm shadow-gray-500 size-14 block z-20 bg-gray-400 dark:bg-gray-600 rounded-full -translate-x-1/2" />
                                             </div>
-                                            <audio ref={v => audio.value = v} src={audioUrl} autoplay={false} class="hidden" />
+                                            {/* <audio ref={v => audio.value = v} src={audioUrl} autoplay={false} class="hidden" /> */}
                                             <input
                                                 type="range" id="snap" min={1} max={5} step={1}
-                                                //@ts-expect-error
-                                                onClick$={async (v) => { priceValue.value = Number(v.target?.value) as number; await audio.value?.play() }}
+                                                onClick$={onClick}
                                                 //@ts-expect-error
                                                 onChange$={(v) => { priceValue.value = Number(v.target?.value) as number; }}
                                                 class="overflow-hidden absolute cursor-pointer z-30 top-0 left-0 opacity-0 h-full w-full"