Share your repls and programming experiences

← Back to all posts
Reactogram
spidercatnat (1)

Reactogram


Revived an old abandoned pet project for this challenge just 3 days from the deadline! w00oo00t repl is siiik.

NOTE: Microphone won't work in an iframe, so make sure to open it in a new tab!

According to Wikipedia:

A spectrogram is a visual representation of the spectrum of frequencies of a signal as it varies with time. When applied to an audio signal, spectrograms are sometimes called sonographs, voiceprints, or voicegrams.

See the app for more :-)

The tech stack

  • Built components with React <3
  • Drew all the frequencies using the Canvas API <3
  • Made all the sounds with the Web Audio API + AudioWorklet <3
  • Captured all your frequencies with WebRTC <3
  • Got a little help from my friend Ant Design (UI Library) <3
Commentshotnewtop
amasad (1753)

Very cool, thanks for sharing!