github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-12 16:55:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Use howlerJS for audio

Browse Source
This commit is contained in:
Wanjohi
2024-12-27 13:01:13 +03:00
parent 82c1a3baea
commit 08f2643dcd
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/www/src/routes/pricing/index.tsx
View File

@@ -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"