Javafx AudioSpectrum and BarChart("Beauty bands")

I think this my third post ,showing an example of what the Javafx barchart  can achieve be styling with css to really produce beautiful visuals.
The data being used are magnitude of  128 bands  from a sound,javafx has an interface AudioSpectrumListener that receives updates of the AudioSpectrum at a default interval of 0.1seconds and a default of 128 bands. check the javafx api docs for more info.


Playing the Music

Media media=new Media(new File("file.mp3").toURI().toString());
MediaPlayer audioMediaPlayer=new MediaPlayer(media);
audioMediaPlayer.play();

The BarChart

  final CategoryAxis xAxis = new CategoryAxis();
  final NumberAxis yAxis = new NumberAxis(-50,50,10);
 
  final BarChart<String,Number>  bc = new BarChart<>(xAxis,yAxis);
        bc.setLegendVisible(false);
        bc.setAnimated(false);
        bc.setBarGap(0);
        bc.setCategoryGap(0);
        bc.setVerticalGridLinesVisible(false);
        bc.setHorizontalGridLinesVisible(false);
        bc.setHorizontalZeroLineVisible(false);
        bc.setVerticalZeroLineVisible(false);
        bc.setMaxSize(900, 400);
        bc.setMinSize(900, 400);
   
        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis,null,"dB"));
        xAxis.setTickLabelFill(Color.TRANSPARENT);
        yAxis.setTickLabelFill(Color.TRANSPARENT);

Series

You need two series for the positive and negative.

        XYChart.Series<String,Number>  series1 =new XYChart.Series<> ();
        series1.setName("Series Neg");      
        series1Data = new XYChart.Data[128];
     
        for (int i=0; i<series1Data.length; i++) {
            series1Data[i] = new XYChart.Data<>( Integer.toString(i+1),50);
            series1.getData().add(series1Data[i]);
        }
     
        bc.getData().add(series1);

Listening for Magnitude of each 128 bands

 audioMediaPlayer.setAudioSpectrumListener((double d, double d1, float[] magnitudes , float[] phases) -> {

          for(int i=0;i<floats.length;i++){

                  series1Data[i].setYValue((floats[i]+60)); //Top Series

                  series2Data[i].setYValue(-(floats[i]+60));//Bottom series
          }

        });

Styling with css

.chart{
    -fx-background-color: transparent;
}
.axis {
    -fx-tick-mark-visible: false;
    -fx-minor-tick-visible: false;
    -fx-minor-tick-length: 0;
    -fx-border-color: transparent;
}
.axis-label {
    -fx-text-fill: transparent;
}
.default-color0.chart-bar {
   -fx-background-color:linear-gradient(to top,grey,whitesmoke);
}
.default-color1.chart-bar {
  -fx-background-color:linear-gradient(to bottom,aqua,white);
}

Results






Comments

  1. While playing music it stops in between your code work but i couldn't understand why music stops?

    ReplyDelete

Post a Comment

Popular Posts