AudioParam: setValueCurveAtTime() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

setValueCurveAtTime()AudioParam 介面的一個方法,它用於安排引數值按照由一系列值定義的曲線進行變化。

該曲線是透過一個浮點數值陣列定義的序列之間的線性插值來實現的,這些值會被縮放到適合從 startTime 開始的給定時間間隔內,持續一個特定的 duration

語法

js
setValueCurveAtTime(values, startTime, duration)

引數

一個浮點數陣列,表示 AudioParam 在指定的 duration 內將要經歷的值曲線。陣列中的每個值都必須是有限的數字;如果任何值為 NaNInfinity-Infinity,則會丟擲 TypeError 異常。

startTime

一個雙精度浮點數,表示 AudioContext 首次建立後,值變化發生的時間(以秒為單位)。如果此值小於 AudioContext.currentTime,則會將其鉗制到 currentTime

duration

一個雙精度浮點數,表示引數 value 將按照指定曲線變化的總時間(以秒為單位)。指定的值在此持續時間內均勻分佈。

返回值

對該 AudioParam 物件的引用。此介面的一些舊瀏覽器實現會返回 undefined

異常

InvalidStateError DOMException

如果指定的 values 陣列包含的項少於 2 項,則丟擲此異常。

RangeError

如果指定的 startTime 為負數或非有限值,或者 duration 不是一個有限的、嚴格正數,則丟擲此異常。

TypeError

如果 values 陣列中的一個或多個值為非有限數,則丟擲此異常。非有限數包括 NaNInfinity-Infinity

用法說明

當引數值完成曲線跟隨後,其值保證會與 values 引數中指定的最後一個值匹配。

注意: Web Audio API 的一些早期實現並未確保這一點,從而導致了意外的結果。

示例

在此示例中,我們有一個媒體源,帶有一個按鈕(請參閱 webaudio-examples 倉庫獲取原始碼,或 線上檢視示例。)當按下此按鈕時,setValueCurveAtTime() 用於在 waveArray 陣列中包含的值之間更改增益值。

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

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

const valueCurve = document.querySelector(".value-curve");

// 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();
gainNode.gain.value = 0.5;
const currGain = gainNode.gain.value;

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// set button to do something onclick

const waveArray = new Float32Array(9);
waveArray[0] = 0.5;
waveArray[1] = 1;
waveArray[2] = 0.5;
waveArray[3] = 0;
waveArray[4] = 0.5;
waveArray[5] = 1;
waveArray[6] = 0.5;
waveArray[7] = 0;
waveArray[8] = 0.5;

valueCurve.onclick = () => {
  gainNode.gain.setValueCurveAtTime(waveArray, audioCtx.currentTime, 2);
};

規範

規範
Web Audio API
# dom-audioparam-setvaluecurveattime

瀏覽器相容性

Chrome 46 之前的版本使用最近鄰插值而不是線性插值。

另見