⚠️Early development — Unstable

This project is in active early development. APIs, features, and build artifacts may change or break without notice. You're encouraged to try it and provide feedback, but do not expect a stable release or backward compatibility yet. If you require stability, pin to a specific commit or wait for an official release. Contributions and bug reports are welcome.

SignaVis

💡 Try it — Demo Interactive demo and a full labeling app (BirdNET detection & annotation). Try them in your browser:

DAW-like audio player (waveform + spectrogram + transport controls) as a standalone library — built for bioacoustic analysis, annotation, and embedding.

Table of contents

• signavis
  • Table of contents
  • Features
  • Install
  • Quickstart
  • Player Options
  • Usage Examples
    • ESM (Vite / Vanilla)
    • Load from URL
    • File Input
    • React
    • Vue
    • Svelte
    • CDN / IIFE
    • Streamlit (Python)
    • Jupyter Notebook
  • Demos
  • Python wrapper
  • Contributing
  • License

✨ Highlights

• Customizable spectrogram rendering — adjust scale, contrast, gain, color mapping, and more
• Synced waveform + spectrogram with zoom and scroll
• Label annotation — draw, drag, resize, undo, redo
• BirdNET suggestions — accept or discard detections in one click
• Xeno-canto integration — search, import, and enrich recordings
• Bandpass playback — listen to specific frequency regions
• Fast frequency zoom — wheel, slider, and drag controls

Install

npm i signavis

Note: signavis expects wavesurfer.js as a peer dependency (v7). Install it with:

npm i wavesurfer.js@^7

Or include wavesurfer.js from a CDN in the browser:

<scriptsrc="https://unpkg.com/wavesurfer.js@7"></script>

Or for Python:

pip install signavis

See PyPI and the python-wrapper/README.md for full Python usage.

Quickstart

import{BirdNETPlayer}from'signavis'import'signavis/style'constplayer=newBirdNETPlayer(document.getElementById('player'))awaitplayer.ready

npm ci
npm run typecheck
npm test
npm run build
npm run build:css
# Inspect what would be published
npm pack --dry-run

Publishing via CI:

• The CI workflow runs on push and for tags; it publishes when a tag matching v* is pushed.
• To enable automatic publishing to npm, add an NPM_TOKEN secret in GitHub repository settings (Settings → Secrets → Actions → NPM_TOKEN).
• Create and push a semver tag to trigger a release:

git tag -a v0.3.1 -m "release v0.3.1"
git push origin v0.3.1

The release job will build artifacts, publish to npm and PyPI, and create a GitHub Release including built files.

How to create tokens & add GitHub secrets

• NPM (automation token): create an automation token on https://www.npmjs.com/settings//tokens (Create New Token → Automation). Copy the token and add it to your repository secrets as NPM_TOKEN (Settings → Secrets → Actions → New repository secret). You can also set it via the GitHub CLI:

gh secret set NPM_TOKEN --body 'PASTE_TOKEN_HERE' -R owner/repo

• PyPI: create an API token on https://pypi.org/manage/account/#api-tokens and add it as PYPI_API_TOKEN in repository secrets. The CI uses this secret when uploading the Python package.

Packaging notes:

• The package includes model files under models/ (e.g., models/birdnet-v2.4/) — verify with npm pack --dry-run.

Player Options

Option	Type	Default	Description
viewMode	string	'both'	'both', 'waveform', 'spectrogram' — visible analysis views
transportStyle	string	'default'	'default', 'hero' — transport button style
transportOverlay	boolean	false	Centered play overlay, no toolbar height
showFileOpen	boolean	true	Show Open button and file input
showTransport	boolean	true	Show transport controls (play/pause/stop)
showTime	boolean	true	Show time display
showVolume	boolean	true	Show volume controls
showViewToggles	boolean	true	Show Follow/Loop/Fit/Reset buttons
showZoom	boolean	true	Show zoom slider
showFFTControls	boolean	true	Show FFT size, max frequency, color scheme
showDisplayGain	boolean	true	Show floor/ceiling sliders, auto contrast
showStatusbar	boolean	true	Show bottom status bar
showOverview	boolean	true	Show overview navigator
showWaveformTimeline	boolean	true	Show bottom timeline in waveform view
compactToolbar	string	'auto'	'auto', 'on', 'off' — responsive toolbar compaction
labelTaxonomy	array	see docs	Custom label presets (name, color, shortcut)
...	...	...	...

See the API section for usage examples and more details.

Usage Examples

ESM (Vite / Vanilla)

import{BirdNETPlayer}from'signavis'import'signavis/style'constplayer=newBirdNETPlayer(document.getElementById('player'))awaitplayer.ready

Load from URL

awaitplayer.loadUrl('/audio/birdsong.mp3')player.play()

File Input

constinput=document.querySelector('#audio')input.addEventListener('change',async()=>{constfile=input.files?.[0]if(!file)returnawaitplayer.loadFile(file)})

React

import{useEffect,useRef}from'react'import{BirdNETPlayer}from'signavis'import'signavis/style'exportdefaultfunctionPlayer(){constref=useRef(null)useEffect(()=>{if(!ref.current)returnconstp=newBirdNETPlayer(ref.current)return()=>p.destroy()},[])return<divref={ref}/>}

Vue

import{onMounted,onBeforeUnmount,ref}from'vue'import{BirdNETPlayer}from'signavis'import'signavis/style'constroot=ref(null)letplayeronMounted(()=>{player=newBirdNETPlayer(root.value)})onBeforeUnmount(()=>player?.destroy())

Svelte

<script>import { onMount } from'svelte'import { BirdNETPlayer } from'signavis'import'signavis/style'let ellet playeronMount(() => { player =newBirdNETPlayer(el)return () =>player.destroy() })</script>
<divbind:this={el}></div>

CDN / IIFE

<scriptsrc="https://unpkg.com/wavesurfer.js@7"></script><scriptsrc="https://unpkg.com/signavis/dist/birdnet-player.iife.js"></script><linkrel="stylesheet" href="https://unpkg.com/signavis/dist/birdnet-player.css" /><divid="player"></div><script>constplayer=newBirdNETPlayerModule.BirdNETPlayer(document.getElementById('player'))</script>

Streamlit (Python)

fromsignavisimportrender_daw_playerimportstreamlit.components.v1ascomponentscomponents.html(render_daw_player(audio_bytes), height=620, scrolling=False)

Jupyter Notebook

fromIPython.displayimportHTMLfromsignavisimportrender_daw_playerHTML(render_daw_player(audio_bytes))

Demos

• Live Demo (GitHub Pages) — component storybook with configurable stories
• Labeling App — full-featured annotation tool with BirdNET detection, Xeno-canto integration, label management and spectrogram settings (demo/labeling-app.html)
• Google Colab Demo Notebook
• Streamlit:

  streamlit run python-wrapper/demo_streamlit.py

• Gradio:

  pip install gradio
  python python-wrapper/demo_gradio.py

Python wrapper

The Python wrapper allows embedding the player in Streamlit, Jupyter, and Gradio. See python-wrapper/README.md for full usage, options, and advanced features.

Install:

pip install signavis

Docs & PyPI: https://pypi.org/project/signavis

Contributing

See the repository on GitHub and open issues/PRs: https://github.com/LimitlessGreen/SignaVis

License

GNU AGPL-3.0