处理声音 p5.js 或 processing.js答案

【问题标题】：Manipulating sound p5.js or processing.js处理声音 p5.js 或 processing.js
【发布时间】：2017-08-20 09:14:36
【问题描述】：

我花了几个小时来学习我的新手处理知识，试图将处理程序变成学生的在线等效程序。我正在寻求群众的帮助！

最大的问题是 processing.js 或 p5.js 中没有 Minim 库。换句话说，我希望下面的程序在 OpenProcessing.org 中工作。音频处理程序允许学生

我觉得我已经通过http://processingjs.org/reference/ 和https://p5js.org/reference/#/libraries/p5.sound 进行了广泛的梳理，但无济于事。

myEffect 班级正在发生大事。 process() 函数将一组样本读入内存并一次处理每个样本。我想在 openprocessing.org 中复制该功能。学生改变的线是

newSamp[j] = samp[j];

类似

newSamp[j] = samp[j] * 2;

然后解释它是如何改变声音的。

这是原始处理形式的程序：

import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;

Minim minim;
AudioPlayer song;
float[] oldSamp;
String songFileName = "BasicDrum.mp3";
final int BUFFERSIZE = 4096;

void setup()
{
  size(640,200);
  stroke(255);
  textSize(32);

  minim = new Minim(this);
  song = minim.loadFile(songFileName, BUFFERSIZE); 
  song.addEffect(new MyEffect());
  oldSamp = new float[song.bufferSize()];
  song.play(); 
}


void draw()
{
  /* Draw the Visualizer */
  background(0);
  fill(#BBBB00);
  text("Mono Channel", 50, 50);
  for (int i = 0; i < song.bufferSize() - 1; i++)
  {
    line(i, 100 + song.left.get(i)*100, i+1, 100 +song.left.get(i+1)*100);
  }
}

class MyEffect implements AudioEffect
{

  void process(float[] samp)
  {
    float[] newSamp = samp.clone();  //create a copy to alter
    int j = 0; 
    while (j < newSamp.length)
    {
      newSamp[j] = samp[j];          /* HERE is where we alter each sample */
      j = j + 1;
    }
    oldSamp = samp.clone();          //save a copy of this for later
    // we have to copy the values back into samp for this to work
    arrayCopy(newSamp, samp);
  }

  void process(float[] left, float[] right) 
  //stereo has left and right channels
  {
    float[] average = left; 
    for (int i = 0; i < left.length; i++)
      {    
        average[i] = (left[i] + right[i])/2.0;
      }
    process(average);
  }
}

感谢您提供的任何指导！

【问题讨论】：

如果你想在 p5.js 中做同样的事情，用 javascript 重写代码可能更容易。从p5.js sound examples 开始。请注意，p5 声音有一个 buffer 属性，它是一个 AudioBuffer 实例，您可以使用它来操作样本，类似于 Processing AudioEffect 的作用。
我在参考文献中找不到buffer 属性。我只能找到reverseBuffer (p5js.org/reference/#/p5.SoundFile/reverseBuffer)。您能否指出您在哪里找到了 buffer 属性？
它可能不在文档中，但您应该在浏览器中使用 JS 控制台。例如，键入 p5.SoundFile 实例的名称并查看它的属性。 buffer 应该在那里，你应该能够扩展它的属性。

标签： javascript java processing p5.js

【解决方案1】：

您将无法直接将这一行从 Processing 逐行转换为 Processing.js 或 P5.js，就像您发现 Minim 没有 JavaScript 版本一样。（嗯，有，但它已经很老了。）

（退后一步，您永远不应该尝试逐行将代码从一种语言翻译成另一种语言。）

相反，您需要做的是了解代码的作用，然后弄清楚如何用您的目标语言（在您的情况下是 JavaScript）中做到这一点。

我会从谷歌搜索“p5.js 声音”或“processing.js 声音”或“JavaScript 声音”开始。同样，您的目标是弄清楚如何在 JavaScript 中播放声音，而不是逐行重新创建 Minim。

另见：

【讨论】：