Connecting to ToneJS

At some point you may want to connect a p5.sound.js sketch to nodes from another Web Audio library — like Tone.js for example! Other web audio libraries have different kinds of sound generators and processing units available to them. To take advantage of these new kinds of processing techniques, without completely reworking your existing p5.sound.js sketch, you can connect the two (or more!) libraries together by having them share the same AudioContext.

Think of an AudioContext as a kind of Canvas (yes, as in our p5 drawing canvas) for sound. Anything drawn to the same Canvas exists in the same frame. And in a similar fashion, any audio nodes created using the same AudioContext can be patched together in the same audio network.

The example below demonstrates how to ‘get’ the AudioContext from p5.sound.js, and share it with Tone.js. Keep in mind that both the p5.sound.js and Tone.js libraries must be present in the index.html file as shown below.

<head>
    <script src="path/to/p5.sound.js"></script>
    <script src="path/to/Tone.js"></script>
</head>

Connecting to ToneJS: Edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.