CODEWITHSUNDEEP
javascriptjavaprocessingp5.js
Justin Cannady
Justin Cannady

Reputation: 21

Manipulating sound p5.js or processing.js

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!

Upvotes: 2

Views: 926

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42174

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.

See also:

Upvotes: 1

Related Questions