Basic Usage

Visualise and explore audio recordings in your web browser:

A New Zealand bellbird freaking out (I believe this is the scientific term)

Spectastiq is available as a web-component, which means that you can include the javascript file in the HTML page where you'd like to use it, and then embed as many times as you like using the custom <spectastiq-viewer> HTML tag.

To get started quickly, you can include spectastiq from a CDN.

<script src="https://cdn.jsdelivr.net/gh/hardiesoft/[email protected]/spectastiq.min.js"></script>
<spectastiq-viewer src="/path/to/audio/file.mp3"></spectastiq-viewer>

That's it! Spectastiq will fit itself to the parent HTML element of the <spectastiq-viewer> tag.

Examples

• Switching audio files
• Color palettes
• Drawing regions of interest
• Custom UI controls
• Use a local audio recording
• Supported attributes

Roadmap / future enhancements

• More advanced interpolation of already rendered spectrogram fragments for a smoother interactive experience.
• Unload spectastiq from memory when there are many instances of spectastiq running on a page, and an instance is outside the page viewport.
• Support displaying your spectrograms with a logarithmic scale.
• Allow other FFT window sizes. (The current default is 2048 samples)
• VueJS and React wrappers + examples.