WireLab: Webdeveloper

A practical workflow for web developers who start from an existing AudioLab scene and ship a self-contained interactive webpage — not a video file, not a DAW bounce, but a living page where audio, MIDI logic, and visual layers stay in sync in real time.

Starting AudioLab Scene

Your sound designer hands you a scene built around two emitters and two {{weather-2}} instances:

  • Rain bed — one emitter triggers a {{weather-2}} with every layer audible except lightning (lightning volume down). You hear constant rain, rumble, and wind.
  • Lightning hits — the other emitter feeds a {{probal-1}} before a second {{weather-2}} configured for lightning only (all other volumes down).

Result in AudioLab: continuous storm texture plus probabilistic lightning strikes. The audio side is done. Your job in WireLab is to stage the visuals, expose one meaningful control to the visitor, and export a onefile HTML page.

Patch tip: cable {{probal-1}} MIDI OUT to {{visualizer}} MIDI IN so visual triggers follow the same gated note stream as the lightning-only {{weather-2}}.

Web Developer Workflow

  1. Open the scene in AudioLab and confirm transport playback (rain steady, lightning occasional).
  2. Launch WireLab from that scene — WireLab imports the same JSON graph and headless audio runtime.
  3. Compose the 16:9 stage: background layers first, hero imagery, then reactive VFX on top.
  4. Map scene controls to on-stage sliders or hot areas (for example {{probal-1}} probability).
  5. Open Export Settings if you need splash copy or boot placeholders, then generate OneFile HTML.
  6. Deploy the saved file from your user wirelab-exports folder — it runs standalone in any modern browser.

The export embeds the scene, WireLab tile map, FRAME plugin runtimes, and mapped controls. Playback time is effectively endless; the page streams procedural motion and live audio manipulation instead of looping a heavy video.

Lightning Strike on Visualizer

Sync the bolt to the same MIDI triggers that drive the lightning-only {{weather-2}}:

  1. In WireLab, add a tile and set interaction type to frame.
  2. In the FRAME plugin picker, choose {{lightning-strike}}.
  3. Size the tile across the sky area (full width, upper half is a common choice) and place it above background layers but below opaque city art if the bolt should appear behind skyline silhouettes.
  4. In the tile dock, open Visualizer MIDI:
    • Sink — select your scene's {{visualizer}} instance.
    • Emitter — select the step emitter at the start of the ProbAL chain (the same emitter feeding {{probal-1}}).
  5. Press Play in WireLab. Each gated MIDI note that reaches {{visualizer}} fires one vertical strike with frame flash — sparse triggers read cleaner than dense 16ths.
  6. Optional: tune bolt colour and glow in the tile dock CSS table before export.

City PNG Center Stage

Your designer supplies a city PNG with a transparent sky. Use the {{image-vfx}} FRAME plugin for a static hero layer:

  1. Add another frame tile above the cloud layer and below {{lightning-strike}} if lightning should sit behind buildings.
  2. Assign {{image-vfx}} from the VFX picker.
  3. Focus the tile, open the align panel (multi-select also works), set Align to to Stage, apply horizontal and vertical center, then click Max Stage in the tile toolbar — the FRAME fills the 16:9 canvas.
  4. In the dock, use the Library button on the image control to pick the city PNG from your WireLab background library (upload the asset there first if needed).
  5. In Image appearance CSS (selector .alvfx-imagevfx-img), keep defaults or set:
    • width: 100%; height: 100%;
    • object-fit: contain; object-position: 50% 50%; — centres the city and maxes size within the tile without cropping transparency.
  6. Raise the tile z-order so the city paints above scrolling clouds but below lightning if that matches your art direction.

Clouds Behind the City

For slow-moving clouds behind the skyline, use {{endless-image}} — a horizontally scrolling library image with a seamless mirror loop:

  1. Add a frame tile at the back of the stack (lowest z-order among FRAME layers).
  2. Choose {{endless-image}} from the VFX picker, focus the tile, and click Max Stage (or resize manually across the sky band — full width, top ~40–55% of stage height works well).
  3. In the dock image control, click Library and select your clouds JPG from the user library (the same WireLab background library used for stage backgrounds).
  4. Set scroll speed and impact multiplier in the plugin controls; motion runs continuously without MIDI.
  5. In Image appearance CSS (.alvfx-endless-img), defaults already fill frame height — adjust object-position if the cloud band should sit higher behind the city PNG.

Stack order summary (back → front): {{endless-image}} clouds → {{image-vfx}} city → {{lightning-strike}} → optional UI sliders.

Lighting Probability Slider

Give visitors a single dramatic control — Lighting Probability — wired to the same {{probal-1}} knob your sound designer used:

  1. Add a tile with interaction type slider-track along the long edge (place it in a margin or footer band so it does not cover the artwork).
  2. In mapping options, bind the tile to the {{probal-1}} probability control (1–100%).
  3. Set the visible label to Lighting Probability in the tile title or export chrome.
  4. Behaviour at runtime:
    • Left (minimum) — probability at the floor; triggers almost never pass the gate — you hear and see rain without lightning.
    • Right (maximum) — every emitter trigger passes {{probal-1}}; each trigger produces a lightning strike in audio and {{lightning-strike}} VFX together.

Because WireLab writes mapped values into the live scene graph during playback and onefile export, the slider manipulates real MIDI gating — not a cosmetic video overlay.

Export as Webpage

  1. Save your WireLab layout (tiles, mappings, backgrounds persist per browser storage).
  2. Optional: open Export Settings to edit splash HTML shown before the stage loads.
  3. Run OneFile HTML export. The server bundles headless AudioLab playback, your tile map, FRAME plugins, library image URLs, and mapped controls into one file under wirelab-exports.
  4. Host that HTML on any static server or drop it into your site template. No Node build step, no video CDN bill — the page boots, plays rain indefinitely, and reacts to user input.

Why This Is Unique

Most web experiences force a trade-off: either a lightweight page with fake motion, or a heavy MP4 loop that cannot respond to the visitor. WireLab onefile export breaks that pattern.

  • Endless playback — procedural clouds, generative storm audio, and MIDI-driven VFX do not hit a timeline end card; the scene runs until the tab closes.
  • Minimal file size — you ship HTML, compact runtimes, and a few library images — not hundreds of megabytes of pre-rendered 4K video.
  • Real-time audio manipulation — rain, rumble, and gated lightning are synthesized live through the same Web Audio graph used in the editor.
  • AV sync without video — lightning flash, scrolling clouds, and storm audio share one clock; nothing depends on frame-accurate video seeks.
  • True interactivity — sliders rewrite scene parameters during playback. Probability, mix levels, and CV-exposed controls respond immediately.
  • Many media types, one page — sample engines, MIDI modifiers, CV utilities, DOM-captured FRAME plugins, library bitmaps, and exported HTML coexist in a single deliverable. No other browser tool chains this many layers into one interactive artifact.

For agencies and product teams, that means ambient microsites, album launch pages, and branded weather widgets that feel alive — built by a web developer who never opened a video editor.

Related: WireLab GUI Guide · WireLab VFX Plugins · AudioLab Components