Audio.setFilter()

The Audio.setFilter() method is used to apply a filter to an audio source in the Three.js library. A filter is a signal processing component that can modify the frequency content of an audio signal.

Syntax

audio.setFilter(filter);

Parameters

• filter - An instance of the Three.AudioFilter class. This represents the filter that will be applied to the audio source.

Description

The Audio.setFilter() method is used to apply a filter to an audio source in the Three.js library. This can be useful for a variety of audio processing tasks such as equalization, reverb, and distortion.

The filter parameter must be an instance of the Three.AudioFilter class. This class represents the filter that will be applied to the audio source. The Three namespace is automatically included when using Three.js, so you don't need to import it separately.

Once you have an instance of the Audio class, you can call the setFilter() method to apply the filter to the audio source.

const audio = new THREE.Audio(listener);
const filter = new THREE.AudioFilter(filterType);
// ...
audio.setFilter(filter);

Examples

Here's an example of how to use the Audio.setFilter() method to apply a low-pass filter to an audio source.

const audio = new THREE.Audio(listener);
const fftSize = 2048;
const filter = new THREE.AudioFilter('lowpass', {
    frequency: 2000,
    rolloff: -12,
    Q: 1,
    gain: 0,
});
const analyser = new THREE.AudioAnalyser(audio, fftSize);

// Set the filter to the audio source
audio.setFilter(filter);

// Play the audio source
audio.play();

// Visualize the audio data using a Three.js mesh
const mesh = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 'red' }),
);
scene.add(mesh);
const scale = new THREE.Vector3(1, 1, 1);
const position = new THREE.Vector3();
const colors = new Float32Array(fftSize / 2);
mesh.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 1));
mesh.material.vertexColors = THREE.VertexColors;
mesh.position.set(-2, 0, -5);

function render() {
    requestAnimationFrame(render);

    // Get the audio data and update the mesh
    analyser.getFrequencyData();
    for (let i = 0; i < fftSize / 2; i++) {
        colors[i] = analyser.data[i] / 255;
    }
    mesh.geometry.attributes.color.needsUpdate = true;
    mesh.scale.copy(scale);
    mesh.position.copy(position);
    mesh.translateZ(-10);
    renderer.render(scene, camera);
}
render();

In this example, we create an instance of the Audio class and an instance of the AudioFilter class. We then set the filter to the audio source using the Audio.setFilter() method.

We also create an instance of the AudioAnalyser class to get audio data from the audio source. We use this data to update a Three.js mesh that reflects the frequency content of the audio source.

See Also

• Three.Audio
• Three.AudioFilter
• Three.AudioAnalyser