AudioParam Visualization

Visualization of how Web Audio API's AudioParam value changes over time.

setValueAtTime()

MDN Docs

Schedules an instant change to the AudioParam value at a precise time.

param.setValueAtTime(maxValue, startTime + duration * 0.5)

linearRampToValueAtTime()

MDN Docs

Schedules a gradual linear change in the value of the AudioParam.

param.linearRampToValueAtTime(maxValue, startTime + duration)

exponentialRampToValueAtTime()

MDN Docs

Schedules a gradual exponential change in the value of the AudioParam.

param.exponentialRampToValueAtTime(maxValue, startTime + duration)

setTargetAtTime()

MDN Docs

Schedules the start of a gradual change to the AudioParam value. Useful for decay or release portions of ADSR envelopes. The change starts at the time specified in startTime and exponentially moves towards the value given by the target parameter.

param.setTargetAtTime(maxValue, startTime, 0.15)

setValueCurveAtTime()

MDN Docs

Schedules the parameter's value to change following a curve defined by a list of values. The curve is a linear interpolation between the sequence of values defined in an array.

param.setValueCurveAtTime([
  minValue,
  minValue + (maxValue - minValue) * 0.5,
  minValue,
  maxValue,
  minValue,
], startTime, duration)

cancelAndHoldAtTime()

MDN Docs

Cancels all scheduled future changes to the AudioParam but holds its value at a given time until further changes are made using other methods.

param.linearRampToValueAtTime(maxValue, startTime + duration)
param.cancelAndHoldAtTime(startTime + duration * 0.5)

cancelScheduledValues()

MDN Docs

Cancels all scheduled future changes to the AudioParam.

param.linearRampToValueAtTime(maxValue, startTime + duration * 0.25)
param.linearRampToValueAtTime(minValue, startTime + duration * 0.5)
param.linearRampToValueAtTime(maxValue, startTime + duration * 0.75)
param.cancelScheduledValues(startTime + duration * 0.75)