Search code examples
javascriptweb-audio-apitone.js

Using Tone.js to add filters to an existing audio stream

I was able to add filters to an existing audio stream using the biquadfilter but was interested in trying to use Tone.js instead. But I'm having issues connecting everything together. I keep getting a DomException when trying to connect the filter to an audioContext.

function addFilter(fq) {

    var audioCtx = new (window.AudioContext || window.webkitAudioContext);
    var mediaElem = document.getElementById('myAudioElement');

    //Tone.context = audioCtx;
    Tone.context.createMediaElementSource(mediaElem)

    const bqfilter = new Tone.Filter(fq, 'lowpass').toDestination();

    Tone.connect(bqfilter, audioCtx.destination);
    //bqfilter.chain(audioCtx.destination)
});

The error message is just DomException when I try to connect or chain the filter to the audioCtx.destination. This seems to follow most of the other examples I've found online so I'm not sure why this is throwing an exception.

*edit: included the stacktrace from the dev console

Uncaught DOMException                 Tone.js:formatted:2181 
connect     @ Tone.js:formatted:2181
To          @ Tone.js:formatted:8710
(anonymous) @ audiocontrols:983
dispatch    @ jquery.min.js:2
v.handle    @ jquery.min.js:2
Solution

  • You don't need to create your own AudioContext. You can just use the one from Tone.js. In fact that is even required. Otherwise your own AudioNode can't be connected to the one created by Tone.js.

    The following should work:

    function addFilter(fq) {
  const audioElement = document.getElementById('myAudioElement');
  const mediaElementSource = Tone.context.createMediaElementSource(audioElement);
  const filter = new Tone.Filter(fq, 'lowpass').toDestination();

  Tone.connect(mediaElementSource, filter);
});

    Please note that the AudioContext might be blocked by the browser's autoplay policy as described here: https://github.com/Tonejs/Tone.js#starting-audio.