Audio visualizer — ERGS Player element reference

LIVE WEB PLAYER

See it respond.

The same raylib runtime, compiled to WebAssembly. Load this example, inject MQTT messages and watch its published events.

Loading WebAssembly…

MQTT I/O

Waiting for runtime…

The browser requires a user action before the scene is loaded. Click Load demo scene first. MQTT is emulated and never leaves this page. Shaders are disabled in the web build; GPIO is hardware-only.

Plays an audio file and renders waveform, circular or particle-reactive graphics. It can also serve as the media engine for interactive_dialog.

Accepted type spellings: audiovisualiser, audiovisualizer, audio_visualiser, audio_visualizer.

Configuration

Field	Default	Description
`file`	empty	Audio asset filename
`mode`	`waveform`	`waveform`, `circle`, or `particles`
`loop`	`true`	Loop playback
`autoplay`	`true`	Start configured/new file automatically
`volume`	`1.0`	`0..1`
`gain`	`2.4`	Reactive amplitude multiplier
`smoothing`	`0.18`	Waveform smoothing
`color`, `secondary_color`, `bg_color`	—	Visual colours
`bar_gap`	`2`	Waveform gap
`circle_thickness`	`3`	Circular stroke width
`circle_radius`	`0.34`	Radius relative to element
`circle_deform`	`0.22`	Audio deformation strength
`particle_max_count`	`350`	Particle limit
`particle_emission_rate`	`140`	Base emission rate
`particle_additive`	`true`	Additive blending
`particle_center_pulse`	`true`	Draw centre pulse
`on_play`, `on_stop`, `on_finish`	empty	Action chains executed on media lifecycle events
`emitters`	default emitter	Particle emitter array

Emitter fields: offset, direction, gravity, spread_deg, rate_scale, speed_min, speed_max, size_min, size_max, lifetime_min, lifetime_max, color_start, color_end.

Copy-and-paste JSON

json

{
  "type": "audio_visualizer",
  "id": "narration",
  "pos": [0, 0],
  "size": [1920, 1080],
  "file": "welcome.mp3",
  "mode": "particles",
  "loop": false,
  "autoplay": false,
  "volume": 1.0,
  "gain": 3.2,
  "smoothing": 0.20,
  "color": "#F5D46BFF",
  "secondary_color": "#58A6FFFF",
  "bg_color": "#080C16FF",
  "on_play": "koule.switchto",
  "on_finish": "main_game_screen.switchto",
  "particle_max_count": 520,
  "particle_emission_rate": 240,
  "particle_additive": true,
  "particle_center_pulse": true,
  "emitters": [
    {
      "offset": [0, 200],
      "direction": [0, -1],
      "gravity": [0, -10],
      "spread_deg": 36,
      "speed_min": 95,
      "speed_max": 185,
      "size_min": 2,
      "size_max": 6,
      "lifetime_min": 1.5,
      "lifetime_max": 5,
      "color_start": "#F6D878FF",
      "color_end": "#58A6FF00"
    }
  ],
  "layer": 1
}

MQTT

text

ergs/rpi01/cmd/narration/open             welcome.mp3
ergs/rpi01/cmd/narration/file             welcome.mp3
ergs/rpi01/cmd/narration/play             ON
ergs/rpi01/cmd/narration/play             OFF
ergs/rpi01/cmd/narration/volume           75
ergs/rpi01/cmd/narration/mode             circle
ergs/rpi01/cmd/narration/color            #F5D46B
ergs/rpi01/cmd/narration/secondary_color  #58A6FF
ergs/rpi01/cmd/narration/bg_color         #00000000
ergs/rpi01/cmd/narration/particle_center_pulse  OFF

Published lifecycle changes:
ergs/rpi01/status/narration/event          on_play | on_stop | on_finish
ergs/rpi01/status/narration/state          playing | stopped | finished (retained)
ergs/rpi01/event/narration/on_finish       ON

open loads and starts even when static autoplay is false. file follows the component's normal autoplay setting.