How do I load in multiple Processing (.pde) files into an HTML page?

Question

So I know that with JS and a lot of JS frameworks you can simply do the following to put your sketch into html:

<script src="FirstScript.js"></script>
<script src="SecondScript.js"></script>

and so on.

But in Processing, you do the following:

<canvas id="your-id-here" data-processing-sources="Code.pde"></canvas>

Since it is inside the canvas, you can't add multiple files. I have looked around and haven't found a solution.

If it matters, I am trying to link a sound file. How can I do this?

Also, I know I could just switch over to some other JS framework, like p5, but I would rather stay in Processing.

Answer 1

In order to load multiple pde files in a webpage by using processing.js library, you can simply mention all the files inside the data-processing-sources tag.

eg <canvas id="your-id-here" data-processing-sources="file1.pde file2.pde"></canvas>

For playing sounds in processing.js you can use a java-to-javascript binding workaround:

https://funprogramming.org/141-Processing-js-with-sound-audio-I.html https://funprogramming.org/142-Processing-js-with-sound-audio-II.html