javascript - 是否可以在 Processing.JS 中生成正弦音调？

Question

我是一名业余音乐家，我向几乎没有或没有受过音乐教育的学童教授音乐基础知识。

我编码了 a small app in Processing.JS将西洋音阶的12个音符(A、A#、B、C、C#、D、D#、E、F、F#、G、G#)以圆圈表示，并从音阶/构造区间。

我希望能够触摸一个特定的音符名称并生成与该音符关联的正弦音(非常明显的是 A = ..., 220Hz, 440Hz, 880Hz, ...)

所以分解一下，在 Processing.JS 中，是否可以在检测到鼠标事件时生成所需频率的正弦音？如果有人能帮我解决这个问题，我就能解决剩下的问题。

需要说明的是:我不太擅长 Javascript，而且我充其量在 Processing 方面中等。我知道 Javascript 可以做这样的事情，但我不知道如何在这个 webapp 中集成这两种语言。

Answer 1

正如您所暗示的，您将不得不在 JavaScript 中执行此操作。 George 的评论很到位:您应该先通读 this page .

但基本上，要记住的是 Processing.js 会转换为 JavaScript，因此您可以直接从 Processing.js 调用 JavaScript 代码。

我首先会在谷歌上搜索“JavaScript 正弦波”之类的内容，以获得大量结果。 Tone.js似乎是一个可以做你想做的事的图书馆，但我敢肯定还有很多其他图书馆。

要使用 Tone.js 库，您需要先将其导入到 HTML 中，这与您导入 Processing.js 库的方式完全相同:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.3.10/Tone.js"></script>

然后您可以在 Processing.js 代码中使用 Tone.js:

var synth ;

void setup(){
  //create a synth and connect it to the master output (your speakers)
  synth = new Tone.Synth().toMaster();
}

void mousePressed(){
  //play a middle 'C' for the duration of an 8th note
  synth.triggerAttackRelease('C4', '8n')
}

void draw(){}

请注意，Processing.js 在进行转换时会单独保留 JavaScript 代码，因此您的最终输出只是一堆 JavaScript 代码。这就是为什么您可以像这样混合使用 JavaScript 代码和 Processing.js 代码。

但也如 George 所说，您可能应该考虑切换到 P5.js，因为 Processing.js 不再维护。

无耻的 self 推销:here是关于 Processing.js 的教程，here是一些关于 P5.js 的教程。