threejs-meydajs-fftspectrum

threejs-meydajs-fftspectrum copied to clipboard

 ╭━━━┳━━━┳━━━━╮╱╱╱╱╱╱╱╱╱╱╱╱╭╮
 ┃╭━━┫╭━━┫╭╮╭╮┃╱╱╱╱╱╱╱╱╱╱╱╭╯╰╮
 ┃╰━━┫╰━━╋╯┃┃╰╯╭━━┳━━┳━━┳━┻╮╭╋━┳╮╭┳╮╭╮
 ┃╭━━┫╭━━╯╱┃┃╱╱┃━━┫╭╮┃┃━┫╭━┫┃┃╭┫┃┃┃╰╯┃
 ┃┃╱╱┃┃╱╱╱╱┃┃╱╱┣━━┃╰╯┃┃━┫╰━┫╰┫┃┃╰╯┃┃┃┃
 ╰╯╱╱╰╯╱╱╱╱╰╯╱╱╰━━┫╭━┻━━┻━━┻━┻╯╰━━┻┻┻╯
  ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱┃┃ real-time audio features extraction
  ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰╯ && FFT spectrum analyzer

demo

longstoryshort: the microphone detects the audio, meydajs extracts metrics features used to drive threejs webgl stuff.

• Start project with npm run dev
• open another tab with youtube music / bring any sound source closer to the microphone
• ✨Magic✨

What are audio features? Read here

setup

npm i

dev

(expose http://localhost:3000 )

npm run dev

build

npm run build

Tech stack

• ThreeJS
• RXJS
• MeydaJS

  Meyda is a JavaScript audio feature extraction library. It works with the Web Audio API (or plain old JavaScript arrays) to expose information about the timbre and perceived qualities of sound. Meyda supports both offline feature extraction as well as real-time feature extraction using the Web Audio API.

• Vite

todo

• [x] use InstancedMesh for FFT Spectrum
• [x] refactor with rxjs

License

MIT