Realtime Example
This page is a working starter: start the engine, load an audio file, move the ranges, and then click View code to reveal the exact HTML and JavaScript behind the example.
import { createVoxisRealtimePlayer, effects }
from "./api/voxis-realtime.js";
const player = await createVoxisRealtimePlayer({ container: "#player-host" });Live page
This is the smallest shipped page that wires a file input, a standard audio element, and live range controls to the public Voxis realtime API. The HTML range below starts with max="4", but the JavaScript locks the real app-side gain limit to 2.0.
Press Start audio engine first. Then choose a local audio file.
Source
The HTML block below is the minimal page structure. The JavaScript block is loaded from the exact file that powers this example page.
<div id="player-host"></div>
<button id="start-engine" type="button">Start audio engine</button>
<input id="editor-file-input" type="file" accept="audio/*">
<input id="compressor-enabled" type="checkbox">
<input id="gain-range" type="range" min="0" max="4" step="0.01" value="1">
<input id="compressor-threshold-range" type="range" min="-48" max="-1" step="0.5" value="-18">
<script type="module" src="./main.js"></script>Loading JavaScript source...