Custom UI controls

You can override the default UI controls provided by spectastiq by nesting html elements inside the <spectastiq-viewer> tag inside an element with the slot attribute set to player-controls. This will replace all default controls and you are now responsible for handling and styling the controls you provide.

I'm a custom button!

<script src="/path/to/spectastiq.js"></script>
<spectastiq-viewer src="/path/to/audio/my-audio.mp3">
  <div slot="player-controls">
    <button>I'm a custom button!</button>
  </div>
</spectastiq-viewer>