View all examples

Supported attributes

The behaviour of spectastiq can be controlled by adding various attributes to the <spectastiq-viewer> tag.

height="300" Set the height of the spectrogram and zoom region control. This does not include the height of the UI controls.

allow-fullscreen Adding this attribute adds a fullscreen toggle to the default UI controls.

frequency-scale Adding this attribute shows the frequency scale along the right side the spectrogram by default.

time-scale Adding this attribute shows the time scale along the top of the spectrogram by default.

lazy Adding this attribute means that spectastiq won't load the audio until the <spectastiq-viewer> element enters the visible viewport.

color-scheme Set the default color-scheme — must be one of plasma, viridis, inferno, grey.

<spectastiq-viewer
  src="/path/to/audio/my-audio.mp3"
  allow-fullscreen
  frequency-scale
  time-scale
  color-scheme="viridis"
  height="200"
>
<spectastiq-viewer>

View all examples