如何将多个处理 (.pde) 文件加载到 HTML 页面中？答案

【问题标题】：How do I load in multiple Processing (.pde) files into an HTML page?如何将多个处理 (.pde) 文件加载到 HTML 页面中？
【发布时间】：2016-12-11 03:05:42
【问题描述】：

所以我知道，使用 JS 和许多 JS 框架，您可以简单地执行以下操作将您的草图放入 html：

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

等等。

但在处理中，您执行以下操作：

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

由于它在画布内，因此您无法添加多个文件。我环顾四周并没有找到解决方案。

如果重要，我正在尝试链接声音文件。我该怎么做？

另外，我知道我可以切换到其他一些 JS 框架，例如 p5，但我宁愿留在 Processing。

【问题讨论】：

您可以在<audio> 元素或AudioContext() 处加载音频文件并使用canvas.captureStream()；见MediaStream Capture Canvas and Audio Simultaneously，Is it possible to mix multiple audio files on top of each other preferably with javascript

标签： javascript html processing

【解决方案1】：

要使用 processing.js 库在网页中加载多个 pde 文件，您可以简单地提及 data-processing-sources 标签内的所有文件。

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

要在 processing.js 中播放声音，您可以使用 java-to-javascript 绑定解决方法：

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

【讨论】：