FX INTRODUCTION / 01

Gain: multiply the waveform

Start with Gain: make the sound louder or quieter.

This chapter covers Gain multipliers, their effect on the waveform, and the basics of writing your own liveFx.

1. Listen first

Play a YM2612 sine wave for two beats, then rest for half a beat.

Each loop uses cycle([0.25, 0.5, 1.0]) to cycle through Gain values. Change the array to compare. Zero is silence; 1 leaves the amplitude unchanged in this effect.

In the iframe, use Run to start and Stop to stop. After editing values during playback, use Apply to apply them. Stop the other Playground before comparing; each has an independent audio environment.

After pressing Run, use FX Monitor to select none, choose Oscilloscope in View, and set Y to 1 to keep the vertical range fixed. When loudness changes, the waveform height changes too. Auto adjusts the display range to the sound, so use a fixed range when comparing levels.

Open this code in a separate Playground tab ↗

2. Change the waveform height

In the first example, changing Gain changed the loudness. FX Monitor also shows a change in waveform height.

Audio data contains values for successive points on a waveform. Gain multiplies each of these values by the same factor.

Output value = input value × Gain

For example, at Gain 0.5, 0.2 becomes 0.1 and −0.2 becomes −0.1. Both the upper and lower parts of the waveform move toward zero.

Input valueGainOutput value
0.20.50.1
−0.20.5−0.1
0.200

Gain 1 leaves the waveform unchanged; 0.5 halves its height; 0 produces silence.This waveform height is called amplitude.

Halving the height is not the same as hearing half the loudness. Compare 0.25, 0.5, and 1.0 while looking at the waveform and listening.

3. Write the same multiplication with liveFx

There are two audio channels: left and right. This code applies the same multiplication to the audio data in both.

output[ch][i] = input[ch][i] * context.gain;

context contains settings passed to audio processing; state holds history for the next call. Gain does not use past audio, so state can remain empty.

Open this code in a separate Playground tab ↗

  1. Press Run, then use FX Monitor to select gain-lab as the target.
  2. Blue is input; orange is output. Gain cycles through 0.25 → 0.5 → 1.0. At 0.5, output height is halved; at 1.0, output overlaps the input.
  3. Return to Code, change the cycle array in the loop to [1.0], and Apply. The Monitor waveforms should overlap.
  4. Also try 0.25 and 0. Spectrum peaks keep their positions while their strength changes.

The initial context provides starting values. Use fx.updateContext("gain-lab", …) inside the loop to update the audio processor settings. This example also plays for two beats and rests for half a beat.

The display shows a short slice of audio, so the waveform may move horizontally between frames. Compare input and output at the same time position.

The built-in Gain also smooths parameter changes. This minimal example changes values immediately, so updates can click. liveFx output is currently limited to −1 through 1.

Next: change Gain over time

Instead of a constant factor of 0.5, alternate between 1 and 0 to chop the sound.

2. Continue to Slicer →