Search code examples
three.jsweb-audio-api

THREE.Audio filter not ramping up with linearRampToValueAtTime

I'm having a little trouble working with the linearRampToValueAtTime on a BiQuadFilter applied to a WebAudio.
The audio works ok, and the initial lowpass filter is applied.
Problem is, as soon as I use the linearRamp method to bring up the frequency, it seems to ignore the endTime parameter (or better, it's not time correctly).

Some code to explain it better.
Here's the instancing:

this.audioLoader.load( 'public/media/soundtrack-es_cobwebs_in_the_sky.mp3', buffer => {
    this.sounds.soundtrack = new THREE.Audio(this.listener);
    const audioContext = this.sounds.soundtrack.context;

    this.biquadFilter = audioContext.createBiquadFilter();
    this.biquadFilter.type = "lowpass"; // Low pass filter
    this.biquadFilter.frequency.setValueAtTime(200, audioContext.currentTime);

    this.sounds.soundtrack.setBuffer(buffer);
    this.sounds.soundtrack.setFilter(this.biquadFilter);
    this.sounds.soundtrack.setVolume(0.5);
    this.sounds.soundtrack.play();
})

Until here, everything looks ok. The sound plays muffled as needed.
Then, after a certain event, there's a camera transition, where I want the sound to gradually open up.

As a endTime parameter, I'm passing 2 seconds + the internal context delta.

this.sounds.soundtrack.filters[0].frequency.linearRampToValueAtTime(2400, 2 + this.sounds.soundtrack.context.currentTime);

Expecting to hear the ramp in two seconds, but the sound opens up immediately. What am I missing?

Solution

  • The linear ramp will be applied using the previous event as the startTime. In your case that will be audioContext.currentTime at the point in time when you created the filter. If that is sufficiently long ago it will sound as if the ramp jumps right to the end value. You can fix that by inserting a new event right before the ramp.

    const currentTime = this.sounds.soundtrack.context.currentTime;
const filter = this.sounds.soundtrack.filters[0];

filter.frequency.setValueAtTime(200, currentTime);
filter.frequency.linearRampToValueAtTime(2400, currentTime + 2);