AudioParam: linearRampToValueAtTime() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The linearRampToValueAtTime() method of the AudioParam Interface schedules a gradual linear change in the value of the AudioParam. The change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.

Syntax

js
linearRampToValueAtTime(value, endTime)

Parameters

value

A floating point number representing the value the AudioParam will ramp to by the given time.

endTime

A double representing the exact time (in seconds) after the ramping starts that the changing of the value will stop.

Return value

A reference to this AudioParam object. In some browsers older implementations of this interface return undefined.

Examples

In this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) When these buttons are pressed, linearRampToValueAtTime() is used to fade the gain value up to 1.0, and down to 0, respectively. This is pretty useful for fade in/fade out effects, although AudioParam.exponentialRampToValueAtTime() is often said to be a bit more natural.

js
// create audio context
const audioCtx = new AudioContext();

// set basic variables for example
const myAudio = document.querySelector("audio");

const linearRampPlus = document.querySelector(".linear-ramp-plus");
const linearRampMinus = document.querySelector(".linear-ramp-minus");

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// Create a gain node and set its gain value to 0.5
const gainNode = audioCtx.createGain();

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// set buttons to do something onclick
linearRampPlus.onclick = () => {
  gainNode.gain.linearRampToValueAtTime(1.0, audioCtx.currentTime + 2);
};

linearRampMinus.onclick = () => {
  gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);
};

Specifications

Specification
Web Audio API
# dom-audioparam-linearramptovalueattime

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
linearRampToValueAtTime
Chrome – Full support
Chrome 14 (Release date: 2011-09-16)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Partial support
Firefox 25 (Release date: 2013-10-29)
footnote Partial support
footnote Sometimes jumps to value immediately. See bug 2011524.
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Partial support
Chrome Android 18 (Release date: 2012-06-27)
footnote Partial support
footnote Behaves like setValueAtTime(): Sets the target volume at the specified time, but doesn't ramp to it.
Firefox for Android – Partial support
Firefox for Android 25 (Release date: 2013-10-29)
footnote Partial support
footnote Sometimes jumps to value immediately. See bug 2011524.
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 6 (Release date: 2012-09-10)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Partial support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Partial support
footnote Behaves like setValueAtTime(): Sets the target volume at the specified time, but doesn't ramp to it.
WebView on iOS – Full support
WebView on iOS 6 (Release date: 2012-09-10)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

See also