https://github.com/hardiesoft/spectastiq
A fast interactive audio spectrogram web component
https://github.com/hardiesoft/spectastiq
audio-visualizer birdsong spectrogram web-component
Last synced: 5 months ago
JSON representation
A fast interactive audio spectrogram web component
- Host: GitHub
- URL: https://github.com/hardiesoft/spectastiq
- Owner: hardiesoft
- License: mit
- Created: 2023-09-25T04:06:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-29T23:09:26.000Z (about 1 year ago)
- Last Synced: 2025-05-30T00:18:50.145Z (about 1 year ago)
- Topics: audio-visualizer, birdsong, spectrogram, web-component
- Language: JavaScript
- Homepage: http://hardiesoft.com/spectastiq/
- Size: 9.06 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# *Spectastiq* v0.10.2
An interactive spectrogram renderer and audio player, optimised for touch devices.
## Usage
*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 it using a custom HTML tag.
```html
```
That's it! *Spectastiq* will fit itself to the parent HTML element of the `` tag.
Try [the examples](https://hardiesoft.com/spectastiq/):
## Advanced integrations
You can embed *spectastiq* into your application, and extend it (for example, drawing an overlay showing regions of interest in the audio).
### Custom player UI controls
Replace the default audio player controls with your own using the `player-controls` template slot:
```html
My custom button
```
You can then write your own javascript to handle the actions your new UI elements should take.
### Events dispatched by *spectastiq*
See the `spectastiq.d.ts` file for an overview of events dispatched by spectastiq, as well as functions exposed
for the purpose of extending spectastiq with your own functionality.
## Roadmap
- More advanced interpolation of already rendered spectrogram fragments for a smoother interactive experience.
- Support displaying your spectrograms with a logarithmic scale.
- VueJS and React wrappers + examples
- Unload spectastiq from memory when there are many instances of spectastiq running on a page, and an instance is outside the page viewport.
- Allow other FFT window sizes. (The current default is 2048 samples)
## Known issues
For longer audio clips (more than 1 minute), *spectastiq* can run into issues on low-end mobile devices.
To best support longer clips, it's necessary to serve *spectastiq* from a "secure context", which means that you need to
set some headers on the files that your web-server delivers to your users.
This enables an advanced JavaScript feature called `SharedArrayBuffer`, which helps *spectastiq* to use all your
computers power to render spectrograms really fast, and also reduces memory usage which seems to otherwise trigger
browser bugs on resource-constrained mobile devices (Chrome Android on a Lenovo Tab M10 with 3GB RAM triggered this).
## Building the Rust-based WASM FFT component
You don't need to build the WASM FFT processing library to use this component – that's only required if you
want to make changes to how the audio chunks are processed into frequency distribution data.
If you *do* want to make changes:
This project was build with Rust 1.84.0
If you don't already have a Rust toolchain installed you'll need to do so using [rustup](https://rustup.rs/).
Then you'll need [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) to package things up.
Once you've got those requirements installed, you can run `wasm-pack build --target web`, and the wasm and supporting
files will appear in the `./pkg` folder.
### Acknowledgements
*Spectastiq* was made with the help of funding from the [Brian Mason](https://brianmasontrust.org/) scientific &
technical trust, and from [The Cacophony Project](https://cacophony.org.nz)