Geek Culture
Published in

Geek Culture

Images and Sounds in JavaFX applications

There are many ways of displaying images and playing sound files in java applications. We are going to look at short application that uses classes Image and ImageView for images:

and AudioClip for sounds:

We are going to use InteliJ Idea that was set up for JavaFX project. For that instructions outlined here were followed:

When following steps outlined in the above reference in the VM options in addition to listed options, we added:

javafx.media

that way VM options field looks like this:

— module-path /path/to/javafx/sdk — add-modules javafx.controls,javafx.fxml,javafx.media

Where /path/to/javafx/sdk was the path the lib directory of the downloaded JavaFX SDK distribution.

We are going to create the object of Image class using the name of image file as argument. We need to use the prefix

file:

before the name of the image file. We are also going to resize the image, to certain width and height, while setting preferences to retaining the height/width ration and quality/speed of filtering:

Image imageFile = new Image("file:rain.jpeg", 300,200,false,false);

After loading our image, we are going to use object of ImageView class for displaying our image. We will use our Image class object as an argument:

ImageView image = new ImageView(imageFile);

To load our sound file we are going to use class AudioClip:

AudioClip sound = new AudioClip("file:rainSound.wav");

Our sound file will be played with:

sound.play();

To have control over starting and stopping play of our sound file we are going to add button. The button is going to be green color and say “play”, when the file is not playing. It will be red and say “stop”, when the file is playing:

Button button = new Button("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");

button.setOnAction(event -> {if (button.getText().equals("PLAY")) {
sound.play();
button.setText("STOP");
button.setStyle("-fx-background-color: #FF0000 ");
} else {
sound.stop();
button.setText("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");
}
});

We are going to use BorderPane class to position our image and button.

BorderPane container = new BorderPane();
container.setTop(image);
container.setCenter(button);

After this we need to use Scene class that will set the scene within our Stage window:

Scene scene = new Scene(container);

window.setScene(scene);
window.show();

The complete code for displaying image file and playing sound file would look like this:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.scene.media.AudioClip;

public class Main extends Application {

@Override
public void start(Stage window){

window.setTitle("SOUNDS OF NATURE");

Image imageFile = new Image("file:rain.jpeg", 300,200,false,false);
ImageView image = new ImageView(imageFile);
AudioClip sound = new AudioClip("file:rainSound.wav");

Button button = new Button("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");

button.setOnAction(event -> {if (button.getText().equals("PLAY")) {
sound.play();
button.setText("STOP");
button.setStyle("-fx-background-color: #FF0000 ");
} else {
sound.stop();
button.setText("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");
}
});

BorderPane container = new BorderPane();
container.setTop(image);
container.setCenter(button);

Scene scene = new Scene(container);

window.setScene(scene);
window.show();

}

public static void main(String[] args) {
launch(Main.class);
}
}

The above application looks like that:

Lets have four images files and four sound files. We are going to use Class GridPane for displaying our BorderPanes that contain images and buttons for playing sound files.

GridPane bigLayout = new GridPane();

We are going to write method for creating BorderPanes that contain images and buttons for playing sound files:

public BorderPane createBorderPane( String imageFileName, String soundFileName) {
Image imageFile = new Image(imageFileName, 300,200,false,false);
ImageView image = new ImageView(imageFile);
AudioClip sound = new AudioClip(soundFileName);

Button button = new Button("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");

button.setOnAction(event -> {if (button.getText().equals("PLAY")) {
sound.play();
button.setText("STOP");
button.setStyle("-fx-background-color: #FF0000 ");
} else {
sound.stop();
button.setText("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");
}
});

BorderPane container = new BorderPane();
container.setTop(image);
container.setCenter(button);

return container;
}

We are going add the BorderPanes to our GridPane:

bigLayout.add(createBorderPane("file:rain.jpeg",
"file:rainSound.wav"),0,0);
bigLayout.add(createBorderPane("file:oceanWaves.jpeg",
"file:oceanSound.wav"),1,0);
bigLayout.add(createBorderPane("file:birds.jpeg",
"file:birdsSong.wav"),0,1);
bigLayout.add(createBorderPane("file:cricket.jpeg",
"file:cricketSound.wav"),1,1);

and Scene class to display our scene in widow:

Scene scene = new Scene(bigLayout);

window.setScene(scene);
window.show();

The final code looks like this:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.scene.media.AudioClip;

public class Main extends Application {

@Override
public void start(Stage window){

window.setTitle("SOUNDS OF NATURE");

GridPane bigLayout = new GridPane();

bigLayout.add(createBorderPane("file:rain.jpeg","file:rainSound.wav"),0,0);
bigLayout.add(createBorderPane("file:oceanWaves.jpeg","file:oceanSound.wav"),1,0);
bigLayout.add(createBorderPane("file:birds.jpeg","file:birdsSong.wav"),0,1);
bigLayout.add(createBorderPane("file:cricket.jpeg","file:cricketSound.wav"),1,1);

Scene scene = new Scene(bigLayout);

window.setScene(scene);
window.show();

}

public BorderPane createBorderPane( String imageFileName, String soundFileName) {
Image imageFile = new Image(imageFileName, 300,200,false,false);
ImageView image = new ImageView(imageFile);
AudioClip sound = new AudioClip(soundFileName);

Button button = new Button("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");

button.setOnAction(event -> {if (button.getText().equals("PLAY")) {
sound.play();
button.setText("STOP");
button.setStyle("-fx-background-color: #FF0000 ");
} else {
sound.stop();
button.setText("PLAY");
button.setStyle("-fx-background-color: #32CD32 ");
}
});

BorderPane container = new BorderPane();
container.setTop(image);
container.setCenter(button);

return container;
}

public static void main(String[] args) {
launch(Main.class);
}
}

The result of running the above application looks like this:

The image and sound files need to be put in src directory:

Happy coding my friends!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store