Manipulating sound p5.js or processing.js

Question

I have spent hours with my novice Processing knowledge trying to turn a Processing program into an online equivalent for students. I am seeking the help of the masses!

The biggest problem is there is no Minim library in processing.js or p5.js. In other words, I would like the program below to work in OpenProcessing.org. The Audio Processing program allows students to

I feel like I have combed extensively through http://processingjs.org/reference/ and https://p5js.org/reference/#/libraries/p5.sound to no avail.

The big stuff is happening in the myEffect class. The process() function reads into memory an array of the samples and processes each of them one at a time. I would like to duplicate that capability in openprocessing.org. The line that the students alter is

newSamp[j] = samp[j];

to something like

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

and then explain how it has altered the sound.

Here is the program in original Processing form:

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);
  }
}

Thank you for any guidance you can provide!

if you want to do the same in p5.js it might be easier to re-write the code in javascript. Start with the [p5.js sound examples](https://p5js.org/examples/). Notice a p5 sounds have a `buffer` property which is an [AudioBuffer](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) instance you could use to manipulate the samples, similar to how the Processing AudioEffect does. — George Profenza, Aug 18 '17 at 21:00
I couldn't find a `buffer` property in the reference. All I could find was `reverseBuffer` (https://p5js.org/reference/#/p5.SoundFile/reverseBuffer). Could you point me to where you found the `buffer` property? — Justin Cannady, Aug 22 '17 at 14:28
It might not be in documentation, but you should have a play with the JS Console in your browser. For example, type the name of the p5.SoundFile instance and see it's properties. `buffer` should be there and you should be able to expand it's properties. — George Profenza, Aug 22 '17 at 16:05

score 1 · Answer 1 · answered Aug 18 '17 at 17:58

You aren't going to be able to directly translate this line-by-line from Processing to either Processing.js or P5.js, as like you've discovered there is no JavaScript version of Minim. (Well, there is, but it's pretty old.)

(Taking a step back, you should never try to translate code from one language to another by going line-by-line.)

Instead, what you need to do is take what the code does and then figure out how to do that in your target language (in your case, JavaScript).

I'd start by googling "p5.js sound" or "processing.js sound" or "JavaScript sound". Again, your goal is to figure out how to play sounds in JavaScript, not to recreate Minim line-by-line.

Manipulating sound p5.js or processing.js

1 Answers1