How to apply a low pass filter to an uploaded mp3 file

[cac2323]

Hello! I am trying to apply a low pass filter on a mp3 file the user uploads, but am unsure how to approach this. I looked at the WebAudio example, but am still having trouble applying the LPF on the wavesurfer audio. Any tips would be much appreciated!

[katspaugh]

const wavesurfer = WaveSurfer.create({
    // ...
})

wavesurfer.on('canplay', () => {  
    // Create Web Audio context
    const audioContext = new AudioContext()

    // Create a MediaElementSourceNode from the audio element
    const mediaNode = audioContext.createMediaElementSource(wavesurfer.getMediaElement())

    // Create a lowpass filter
    const filter = audioContext.createBiquadFilter()
    filter.type = 'lowpass'

    // Connect the media node to the filter
    mediaNode.connect(filter)

    // Connect the filter to the audio output
    filter.connect(audioContext.destination)
})

[cac2323]

thank you! what if i have 2 songs/waveforms playing at the same time, how would i be able to apply a low pass filter to each one individually, because having a different AudioContext for each will only make it so that one song can play at a time, right? And I am also getting this error: Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement' when using backend: 'WebAudio'. Do you know how to do this using webaudio backend?

[katspaugh]

You might want to try chatgpt or stackoverflow for this. This forum is for questions specific to wavesurfer.

[bardonadam]

How to disable/remove it after it was applied? I've tried changing it to 'allpass' but the documentation states "It Lets all frequencies through, but changes the phase-relationship between the various frequencies." and I think it's notable.

[bardonadam]

This works

function enableHighpassFilter() {
	if (!filterEnabled) {
		filterEnabled = true;
		// Disconnect the direct connection to the destination
		mediaNode.disconnect(audioContext.destination);

		// Connect the mediaNode to the filter, and the filter to the destination
		mediaNode.connect(filter);
		filter.connect(audioContext.destination);
	}
}

function disableHighpassFilter() {
	if (filterEnabled) {
		filterEnabled = false;
		// Disconnect the filter from the destination
		filter.disconnect(audioContext.destination);

		// Reconnect the mediaNode directly to the destination, bypassing the filter
		mediaNode.connect(audioContext.destination);
	}
}

[puneet-yadav]

@bardonadam I am facing the same issue did you create a element dynamically ? createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement' when using backend: 'WebAudio'.

Also were you able to get the original sound after removing the filter?