Coding a 3D Audio Waveform Visualizer with JavaScript + Three.js

[@elissitdesign]

Thank you typical Indian programmer 🤣 Fantastic tut, clear audio, great explanation. Thank you.

[@elissitdesign]

Would be nice to see Z height drive the color.

[@SuboptimalEng]

@@elissitdesign It's open source so feel free to give it a try!

[@artemiosarthur]

Nice work! But why not use an audio analyzer from Three JS by itself?

[@flethacker]

really great explanation!

[@recovered_file]

Cool ! Do you think you can change the 4 square pattern (symmetrical) by a radial one and add this visualizer to a website home page ?

[@SuboptimalEng]

Definitely! I want to add (something like) that to my Gamedex website this year.

[@ChatGPT4-sg5ft]

can webspeech audio api able to visualise waveform when i speaks instead of music

[@napalimmi]

Can I do it with old on-board graphic card?

[@flethacker]

question suboptimal - do you think i could use the webaudio api to take a sound file and detect the pauses between when someone speaks.

[@SuboptimalEng]

That’s a good question, I think it should be possible. I actually made a similar project to automatically remove silence in a video and it’s open source on GitHub if you want to check it out! (It’s called AtomicEdits.)

[@flethacker]

@@SuboptimalEng woooooooow! man, you took a shower thought i had to the next level, added an awesome UX, jumped in your time machine, did it, and .... made it open source!! much respect!! also for those reading this the genius made a youtube vid demoing it here kzbin.info/www/bejne/bn-YhIqZm5h3j8k

[@SuboptimalEng]

Haha thanks! I do want to mention that the project was a culmination of months of learning Vue + Vuex + Tailwind + Electron. Didn’t just whip it up in 2 weeks out of the blue 😂

[@cajadek-bups2273]

i'm trying to recreate this with Angular but i don't really understand where/what "time" variable is exactly , could you help me with that?

[@TheFeljoy]

The time gets passed in by requestAnimationFrame. By default this function passes "time: DOMHighResTimeStamp" into whatever it calls, which is render() in this case.

[@Viezieg]

is it possible to do this with live music ?