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
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.
The tool is available live on https://spectrogram-replicator.netlify.com/, but you can work on it locally via the following:
- clone the repo via
git clone git@github.com:EmNudge/Spectrogram-Replicator.git cdinto the directory and runnpm i- run
npm run devand openhttp://localhost:5000/