Voxis Realtime Example
Description: Minimal Voxis realtime example page with a live browser demo and a View code button for the exact HTML and JavaScript source.

Realtime Example

# Try a minimal Voxis browser page and inspect its code.

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.

Open live example Back to the guide

    import { createVoxisRealtimePlayer, effects }
      from "./api/voxis-realtime.js";

    const player = await createVoxisRealtimePlayer({ container: "#player-host" });

Live page

## Minimal HTML + JavaScript starter

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`.

Audio file Enable compressor Gain 1.00x Compressor threshold -18.0 dB

Press Start audio engine first. Then choose a local audio file.

Source

## Copy this starter

The HTML block below is the minimal page structure. The JavaScript block is loaded from the exact file that powers this example page.

### index.html

    <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>

### main.js

    Loading JavaScript source...