Creating GUI for music visualizer

edited November 2016 in Library Questions

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 ??

Answers

  • edited November 2016

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

  • 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);
    }
    
  • Line number?

    What does it say?

  • 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?

  • Did you download my sketch??

    It's all in there

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

  • 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

  • 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 
    //
    
  • edited December 2016

    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; 
    
  • sorry, I don't know about the library

Sign In or Register to comment.