Case Study: National Flags and Anthems

This case study presents a program that displays a nation’s flag and plays its anthem.

The images for seven national flags, named flag0.gif, flag1.gif, . . . , flag6.gif for Denmark, Germany, China, India, Norway, United Kingdom, and United States are stored under www.cs.armstrong.edu/liang/common/image. The audio consists of national anthems for these seven nations, named anthem0.mp3, anthem1.mp3, . . . , and anthem6.mp3. They are stored under www.cs.armstrong.edu/liang/common/audio.

The program enables the user to select a nation from a combo box and then displays its flag and plays its anthem. The user can suspend the audio by clicking the || button and resume it by clicking the < button, as shown in Figure below.

The program is given in the code below.

package application;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.stage.Stage;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ComboBox;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;

public class FlagAnthem extends Application {
    private final static int NUMBER_OF_NATIONS = 7;
    private final static String URLBase = "https://drive.google.com/file/d/1G3iZljAHWwaUv-lpO8oFhRg3oToBCl7v/view?usp=sharing";
    private int currentIndex = 0;

    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        Image[] images = new Image[NUMBER_OF_NATIONS];
        MediaPlayer[] mp = new MediaPlayer[NUMBER_OF_NATIONS];

        // Load images and audio
        for(int i = 0; i < NUMBER_OF_NATIONS; i++) {
            images[i] = new Image(URLBase + "/image/flag" + i + ".gif");
            mp[i] = new MediaPlayer(new Media(URLBase + "/audio/anthem/anthem" + i + ".mp3"));
        }

        Button btPlayPause = new Button(">");
        btPlayPause.setOnAction(e -> {
            if (btPlayPause.getText().equals(">")) {
                btPlayPause.setText("||");
                mp[currentIndex].pause();
            } else {
                btPlayPause.setText(">");
                mp[currentIndex].play();
            }
        });

        ImageView imageView = new ImageView(images[currentIndex]);
        ComboBox<String> cboNation = new ComboBox<>();
        ObservableList<String> items = FXCollections.observableArrayList("Denmark", "Germany", "China", "India", "Norway", "UK", "US");
        cboNation.getItems().addAll(items);
        cboNation.setValue(items.get(0));
        cboNation.setOnAction(e -> {
            mp[currentIndex].stop();
            currentIndex = items.indexOf(cboNation.getValue());
            imageView.setImage(images[currentIndex]);
            mp[currentIndex].play();
        });

        HBox hBox = new HBox(10);
        hBox.getChildren().addAll(btPlayPause, new Label("Select a nation: "), cboNation);
        hBox.setAlignment(Pos.CENTER);

        // Create a pane to hold nodes
        BorderPane pane = new BorderPane();
        pane.setCenter(imageView);
        pane.setBottom(hBox);

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane, 350, 270);
        primaryStage.setTitle("FlagAnthem"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

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

The program loads the image and audio from the Internet (lines 29–32). A play/pause button is created to control the playing of the audio (line 34). When the button is clicked, if the button’s current text is > (line 36), its text is changed to || (line 37) and the player is paused (line 38); If the button’s current text is ||, it is changed to > (line 40) and the player is paused (line 41).

An image view is created to display a flag image (line 45). A combo box is created for selecting a nation (line 46–47). When a new country name in the combo box is selected, the current audio is stopped (line 51) and the newly selected nation’s image is displayed (line 53) and the new anthem is played (line 54).

JavaFX also provides the AudioClip class for creating auto clips. An AudioClip object can be created using new AudioClip(URL). An audio clip stores the audio in memory. AudioClip is more efficient for playing a small audio clip in the program than using MediaPlayer. AudioClip has the similar methods as in the MediaPlayer class.