Host applications for the <latency-test> Web Component (@adasp/latency-test) — a tool that measures browser round-trip audio latency using an MLS signal and cross-correlation.
Everything in this repository consumes the published npm package (or CDN build) — never the component's local source. Two tiers:
One small app per framework, mirroring the corresponding docs example page and verifying it end-to-end against the installed published package.
| Framework | Live demo | StackBlitz | |
|---|---|---|---|
 |
Vanilla JS (npm) | live | open |
|
Vanilla JS (CDN) | live | — |
 |
React | live | open |
 |
Vue | live | open |
 |
Svelte | live | open |
 |
Angular | live | open |
 |
Next.js | live | open |
StackBlitz works fully in Firefox (mic permission included), and in Chrome for Angular. The other five apps fail in Chrome due to a WebContainer native-bindings incompatibility: Vite/Rolldown (Vanilla JS, React, Vue, Svelte) and Turbopack (Next.js) both require native bindings unavailable in WebContainers — unrelated to this project.
All 6 apps verified against @adasp/latency-test@1.2.0. Full results, environment, and findings: VERIFICATION.md.
| Framework | Dev | Prod build | Date |
|---|---|---|---|
| Vanilla JS (npm + CDN) | ✓ | ✓ | 2026-06-15 |
| React | ✓ | ✓ | 2026-06-15 |
| Vue | ✓ | ✓ | 2026-06-15 |
| Svelte | ✓ | ✓ | 2026-06-15 |
| Angular | ✓ | ✓ | 2026-06-16 |
| Next.js | ✓ | ✓ | 2026-06-16 |
Use verify.sh at the repo root to wire a harness into any example app for a manual
browser check session and clean up automatically when done. See verification/README.md for usage and the script's self-test checklist.
./verify.sh <framework> # vanilla-js | react | vue | svelte | angular | nextjs
Quarantined until Tier 1 is complete: no work happens in
demos/— not even scaffolding — until the verification record above is fully passed and Phase 6 is signed off in the component repo: idsinge/latency-test#30.
Small multitrack editors demonstrating that the measured round-trip latency can align a recording: a default metronome track is recorded through the microphone while wearing headphones — uncompensated, the recording lands late by the round-trip latency (audible flam, visible waveform offset); after running the latency test, the measured value shifts the recording into alignment.
Reference implementation: the Hi-Audio fork of waveform-playlist, which already applies a measured latency value to recorded tracks (MediaRecorder-based).
| Demo | Target library | Status |
|---|---|---|
| waveform-playlist (React) | naomiaro/waveform-playlist | planned |
| dawcore (Web Components) | @dawcore/* migration spec |
planned |
| openDAW | andremichelle/openDAW | stretch goal |
| WAM Online Studio | Brotherta/wam-studio | stretch goal |
Each app is self-contained: cd into its folder and follow its own README. Bootstrap a fresh scaffold with npm install; verification runs use npm ci once the lockfile exists (this is what the registry-consumption check requires). All apps require a microphone and run on localhost or HTTPS.
This project is developed as part of Hybrid and Interpretable Deep Neural Audio Machines, funded by the European Research Council (ERC) under the European Union's Horizon Europe research and innovation programme (grant agreement No. 101052978).
Component source, API documentation, research background, full citation, and acknowledgments are in the component repository.