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 之前的版本使用最近邻插值而不是线性插值。

另见