Create visuals from sound (wav file)

Hi, i’m new here and just using Processing a little bit. Started by “messing” with existing code. : ) Now, what i’d like to do is generate statics visuals form the data contained in sound files. For exemple amplitude and frequencies.

My wish is to :

  • load a sound
  • take its values
  • transform it to forms in 2D
  • export it at a PNG or SVG

That’s it !

I’m trying with the minim library but know if it’s a good way to realize it. Any tips are very welcome.
Thanks,
P.

Hi
I do not understand why there are so many views but no reply, no questions. If i missed something, if you need some details, just tell me please. :slight_smile:
Thanks,
P.

Hello,

There are resources here including a sound library with examples:

There are tools there to get you started and help you realize and unleash your creative potential.

And there are examples that come with the Processing IDE. Check the menus.

One example:

We are all volunteers here and may be busy with our lives.
It is year end and that usually translates to a busy time for many.

Have fun!

:)

Thanks @glv for the tips. I have already read the documentation (not all) as i already coded some stuff with Processing.
Of course i understand that everybody here act as a volunteer. My question was more to know if more explanations was needed.
I continue to work on my project and will tell you how it grows.

1 Like

Hi @Pyo. I just saw this and wanted to give you my perspective. The biggest hurdle of analyzing audio is choosing which features you are going to try to extract from the signal. Most P3 audio libs have FFT support but without a deeper dive into what the data means or patterns within the data, FFT only goes so far. So it depends on what you want to extract, for example, pitch, noise, rhythm, timbre, speech, etc.
Are you looking at certain features of your audio or just using the frequency domain (FFT) information? Knowing more about the feature extraction would help in providing more information.

Hello @robertesler. Thank you for your pertinent reflection. This is a project around experimental music. I would like to use the pitch and tone of each sound, which are mainly frequencies. So I will certainly have to calculate the average or maximum pitch and tone (peak?) of each of them. Then retrieve this data to turn it into a graph.
I don’t know if I’m clear enough? : )

Though most sound libraries have some sort of support for raw FFT, it is not always the best way to get pitch information from a signal because the harmonics of a fundamental may have more energy than the fundamental making your detection provide varied results.
I don’t think Minim provides pitch analysis other than typical FFT methods and the P3 sound library is similar. I have not used Beads, but there a few more options for analysis in that library.
Personally, I implement Miller Puckette’s algorithm used in Pd4P3’s Sigmund class when trying to detect pitch, or pitch energy in a signal. I have a Processing example here:
Pd4P3/examples/Analysis/SigmundDemo - GitHub
I don’t know exactly what you mean by tone, as that can also be interpreted as pitch. Do you mean timbre or something else?
Anyway, good luck with the project!

Hi, been a long time since i came here as i was busy. But still on the project, no real change a this time. Anyway, thanks for your reply. I mean “hauteur de note” in french. I don’t know if it’s more clear. : ) I’m gonna check your example, thanks. By the way, if you have any tips…
Best

Hi, i finally find a part of solution of what i want to do in remixing different codes i’ve found.

import ddf.minim.*;
  Minim minim;
  AudioPlayer song;
  
int spacing = 20;
int border = 10;
int amplification = 10;
int y = spacing;
float ySteps;  
void setup() {  
  size(200, 200);
  background(255);
  noStroke();
  minim = new Minim(this);
  song = minim.loadFile("audio.wav");
  song.play();
}

void draw() {
  int screenSize = int((width-2*border)*(height-2*border)/spacing);
  int x = int(map(song.position(), 0, song.length(), 0, screenSize));
  ySteps = x/(width-2*border);         // calcul du nombre de lignes
  x -= (width-2*border)*ySteps;        // nouvelle posiition de x pour chaque lignes
  float frequency = song.mix.get(int(x))*spacing*amplification; 
  square(x, y*ySteps, 50);
  fill(random(x+frequency*amplification*20), (x+frequency*ySteps), (#CC6600*frequency));
}

void stop() {
  song.close();
  minim.stop();
  super.stop();
}

What i’d like to do now it’s exporting an SVG of those graphics from multiple audio files, not in realtime. I mean i got more than 400 sounds… My questions are :

  • how can i create an SVG from an animation (not frame by frame) ?
  • is there a function or something to automatise this like a script on a folder, for exemple ?

Thanks for your help, good day !

Welcome Back!

SVG Library:

Some test code I wrote:

Click here to see code!
import processing.svg.*;

boolean end = false;
PGraphics svg;

void setup() 
  {
  size(400, 400);
  background(200);
  
  svg = createGraphics(400, 400, SVG, "output.svg");
  svg.beginDraw();
  svg.background(200);
  frameRate(15); //Slow things down for this test
  }

void draw() 
  {  
  float ranX = random(width);
  float ranY = random(height);
  
  line(width/2, height/2, ranX, ranY);
  svg.line(width/2, height/2, ranX, ranY);  

  if(end)
    {
    svg.dispose();
    svg.endDraw();
    //exit();
    noLoop();
    }
  }

void keyPressed()
  {
  end = true;
  }

You will see the sketch in the main sketch window and capture it to an SVG from a PGraphics buffer with a key press.

You could have just generated this in the background but I wanted to see the progress.

This was only my initial effort… an exploration of the library with some experimentation and you may find an alternative approach.

I did get it to work with your code and generated this SVG:

image

Code could be written to do this on your 400 files.

:)

Hi @glv !
Thanks for the help, i already tried but i didn’t find the way to make it works with my code…
Here it is :

import processing.svg.*;
boolean record;

import ddf.minim.*;
  Minim minim;
  AudioPlayer song;
  
int spacing = 20;
int border = 5;
int amplification = 10;
int y = spacing;
float ySteps;
  
void setup() {
  
  size(200, 200);
  background(255);
  noStroke();
  minim = new Minim(this);
  song = minim.loadFile("audio.wav");
  song.play();
}

void draw() {

 if (record) {
    beginRecord(SVG, "img-####.svg");
  }

  int screenSize = int((width-2*border)*(height-2*border)/spacing);
  int x = int(map(song.position(), 0, song.length(), 0, screenSize));
  ySteps = x/(width-2*border);         // calcul du nombre de lignes
  x -= (width-2*border)*ySteps;        // nouvelle posiition de x pour chaque lignes
  float frequency = song.mix.get(int(x))*spacing*amplification; 
  square(x, y*ySteps, 50);
  fill(random(x+frequency*amplification*20), (x+frequency*ySteps), (#CC6600*frequency)); //choix des couleurs 1
  //fill(frequency*ySteps*200, x+10*frequency, 120*frequency); //choix des couleurs 2

if (record) {
    endRecord();
    record = false;
  }

}
void mousePressed() {
  record = true;
}


void stop() {
  
  song.close();
  minim.stop();
  super.stop();

}

Only got this result :
img-0100

By the way, and in a second time, do you have a link regarding a function to automatise ?
Thanks again !