Spectrogram Replicator

This is a spectrogram replicator. It is an educational linguistics tool to teach about spectrograms and how they work.

A spectrogram is a different way to represent audio than a standard waveform. Frequencies shape the image, while volume colors it. By tracing over spectrograms of human speech, one can replicate the sound using sine waves.

To get more information on this specific project, check out the slides used to present this tool over at https://svelte-nyc-web-audio.netlify.com

Technologies

This project uses Svelte and Typescript. Svelte was instrumental in the ease of use the reactivity has been, while TypeScript makes refactoring much easier in general.

Usage

The tool is available live on https://spectrogram-replicator.netlify.com/, but you can work on it locally via the following:

1. clone the repo via git clone git@github.com:EmNudge/Spectrogram-Replicator.git
2. cd into the directory and run npm i
3. run npm run dev and open http://localhost:5000/