Awesome Open Source
Awesome Open Source

ğŸŽ¶ Spectro

Spectro is a real-time audio spectrogram generator for the web. It can visualise sound from your microphone or audio files on your device.

Screenshot of Spectro

💻 Usage

Head here to start using Spectro.

To start generating a spectrogram, you can either:

  • Click the ğŸŽ¤ Record from mic button to start generating a spectrogram from your microphone.

    If you want to record audio from your device's audio output, you can enable 'Stereo Mix' on Windows or use BlackHole on macOS and then set this device as your browser's default input device.

  • Click the ğŸŽµ Play audio file button to start generating a spectrogram from an audio file on your device. This will also play the selected audio file.

    Any audio format supported by your browser can be played.

The spectrogram generates from right to left, with the most recent audio appearing on the right and oldest on the left.

There are also ⚙ Options available to control the appearance of the spectrogram:

  • 🔊 Sensitivity controls how sensitive the spectrogram is to the audio. Changing it has the same effect as changing the volume of the audio.
  • 🌗 Contrast applies logarithmic scaling to the spectrogram to add contrast to the image. Changing it can help produce a better image depending on the audio being analysed.
  • 🔍 Zoom controls how zoomed in the spectrogram appears along the time axis.
  • 📈 Min. and max. frequency control the range of frequencies to display on the spectrogram. Lower frequencies appear at the bottom of the spectrogram, and higher frequencies at the top.
  • ğŸŽ¹ Frequency scale controls the scaling to apply to the frequency axis of the spectrogram. 'Linear' means all frequencies are represented evenly, while 'Mel' gives a more natural appearance by giving more weight to lower frequencies.
  • 🌈 Colour controls the colour scheme to display the spectrogram with.

You can click the ⏹ Stop button to stop generating the spectrogram. If playing an audio file, the spectrogram will automatically stop at the end of the track.


What is a spectrogram?

A spectrogram is an image produced from sound. It visualises the frequencies present in sound over time, with time represented along the horizontal axis, frequency along the vertical axis, and the loudness of the frequency by colour.

For example if you were to generate a spectrogram of yourself whistling, you would see a bright line at the pitch of the whistle.

What browsers does Spectro work with?

The latest versions of Chrome, Firefox and Safari all work with Spectro. Any other Chromium based browser like the new version of Microsoft Edge should also work.

How does Spectro work?

Here's a blog post describing it all! A quick overview:

  • The audio input is broken into frames of 4096 samples, which are overlapped every 1024 samples. I chose 4096 as my window size as it seemed to be the best trade-off between time and frequency resolution – eventually I might make it configurable.
  • These overlapping frames are then windowed using a seven-term Blackman-Harris function, which I decided on as it seemed to give the most visual clarity.
  • The windows are then run through a Fast Fourier transform (using jsfft) in a dedicated web worker, and the norm of each frequency bin is taken as the basis of the spectrogram.
  • This raw spectrogram data is then inserted into a circular queue, which has capacity equal to the width of the spectrogram image.
  • The raw spectrogram data is then rendered to the screen with WebGL, using a shader to quickly perform all of the scaling, colourisation and other image adjustments directly on the GPU. Only new raw spectrogram data is uploaded to the GPU each frame to improve performance instead of doing a full upload.
  • The settings panel uses React and Material-UI (which accounts for most of the bundle size ğŸ˜ž).

👩‍💻 Development

Install dependencies:

npm install

Start webpack-dev-server:

npm start

Build a production bundle:

npm run build

Perform Typescript type checking:

npm run type-check

📘 Licence

Spectro is released under the terms of the MIT Licence.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,034) 
typescript (10,371) 
react (5,159) 
web (956) 
material-design (643) 
audio (619) 
webgl (386) 
app (374) 
material-ui (210) 
application (137) 
sound (114) 
dsp (86) 
fft (43) 
microphone (30) 
audio-visualizer (28) 
spectrogram (16) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210