I'm trying to add filter effects to an audio stream I have playing on my website. I'm able to connect the Tone.js library to the audio stream but I'm not hearing any changes in the audio stream playing on the website. I'm not seeing any errors in the console and I've tried adjusting the filter from 50 to 5000 but nothing seems to have any effect on the audio. Do I need to set up the new Tone.Player() to actually hear the audio? If so, how do you go about setting up the Player if there is no src for the existing audio element.

    $('#testBtn').click(async function () {
        const audioElement = document.getElementById('theAudioStream');
        const mediaElementSource = Tone.context.createMediaElementSource(audioElement);
        const filter = new Tone.Filter(50, 'lowpass').toDestination();
        Tone.connect(mediaElementSource, filter);
        await Tone.start();
        console.log("Started?");
    });

The audio stream I'm trying to modify is set up from a JsSip call. The code to start the stream is as follows:

    var audioStream = document.getElementById('theAudioStream')

    //further down in code    

    currentSession.answer(options);
    if (currentSession.connection) {
        currentSession.connection.ontrack = function (e) {
          audioStream.srcObject = e.streams[0];
          audioStream.play();
        }
    }

I click the test button after the call has started so I know the audio stream is present before initializing the Tone.js Filters