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

Поділитися
Вставка
  • Опубліковано 20 вер 2024

КОМЕНТАРІ • 16

  • @elissitdesign
    @elissitdesign 2 роки тому +5

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

    • @elissitdesign
      @elissitdesign 2 роки тому

      Would be nice to see Z height drive the color.

    • @SuboptimalEng
      @SuboptimalEng  2 роки тому +1

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

  • @artemiosarthur
    @artemiosarthur 2 місяці тому

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

  • @flethacker
    @flethacker 2 роки тому

    really great explanation!

  • @ChatGPT4-sg5ft
    @ChatGPT4-sg5ft 4 місяці тому

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

  • @recovered_file
    @recovered_file 2 роки тому +1

    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
      @SuboptimalEng  2 роки тому

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

  • @cajadek-bups2273
    @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
      @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.

  • @napalimmi
    @napalimmi 2 роки тому

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

  • @flethacker
    @flethacker 2 роки тому

    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
      @SuboptimalEng  2 роки тому +2

      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
      @flethacker 2 роки тому +1

      @@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 ua-cam.com/video/8N5SWcf3DYg/v-deo.html

    • @SuboptimalEng
      @SuboptimalEng  2 роки тому +2

      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 😂

  • @Viezieg
    @Viezieg Рік тому +2

    is it possible to do this with live music ?