将带有音频的处理草图导出到 JavaScript答案

【问题标题】：Exporting a Processing sketch with audio to JavaScript将带有音频的处理草图导出到 JavaScript
【发布时间】：2013-05-28 14:45:11
【问题描述】：

当我将草图导出到 JavaScript 时，如何在我的处理草图中实现声音？

我在 Processing 中写了一个草图，其中包括两个音频 (.wav) 循环。这些循环通过Movie 类在mousePressed() 和mouseDragged() 上播放。草图在普通/Java 模式下工作，但在更改为 JavaScript 模式时不会加载。当我移除声音时，草图仅在 JavaScript 模式下有效。

我注意到使用Movie 类的其他草图以及Minim 等库的草图示例在我将它们导出到JavaScript 时无法加载，所以我认为这是我的实现而不是实际的问题代码。

我计划最终通过 iPad 上的 Safari 使用草图。

提前致谢。

【问题讨论】：

标签： processing processing.js minim

【解决方案1】：

对于 minim，您可以使用相对简单的 shim，例如 https://github.com/Pomax/Pjs-2D-Game-Engine/blob/master/minim.js - 在加载任何草图之前将其作为普通 JS 脚本包含在您的页面上，并且您的草图不会抱怨 minim 是一个未知的东西。

因为 Processing.js 将你的草图编译成原生 JavaScript，像 Minim 这样的全局对象也可以简单地在 JavasScript 中模拟：只要你为 Minim 调用的函数在你的 JS“shim”中定义，事情应该可以工作很好。

更笼统地说，由于 Processing 库是预编译的 Java VM 字节码，Processing.js 无法加载它们，因此任何导入语句都会被忽略。

【讨论】：

谢谢迈克。我现在使用 Minim 来播放音频。它在普通/Java 模式下工作，但在 JavaScript 模式下仍然不工作。我确保添加 minim.js 并在 index.html 中引用它，并更改 .pde 代码以匹配 shim 的代码——所以我为 Minim 调用的所有函数都在 JS shim 中定义（例如trigger() 更改为play()，AudioSample 更改为AudioPlayer）。我也关注了这个人所做的事情——他们似乎已经让包装器工作了：dineyin.com/ChickenCrossing。我错过了一些简单的东西吗？再次感谢。
您的页面加载了 minim.js 两次，这实际上不是问题，但仍然是您想要修复的问题。您还想摆脱那个 IE 条件代码 - 只需使用实际的 JS 功能测试：<script>if(!document.createElement("canvas").width) { /* no canvas */ }</script>。你也只需要一个@pjs preload="image1, image2, image3, etc"。然后对于实际的答案：它在 Chrome 和 Firefox 中运行良好，但在不支持 .ogg 的 IE 中运行良好 - shim 根据支持的内容尝试 .mp3 和 .ogg，所以只需添加 .mp3 副本，它应该工作。
感谢您的帮助。我已经让 Minim 现在在浏览器中工作了。