use-sound
react-three-a11y
use-sound | react-three-a11y | |
---|---|---|
8 | 7 | |
2,807 | 564 | |
1.1% | 0.4% | |
5.3 | 5.9 | |
8 months ago | 2 months ago | |
JavaScript | TypeScript | |
MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
use-sound
-
Frontend resources! 🚀
UseSound: Incorporate sound effects into your React apps
-
[Question]: Play sounds inside useEffect in a multiplayer online game
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.
-
Building a Music Player in React
use-sound: This will handle the audio file. It will load, play, and pause the audio along with other features.
-
Chrome does not allow meadi autoplay since 2018 - but some websites are still able to do it. How?
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!
-
Best audio handling library for React in 2022?
use-sound
-
How to play sound on button click in Next.js app?
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.
-
How to reproduce Death Stranding UI with react and react-three-fiber
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.
-
The Only React Hook for Sound Effects You Will Ever Need
sprite allows you to use a single useSound hook for multiple sound effects. See “Sprites” below.
react-three-a11y
-
Show HN: 3D Framework for the Web. Built on Svelte and Three.js
Thanks! Threlte is "just" offering a declarative way to express Three.js. If you know how the `` component and its props and event handlers work, you can use the Three.js documentation for everything else.
Apart from that with Threlte I personally practice documentation-driven-development, so ecosystem packages are exhaustively documented. If you're missing something, let us know via an issue[1] or on Discord[2].
Accessibility is a topic we didn't care enough yet to be perfectly honest. Accessibility doesn't stop at screen readers though, it's about contrast, size, colors, motion, reachability, and so much more that we cannot provide and are a consumer topic. Naturally WebGL apps suffer from being practically invisible to screenreaders. There are workarounds[3] but essentially this has to be solved by consumers of Threlte (devs) and hopefully by browser vendors at some point in the future.
[1] https://github.com/threlte/threlte/issues
[2] http://chat.threlte.xyz
[3] https://github.com/pmndrs/react-three-a11y
-
how do you design scrolling "through" a website?
There is an accessibility library from drei: https://github.com/pmndrs/react-three-a11y
-
Making components Links (r3f/drei)
Caveat: Not the most accessible thing ever. The pmndrs crew made a tool that does this way more accessibly, this would be my production-grade recommendation: https://github.com/pmndrs/react-three-a11y
-
Is it even remotely practical to make Three.js experiences accessible? (controls/nav/text/objects/etc)
like /u/thesonglessbird said, it exists: https://github.com/pmndrs/react-three-a11y it covers screen readers, tabbing , focus indication, roles, and so on.
-
Chart.js 4.0 — new release of the popular open source charting library
That’s a bit of a cop out - React Three Fiber renders to a canvas too (obviously) and there’s a bunch of accessibility stuff in its semi-official ecosystem https://github.com/pmndrs/react-three-a11y
-
React Three Fiber and NextJS Starter Template
♿ R3F A11y
-
How to reproduce Death Stranding UI with react and react-three-fiber
To simulate the selected state you can try to use react-three-a11y. By wrapping our model with the component we will have access to hover, focus, and pressed state through useA11y() hook. We can try to display a SelectedMaterial based on the hover state for example.
What are some alternatives?
howler.js - Javascript audio library for the modern web.
awesome-react-three-fiber - 🍕 A loose collection of cool r3f links, gifs, people, stuff
gltf-pipeline - Content pipeline tools for optimizing glTF assets. :globe_with_meridians:
component-material - 🧩 Compose modular materials in React
earwurm - An easier way to use the Web Audio API for playback of UI sound effects.
a11y-twitter - Small changes to how you use Twitter to promote Tweeting in an accessible manner. For now, it will only prompt once per Tweet to add alt text to an attachment before you Tweet. Simple but effective. 😎
r3f-experiments - Experiments with React Three Fiber
VXLverse - Imagine you're playing with your favorite toy set, placing characters around, and creating fun stories with them. That's exactly what VXLverse does, but in a digital world.
react-three-fiber - 🇨🇭 A React renderer for Three.js [Moved to: https://github.com/pmndrs/react-three-fiber]