javascript - exponentialRampToValueAtTime 不能防止在 firefox 中破解

Question

当我播放一个音调然后停止时，会听到令人不快的“噼啪声”以及开头和结尾。我搜索了一个解决方案，发现随着时间的推移减少音量应该可以解决这个问题。

因此，我使用AudioGainMode 来增加和减少音频，而不是突然切断音频:

controlGain.gain.exponentialRampToValueAtTime(
    1,
    gAudioCtx.currentTime+time_milliseconds/1000
 );
// and later...
controlGain.gain.exponentialRampToValueAtTime(
    0.0001,
    gAudioCtx.currentTime+time_milliseconds/1000
 );

因为指数函数未在 0 处定义，所以使用 0.0001 代替。

但是，在 Firefox 中，我仍然可以听到令人讨厌的爆裂声。我还注意到使用更长的延迟没有效果 - 增益立即达到目标值。

function sleep(ms) {
    return new Promise(function (resolve, reject) {
        setTimeout(resolve, ms);
    });
}
function play() {
const AUDIO_RAMP_DELAY = 50;


var gAudioCtx = new AudioContext();
const controlGain = gAudioCtx.createGain();
controlGain.gain.value = 0.00001;
/// Full volume at t+50ms
controlGain.gain.exponentialRampToValueAtTime(
    1,
    gAudioCtx.currentTime+AUDIO_RAMP_DELAY/1000
 );
controlGain.connect(gAudioCtx.destination);

var osc = gAudioCtx.createOscillator();


// create a tone around 440hz
const length = 1024;
var real = new Float32Array(length);
var imag = new Float32Array(length);
real[440]=1;
//real[512]=1;
var wave = gAudioCtx.createPeriodicWave(real, imag, {disableNormalization: true});
osc.frequency.value = 1;
osc.setPeriodicWave(wave);
osc.connect(controlGain);
osc.start();

(async function() {
    await sleep(AUDIO_RAMP_DELAY+1);
    // now we're at full volume, wait another 2 seconds
    await sleep(2000);
    controlGain.gain.exponentialRampToValueAtTime(
        0.00001,
        gAudioCtx.currentTime+50/1000
    );
    await sleep(2000);
    osc.stop();
    document.querySelector("button").disabled = false;
})();
}

<h2>Warning: this demo makes loud sounds!</h2>
<button onclick="play(); this.disabled=true">Click to play</button>

如何让它在 firefox 中也能正常工作？

Answer 1

我也注意到 exponentialRampToValueAtTime() 在 Firefox 中似乎没有按预期工作。对我来说，这似乎是一个不正确的实现。

解决方法是使用 linearRampToValueAtTime反而。

或者你也可以使用 setValueCurveAtTime定义自己的曲线。