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
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.
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
While playing music it stops in between your code work but i couldn't understand why music stops?
ReplyDelete