leva VS use-sound

I created a GUI library, it's very useful for the visual editor and it can be very easy to generate config panel for options. If you don't know about GUI library, maybe you can checkout some other famous open source project ( dat.gui, tweakpane, leva).

Hey all! I'm writing to announce v0.1.0 of Leva.cljs. This library provides a Reagent interface to the Leva declarative GUI library. These panels can sync bidirectionally to a stateful atom or cursor. Please give the library a try via the interactive documentation notebook written with Nextjournal's Clerk. Clojars: https://clojars.org/org.mentat/leva.cljs Github: https://github.com/mentat-collective/leva.cljs cljdoc: https://cljdoc.org/d/org.mentat/leva.cljs/0.1.0 Interactive docs: https://leva.mentat.org

For the post processing I used @react-three/post-processing components, and to get the look just right I created a debug panel using Leva to adjust some values (like bokeh blur).

🎛 Leva panel for debugging

Thanks! And nope, it’s something even better - Leva

The GUI library that demo uses is pretty slick: https://github.com/pmndrs/leva

Don’t hesitate to put every configuration variable (columns, lines, layers, spacing …) for this grid in a tool like leva to make it look like what you want.

As some of you may know, sounds can only be played back after the user has interacted with the document. And this seems to be exactly where it is becoming tricky. I tried a very promising library called use-sound. However as it turns out it is currently impossible to trigger a sound effect on useEffect with this, as tracked in this issue: https://github.com/joshwcomeau/use-sound/issues/100. Somehow it works whenever the dev server hot reloads - and then it is really snappy, but I can't make it work on initial page load.

use-sound: This will handle the audio file. It will load, play, and pause the audio along with other features.

However, after a lot of experimenting, I was able to play a sound in chrome when I explicitly enabled sound for our url in the chrome site settings, but only as long as the tab was in focus it would play. I was using this react library to do so: https://www.npmjs.com/package/use-sound you can find a proof of concept on the developers website: https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/ if you scroll a bit down there will be a few things you can click that will trigger a sound - but all of them requires a browser event!

use-sound

I found this use-sound package for react when I'm trying to import audio file I'm getting this error. Cannot find the .mp3 file.

For the sounds part we’re going to create a sound manager component using useSound hook from Joshua Comeau. After that, we’re going to put our sound functions newly-created into our state so that we can everywhere in the app.

sprite allows you to use a single useSound hook for multiple sound effects. See “Sprites” below.