╭━━━┳━━━┳━━━━╮╱╱╱╱╱╱╱╱╱╱╱╱╭╮
 ┃╭━━┫╭━━┫╭╮╭╮┃╱╱╱╱╱╱╱╱╱╱╱╭╯╰╮
 ┃╰━━┫╰━━╋╯┃┃╰╯╭━━┳━━┳━━┳━┻╮╭╋━┳╮╭┳╮╭╮
 ┃╭━━┫╭━━╯╱┃┃╱╱┃━━┫╭╮┃┃━┫╭━┫┃┃╭┫┃┃┃╰╯┃
 ┃┃╱╱┃┃╱╱╱╱┃┃╱╱┣━━┃╰╯┃┃━┫╰━┫╰┫┃┃╰╯┃┃┃┃
 ╰╯╱╱╰╯╱╱╱╱╰╯╱╱╰━━┫╭━┻━━┻━━┻━┻╯╰━━┻┻┻╯
  ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱┃┃ 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✨

About audio features read here

setup

npm i

dev

(expose http://localhost:3000 )

npm run dev

build

npm run build

Tech stack

• ThreeJS - 3D graphics and WebGL rendering
• RXJS - Reactive programming and async handling
• MeydaJS - Real-time audio feature extraction

  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 - Build tool and development server
• Tweakpane - GUI controls and parameter tweaking
• ESLint - Code linting and formatting
• Prettier - Code formatting

License

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).

See LICENSE.md