Audio components
AudioCN’s component catalogue mapped onto ftl-themes’ plain HTML and themed CSS. Values and audio-engine state come from your app; these controls never request a microphone or create an audio graph.
Meters, scale and clip
Peak fill, RMS core (--meter-rms) and peak hold; .is-gradient blends the zones; .meter-pair makes it stereo. The clip light holds until pressed.
Visualisers .visualizer
Bars rise from the bottom or mirror from the centre; idle, loading and electric states are CSS. Feed --level from your analyser.
Live, smooth and electric traces .trace
Your app writes the SVG path each frame; core styles the line, fill, centre axis and the electric glow.
Knob, fader and parameter
Slider and number stay in step; the reset button or a double-click (also on knobs and faders) restores the default. Shift-drag a knob for fine control.
Pan, mute, solo and monitor
The pan slider fills from the centre and snaps back to it near the middle; the bipolar knob does the same on a dial.
Channel rows .channel
Your browser only shares tab audio on this device.
A channel strip laid out as a row, for call and streaming apps; it stacks on phones.
Device selection .device-select
Live preview: speak to check the level.
Finding devices…
The browser will ask for permission.
Microphone access is blocked. Allow it in the site settings.
Yeti Stereo was unplugged. Pick another device.
Sound pads .pad
One-shot and hold pads are buttons (hold lights while pressed); toggle and loop pads are checkboxes, so they latch with no script. --progress fills the bottom bar; the app plays the sound and binds the key.
Waveform regions and markers
Drag a region's edges or its body; each edge is a native range input in seconds, so arrow keys nudge it by one step, Page Up and Page Down jump a tenth of the clip, and screen readers hear its time. Marker buttons seek; hover shows the time under the pointer. assets/js/controls.js keeps it all in step.
Fixed highlights and labels
A region without inputs is a fixed highlight; .is-static keeps edges but disables moving the body; span markers are labels only.
Variants and states
Fades, ghost and zoom
A cue's trim with a fade in and a fade out. Each bar's --gain is the fade's gain at that moment, so the waveform shows what will be heard; the ghost shows what the fade removes. Drag the trim edges or a fade's free edge. Zoom with the buttons, the mouse wheel to pan, a box drag, or the window in the overview: no input is ever clamped.
Fade curves
data-curve="linear"data-curve="smooth"data-curve="log"data-curve="exp"Waveform timeline
A multi-track layout composed from the existing waveform, range, transport and mute/solo controls. Clip editing, zoom, snapping and playback synchronization belong to the host app.
How the pieces fit
For a console, start with .mixer and .strip; for playback, compose .tracklist, .waveform, .scrubber and .transport. Add your engine separately and feed its values into the markup. The audio integration guide maps every AudioCN component and its hooks to an existing class or an app-owned responsibility.