Creating GUI for music visualizer

Sheldon96

Cant seem to find any examples on how to create a GUI for music visualizer. The GUI I want to create is just a simple one that can browse music from my computer and play music through it. And also has standard buttons like play, pause and stop. Can anyone guide me or show me some examples ??

Chrisir

can you open this link:

https://www.dropbox.com/s/wj67sk6nqylunwb/SongPlay11.zip?dl=0

?

It worked for me under Windows (with processing 1.51 I guess)

nowadays

nowadays I would use more of these though :

https://www.processing.org/reference/selectInput_.html

and

https://www.processing.org/reference/selectFolder_.html

Best, Chrisir ;-)

Sheldon96

Hey there thanks for the reply! I have an error and I dunno where is the error. Can you help me with it?

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer groove;
AudioMetaData meta;
BeatDetect beat;
float yoff = 0.0;
float slowChange;

void setup()
{
selectInput("Select a file to process:", "fileSelected");
size(640, 360, P3D);

minim = new Minim(this);

beat = new BeatDetect();
ellipseMode(CENTER);

}
void draw() 
{
background(#FFF700);
beat.detect(groove.mix);
stroke(#1A7C74);
strokeWeight(2);
{
if(keyPressed)
  {
  //happy
   for(int i = 0; i < groove.bufferSize() - 2; i++){
   slowChange = lerp(slowChange, groove.left.get(0), 0.2);
   arc(320, 180 + (50 * slowChange), 300, 200, 10, -PI, OPEN);
   }
  }
  else //sad{
  for(int i = 0; i < groove.bufferSize() - 2; i++){
     slowChange = lerp(slowChange, groove.left.get(0), 0.2);
   arc(320, 180 + (50 * slowChange), 300, 200, 0, PI, OPEN);
  }
 }

fill(#FF9E00);
ellipse(320, 180, 300, 300);

fill(#0F931F);
ellipse(270, 120, 60, 60);

fill(#19AFAE);
ellipse(370, 120, 90, 90);

fill(#1F0BDB);
beginShape();
 float xoff = 0;
  for (float x = 0; x <= width; x += 10) {
    float y = map(noise(xoff, yoff), 10, 1, 0, 300);
    vertex(x, y); 
    xoff += 0.10;
  }
  yoff += 0.10;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}

Chrisir

Line number?

What does it say?

Sheldon96

Its ok, I fixed it already, thanks. Btw, do you know how to make buttons like browse, play, pause, stop and so on like a normal music player?

Chrisir

Did you download my sketch??

It's all in there

Sheldon96

Yes I did downloaded it, but I cant open it it has many errors

Chrisir

it runs,

replace open with launch in the code

you just have to adjust the path from D://Musik

to your path, e.g. C://music

PM me your e-mail-adress when you need more

Chrisir

import java.io.File;
import ddf.minim.*;
import ddf.minim.analysis.*;

// see
// http://code.compartmental.net/tools/minim/quickstart/
// http://code.compartmental.net/minim/javadoc/
//
Minim minim;
AudioPlayer song;
AudioMetaData meta;
int songLength;
//
Button buttonPause; 
Button buttonProgressFrame; 
Button buttonProgressData;
Button buttonPrevious;
Button buttonNext;
Button buttonFolder;

// files and Co.
String pathGlobal= "";
String[] namesFiles ;
int indexFile = 0; 
// 
FFT fft;

//-------------------------------------------------------------

void setup()
{
  size(500, 500);
  //
  minim = new Minim(this);
  //
  getFolder() ;
  //
  // define buttons 
  buttonPause = new Button (  width/2-10, 65, 
    20, 20, 
    false, color (0), 
    true, color (255), 
    "||", 
    0);
  //
  buttonProgressFrame = new Button ( 10, 40, 
    width-20, 20, 
    false, color (0), 
    true, color (255), 
    "", 
    1);
  //
  buttonProgressData = new Button ( 12, 42, 
    0, 17, 
    true, color (222, 1, 1), 
    false, color (255), 
    "", 
    -1);
  //
  buttonPrevious = new Button (  width/2-70, 65, 
    20, 20, 
    false, color (0), 
    true, color (255), 
    "|<", 
    2);
  buttonNext = new Button (  width/2+50, 65, 
    20, 20, 
    false, color (0), 
    true, color (255), 
    ">|", 
    3);
  buttonFolder = new Button (  width-30, 65, 
    20, 20, 
    false, color (0), 
    true, color (255), 
    "v", 
    4);
  //
  getCurrentSong();
  //
}
//
void draw()
{
  background(0);
  //
  // show meta data 
  showMeta() ;
  //
  // show progress
  buttonProgressFrame.display(); 
  buttonProgressData.w = map(song.position(), 0, meta.length(), 0, width-24 );
  buttonProgressData.display();
  //
  // show pause button
  buttonPause.display();
  //
  showOtherScreenElements() ;
  //
} // func 

// Inputs ------------------------------------------------

void mousePressed() {
  // which button
  if (buttonPause.over()) {
    command( buttonPause.commandNumber );
  } else if (buttonProgressFrame.over()) {
    command( buttonProgressFrame.commandNumber );
  } else if (buttonNext.over()) {
    command( buttonNext.commandNumber );
  } else if (buttonPrevious.over()) {
    command( buttonPrevious.commandNumber );
  } else if (buttonFolder.over()) {
    command( buttonFolder.commandNumber );
  } else {
    println("not found");
  }
}
//
// minor tools --------------------------
//
void showOtherScreenElements() {
  //
  // first perform a forward fft on one of song's buffers
  // I'm using the mix buffer
  // but you can use any one you like
  fft.forward(song.mix);

  stroke(255, 0, 0, 128);
  // draw the spectrum as a series of vertical lines
  // I multiple the value of getBand by 4
  // so that we can see the lines better
  for (int i = 0; i < fft.specSize(); i++)
  {
    line(i, height, i, height - fft.getBand(i)*4);
  }
  //

  fill(255);
  text ( 
    "Played " 
    + strFromMillis ( song.position() )  
    + " of " 
    + strFromMillis ( songLength )  
    + ".", 
    30, 30 );
  //
  // show pause 
  if (!song.isPlaying()) {
    fill(255);
    text ("pause", width/2-17, 54);
  } // if
  //
  buttonPrevious.display();
  buttonNext.display();
  buttonFolder.display();
  //
}
//
void command(  int commandNumber  ) {
  // can execute the command number from the buttons
  switch (commandNumber) {
  case 0:
    // toggle pause 
    if (song.isPlaying()) {
      song.pause();
      buttonPause.text=">";
    } else 
    {
      song.play();
      buttonPause.text="||";
    }
    break;
  case 1:
    // progress bar: set cue 
    int newSongPosition = int ( map(mouseX, 
      buttonProgressFrame.x, buttonProgressFrame.x+buttonProgressFrame.w, 
      0, songLength ) ) ; 
    song.cue( newSongPosition );
    break;
  case 2:
    indexFile--;
    if (indexFile<0)
      indexFile=0;
    getCurrentSong() ;
    break;
  case 3:
    indexFile++;
    if (indexFile>=namesFiles.length)
      indexFile=namesFiles.length-1;
    getCurrentSong() ; 
    break;
  case 4:
    chooseFolder();
    break;
  case -1:
    // undefined
    break;  
  default:
    // error 
    println("Error 101" ) ;
    break;
  } // switch
} // func  
//
void getCurrentSong() {  
  // this loads song from the data folder
  // check if ok 
  if ( fileIsOK (namesFiles[indexFile])) {
    // stop old song if playing one 
    if (song != null) {
      song.close();
      minim.stop();
    }
    println (namesFiles[indexFile]);
    song = minim.loadFile(pathGlobal+"\\"+namesFiles[indexFile]);
    songLength=song.length();
    // load meta
    meta = song.getMetaData();
    // an FFT needs to know how
    // long the audio buffers it will be analyzing are
    // and also needs to know
    // the sample rate of the audio it is analyzing
    fft = new FFT(song.bufferSize(), song.sampleRate());
    //
    song.play();
  } // if 
  else 
  {
    println ("not ok "+ namesFiles[indexFile]);
  }
} // func 
//
void chooseFolder() {
  selectFolder("Select a folder to process:", "folderSelected");
}
//
void folderSelected(File selection) {
  if (selection == null) {
    println("Window was closed or the user hit cancel.");
  } else {
    println("User selected " + selection.getAbsolutePath());
    pathGlobal= selection.getAbsolutePath();
    getFolder();
    indexFile=0;
    getCurrentSong();
  }
}

void getFolder() {
  // get file list 
  if ( pathGlobal.equals("") )
    pathGlobal= dataPath("");
  File dir = new File( pathGlobal );  // "/Documenti/Processing/PhotoMultiPhoto/data");
  println(dir);
  //
  String[] namesFiles2 = dir.list();
  namesFiles = new String [0];
  // check all found files if they are ok 
  for (int i = 0; i < namesFiles2.length; i++) {
    // if ok 
    if (fileIsOK(namesFiles2[i])) {
      // build new array
      namesFiles = append (namesFiles, namesFiles2[i]);
    } // if 
    else 
    {
      println ("skipped "+namesFiles2[i]);
    } // else  
    println("Found "+namesFiles.length+ " songs.");
    println(namesFiles); 
    indexFile=0;
  } // for
  //
}  // func 
//
boolean fileIsOK (String name) {
  // AudioPlayer: Mono and Stereo playback of WAV, AIFF, AU, SND, and MP3 files.
  if (name==null)  return false;
  name=trim(name);
  if (name.equals("")) return false;  
  if (name.substring (  name.length()-4 ).equals (".MP3")  ) return true; 
  if (name.substring (  name.length()-4 ).equals (".mp3")  ) return true; 
  if (name.substring (  name.length()-4 ).equals (".WAV")  ) return true;
  if (name.substring (  name.length()-4 ).equals (".wav")  ) return true;
  if (name.substring (  name.length()-5 ).equals (".aiff")  ) return true;
  if (name.substring (  name.length()-3 ).equals (".au")   ) return true;
  if (name.substring (  name.length()-4 ).equals (".SND")  ) return true;
  if (name.substring (  name.length()-4 ).equals (".snd")  ) return true;
  // when no extension matched:   
  return false;
}
//
void showMeta() {
  //  
  // data for meta information 
  int ys = 115;  // y start-pos
  int yi = 16;   // y line difference 
  //
  int y = ys;
  fill(255);
  textTab("File Name: \t" + meta.fileName(), 5, y);
  textTab("Length: \t" + strFromMillis(meta.length()), 5, y+=yi);
  textTab("Title: \t" + meta.title(), 5, y+=yi);
  textTab("Author:      \t" + meta.author(), 5, y+=yi);
  textTab("Album:        \t" + meta.album(), 5, y+=yi);
  textTab("Date:      \t" + meta.date(), 5, y+=yi);
  textTab("Comment:       \t" + meta.comment(), 5, y+=yi);
  try {
    // textTab("Track:   \t  " + meta.track(), 5, y+=yi);
  } 
  catch (ArrayIndexOutOfBoundsException e) { // to do ??? 
    System.err.println("Caught ArrayIndexOutOfBoundsException:      "
      +  e.getMessage());
  } 
  finally {
    // do nothing
  }; 
  textTab("Genre:      \t" + meta.genre(), 5, y+=yi);
  textTab("Copyright:      \t" + meta.copyright(), 5, y+=yi);
  textTab("Disc:      \t" + meta.disc(), 5, y+=yi);
  textTab("Composer:      \t" + meta.composer(), 5, y+=yi);
  textTab("Orchestra:      \t" + meta.orchestra(), 5, y+=yi);
  textTab("Publisher:      \t" + meta.publisher(), 5, y+=yi);
  textTab("Encoded:      \t" + meta.encoded(), 5, y+=yi);
}
//
void textTab (String s, float x, float y)
{
  // makes \t as tab for a table for one line
  // only for 2 columns yet 
  // indent:   
  int indent = 90;
  // 
  s=trim ( s );
  String [] texts = split (s, "\t");
  s=null; 
  texts[0]=trim(texts[0]);
  text (texts[0], x, y);

  //
  // do we have a second part?
  if (texts.length>1&&texts[1]!=null) {
    // is the indent too small
    if (textWidth(texts[0]) > indent) {
      indent = int (textWidth(texts[0]) + 10);
    } // if 
    //
    texts[1]=trim(texts[1]);
    text (texts[1], x+indent, y);
  }
} // func 
//
String strFromMillis ( int m ) {
  // returns a string that represents a given millis m as hrs:minute:seconds
  float sec;
  int min;
  //
  sec = m / 1000;
  min = floor(sec / 60);  
  sec = floor(sec % 60);
  // over one hour? 
  if (min>59) { 
    int hrs = floor(min / 60);
    min = floor (min % 60); 
    return  hrs+":"+nf(min, 2)+":"+nf(int(sec), 2);
  } else 
  {
    return min+":"+nf(int(sec), 2);
  }
}
//
void stop()
{
  song.close();
  minim.stop();
  //
  super.stop();
}
// 

// =======================================================================
class Button {
  // represents a rect / button 
  float x;  // pos 
  float y;
  float w=0;  // size
  float h=0;
  // color 
  boolean hasColorFill=true;   // if it has filling 
  color colorFill;             // what is it
  //
  boolean hasColorStroke=true; // if it has an outline 
  color  colorStroke;          // what is it
  // other 
  String text="";
  int commandNumber; 
  //
  // constructor
  Button (  float x_, float y_, 
    float w_, float h_, 
    boolean hasColorFill_, color cFill_, 
    boolean hasColorStroke_, color cStroke_, 
    String text_, int commandNumber_) {
    x=x_;
    y=y_;
    w=w_;
    h=h_;
    // color fill
    hasColorFill=hasColorFill_;
    colorFill=cFill_;
    // color stroke 
    hasColorStroke = hasColorStroke_;
    colorStroke = cStroke_;
    // 
    text=text_;
    commandNumber=commandNumber_;
  } // constructor
  //
  void display () {
    if (hasColorFill)
      fill(colorFill);
    else 
    noFill();
    if (hasColorStroke)
      stroke(colorStroke);
    else 
    noStroke();
    rect(x, y, w, h);
    text(text, x+8, y+12);
  } // method 
  //
  boolean over() {
    return (mouseX>x && mouseX<x+w&& mouseY>y&&mouseY<y+h);
  } // func
  //
} // class 
//

Sheldon96

hey I got it, but then I cant seem to make the volume slider to work. Here's my code

/** ========================================================= * ==== WARNING === * ========================================================= * The code in this tab has been generated from the GUI form * designer and care should be taken when editing this file. * Only add/edit code inside the event handlers i.e. only * use lines between the matching comment tags. e.g.

 void myBtnEvents(GButton button) { //_CODE_:button1:12356:
     // It is safe to enter your event code here  
 } //_CODE_:button1:12356:

 * Do not rename this tab!
 * =========================================================
 */

public void slider1_change1(GSlider source, GEvent event) { //_CODE_:slider1:950990:
  //println("slider1 - GSlider >> GEvent." + event + " @ " + millis());
  slider1 = source;
  groove.setGain(slider1.getValueF());
} //_CODE_:slider1:950990:

public void imgButton1_click1(GImageButton source, GEvent event) { //_CODE_:imgButton1:626084:
  //println("imgButton1 - GImageButton >> GEvent." + event + " @ " + millis());
  imgButton1 = source;
  groove.play();
  ctrlscreen = 0;
} //_CODE_:imgButton1:626084:

public void imgButton2_click1(GImageButton source, GEvent event) { //_CODE_:imgButton2:537738:
  //println("imgButton2 - GImageButton >> GEvent." + event + " @ " + millis());
  imgButton2 = source;
  minim.stop();
  groove.close();
  screen = 1;
} //_CODE_:imgButton2:537738:

public void imgButton3_click1(GImageButton source, GEvent event) { //_CODE_:imgButton3:495408:
  //println("imgButton3 - GImageButton >> GEvent." + event + " @ " + millis());
  imgButton3 = source;
  groove.pause();
  ctrlscreen = 1;
} //_CODE_:imgButton3:495408:

public void imgButton4_click1(GImageButton source, GEvent event) { //_CODE_:imgButton4:390749:
  //println("imgButton4 - GImageButton >> GEvent." + event + " @ " + millis());
  imgButton4 = source;
  groove.rewind();
} //_CODE_:imgButton4:390749:



// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI(){
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.CYAN_SCHEME);
  G4P.setCursor(ARROW);
  surface.setTitle("Sketch Window");
  slider1 = new GSlider(this, 450, 270, 170, 40, 10.0);
  slider1.setLimits(0.5, 0.0, 1.0);
  slider1.setNumberFormat(G4P.DECIMAL, 2);
  slider1.setLocalColorScheme(GCScheme.GOLD_SCHEME);
  slider1.setOpaque(false);
  slider1.addEventHandler(this, "slider1_change1");
  imgButton1 = new GImageButton(this, 14, 165, 100, 60, new String[] { "playz.png", "play1.png", "playz.png" } );
  imgButton1.addEventHandler(this, "imgButton1_click1");
  imgButton2 = new GImageButton(this, 22, 253, 100, 60, new String[] { "stop0.png", "stop1.png", "stop0.png" } );
  imgButton2.addEventHandler(this, "imgButton2_click1");
  imgButton3 = new GImageButton(this, 17, 90, 100, 60, new String[] { "pause0.png", "pause1.png", "pause0.png" } );
  imgButton3.addEventHandler(this, "imgButton3_click1");
  imgButton4 = new GImageButton(this, 20, 20, 100, 60, new String[] { "rewind0.png", "rewind2.png", "rewind0.png" } );
  imgButton4.addEventHandler(this, "imgButton4_click1");
}

// Variable declarations 
// autogenerated do not edit
GSlider slider1; 
GImageButton imgButton1; 
GImageButton imgButton2; 
GImageButton imgButton3; 
GImageButton imgButton4; 

Chrisir

sorry, I don't know about the library