Audio sync

How to Sync with Audio

Nodalin supports real-time audio input through the Web Audio API, allowing you to create audio-reactive visuals that respond to music, voice, or any sound source.

Quick Start

1. Enable Audio Access

1. Click the Audio icon in the toolbar

1. Grant microphone permission in your browser when asked

How Google Chrome asks for audio access "microphone" permission

How the Arc browser asks for audio access "microphone" permission

Once enabled, Nodalin will automatically detect and list available audio input devices.

2. Select Your Audio Input

1. Open Audio Settings from the toolbar

2. Your available audio input devices will appear in the list

3. Select the device you want to use by clicking its radio button

4. The Audio Analyser will display a real-time frequency spectrum

3. Use Audio Nodes

1. Add an Audio node from the Streams category

2. Configure the frequency range:

   • minFreq: Minimum frequency in Hz (e.g., 100 for bass)

   • maxFreq: Maximum frequency in Hz (e.g., 1000 for mids)

3. Set the multiplier to scale the output value

4. Connect the Audio node to any property input

Example: Make a circle pulse with bass frequencies:

• Audio node: minFreq: 60, maxFreq: 250, multiplier: 300

• Connect to Circle node's radius property

• Play music and watch the circle grow with the beat

On your next session

After you’ve set up your audio settings in Nodalin, the next time you open or reload the app, you’ll see a dialog asking you to activate your last selected audio device.

This step is required by your browser as a security measure — it ensures that no audio input or microphone is activated without your explicit permission, even if you had already granted it in a previous session. Simply click Activate to continue.

Example Workflows

Multi-Band Color Control

1. Create three Audio nodes:

   • Bass: 60-250 Hz → Red channel

   • Mids: 500-2000 Hz → Green channel

   • Highs: 4000-10000 Hz → Blue channel

2. Map each to Color node's Hue, Saturation, or Luminosity

3. Create a spectrum-driven color palette

Frequency-Reactive Grid

1. Audio node for bass → Grid rows

2. Audio node for mids → Grid columns

3. Audio node for highs → Grid spacingX

4. Watch the grid morph with the music

Audio-Driven Effects Chain

1. Audio (bass) → Blur radius

2. Audio (mids) → Bloom intensity

3. Audio (highs) → Chromatic strength

4. Create dynamic, music-synced post-processing