AudioParam: setValueCurveAtTime() 方法
setValueCurveAtTime() 是 AudioParam 接口的一个方法,它用于安排参数值按照由一系列值定义的曲线进行变化。
该曲线是通过一个浮点数值数组定义的序列之间的线性插值来实现的,这些值会被缩放到适合从 startTime 开始的给定时间间隔内,持续一个特定的 duration。
语法
setValueCurveAtTime(values, startTime, duration)
参数
值-
一个浮点数数组,表示
AudioParam在指定的duration内将要经历的值曲线。数组中的每个值都必须是有限的数字;如果任何值为NaN、Infinity或-Infinity,则会抛出TypeError异常。 startTime-
一个双精度浮点数,表示
AudioContext首次创建后,值变化发生的时间(以秒为单位)。如果此值小于AudioContext.currentTime,则会将其钳制到currentTime。 duration-
一个双精度浮点数,表示参数
value将按照指定曲线变化的总时间(以秒为单位)。指定的值在此持续时间内均匀分布。
返回值
对该 AudioParam 对象的引用。此接口的一些旧浏览器实现会返回 undefined。
异常
InvalidStateErrorDOMException-
如果指定的
values数组包含的项少于 2 项,则抛出此异常。 RangeError-
如果指定的
startTime为负数或非有限值,或者duration不是一个有限的、严格正数,则抛出此异常。 TypeError-
如果
values数组中的一个或多个值为非有限数,则抛出此异常。非有限数包括NaN、Infinity和-Infinity。
用法说明
当参数值完成曲线跟随后,其值保证会与 values 参数中指定的最后一个值匹配。
注意: Web Audio API 的一些早期实现并未确保这一点,从而导致了意外的结果。
示例
在此示例中,我们有一个媒体源,带有一个按钮(请参阅 webaudio-examples 仓库获取源代码,或 在线查看示例。)当按下此按钮时,setValueCurveAtTime() 用于在 waveArray 数组中包含的值之间更改增益值。
// 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 之前的版本使用最近邻插值而不是线性插值。