Switching audio source dynamically
The src attribute of the <spectastiq-viewer> tag is dynamic. You can change it
after the
page has loaded.
<script src="/path/to/spectastiq.js"></script>
<spectastiq-viewer src="/assets/audio-examples/bellbird-alarm-calls.flac" ></spectastiq-viewer>
<button class="switch-audio">bellbird-alarm-calls.flac</button>
<button class="switch-audio">mixed-nz-native-birds.flac</button>
<script>
document.querySelectorAll('.switch-audio').forEach((button) => {
button.addEventListener('click', (e) => {
spectastiq.src = e.target.innerText;
});
});
</script>
