Turn Spectro into a library

At the moment Spectro just builds to a demo. It should be turned into a library, with the existing demo being moved into a demo or examples folder.

I imagine the API looking something like this:

// Creates a spectrogram attached to the given canvas, provides automatic handling
// of when the canvas is resized
const canvas = document.getElementById('spectrogram-canvas');
const spectrogram = new Spectrogram(canvas);

// Change display parameters of the spectrogram
spectrogram.updateRenderSettings({
    zoom: 1.5,
    minFrequencyHz: 0,
    maxFrequencyHz: 12000,
    scale: 'mel',
    color: /* object representing a color gradient */
});

// Start recording from mic, will prompt for permissions and return a promise once
// recording has started
await spectrogram.recordFromMic();

// Play audio file, can take URL or File object with option to mute output
await spectrogram.playAudioFile(file, mute = true);

// Manual API where audio data is streamed to the spectrogram
const renderAudioBuffer = await spectrogram.streamAudio();
// Call renderAudioBuffer() each time there is an audio buffer to render, returns a
// promise
// Calling renderAudioBuffer() after a call to stop() is an error

// Stop recording from mic or playing audio file
await spectrogram.stop();

// Add event listener to handle state changes
spectrogram.addStateChangeEventListener((state) => {
    // state can be one of 'stopped', 'playing-mic', 'playing-file', or
    // 'playing-custom'
});

[calebj0seph]

@gokgozf Sorry for the late reply, haven’t really touched any of my Github projects since COVID all started. Now that I’m getting back into things, I’m hoping to make Spectro into a reusable library with an npm package while also keeping this repository maintained. I’ve started by upgrading all of the dependencies, next I’m going to be refactoring the codebase into a library while putting the current demo in a separate directory that uses the new library. No ETA yet as I haven’t worked with the code in a year, but hopefully not too long!

[rechmbrs]

@calebj0seph the sliding DFT can be used to drop m samples and pickup p samples. Most often m = p = 1.

Please contact me at rechmbrs [at] gmail [dot] com to follow on with this. I have a number of other parts to discuss. We can then bring results back here for others.

RONC