Adding Sound to the FlashCard JavaFX Game

I finally had a small amount of time to look into adding sound to my flashcard java fx example, something I have wanted to do for a while now. When I finally got the time, I realized that it isn’t so difficult since most of the hard work has already been done.

The first step in adding any major functionality to an application like this is searching Google to see if anyone has done this before. I found an example of using MP3’s in a JavaFX application, but I didn’t like it. I didn’t like it because the article seems to point to using this embeddedmp3 library which I did not see the source for. The library in the article, however, is based on JLayer, and JLayer is what I used for my FlashCard game.

After including the 1.0 version of JLayer into my project, I created a utility class to be used for playing the np3 files. I called it Mp3.java.

What I wanted was a class that would hold a reference to the mp3 to be played for a particular card, so I decided that it would have a private attribute to hold that location. My first mistake was forgetting the type of application I was dealing with and I used a String pointing to the actual file to hold the location. I looked at what I was doing for images and just did the same sort of thing.

For the images I was storing them inside the jar itself in a package “flashcardjfx.img”, so for the mp3’s I put them in a package called “flashcardjfx.sounds”. The constructor for my Mp3 class (which at this point, is not really a util anymore, but once I put it in that package I was too lazy to move it) takes a String that is the location. I saw that the JLayer Player needs an InputStream so I created a FileInputStream on that location and was storing that.

When I tried to test my application, I kept getting an error that the file could not be found. I think when I moved the mp3’s to a c:\sounds directory, they were found, but that wasn’t going to help me much when I deployed. So, what to do? Well, after playing around with it for a little while, it dawned on me, that the String I was passing to the Image was not for a file, but a URL. Of course, right? I am dealing with JavaFX here and an application running via Web Start. So… once I changed my reference from a File to a URL, bingo!, it all started coming together.

My MP3 class is shown here, it is also now included in the down-loadable source code.

public class Mp3 {
    private URL url = null;

    public Mp3(String url) {
        try {
            this.url = new URL(url);

        } catch (IOException ex) {
            Logger.getLogger(Mp3.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public void play() throws FileNotFoundException, JavaLayerException {
        try {
            //Make sure to open and close the player each time!
            Player mp3Player = new Player(url.openStream());
            mp3Player.play();
            mp3Player.close();
        } catch (IOException ex) {
            Logger.getLogger(Mp3.class.getName()).log(Level.SEVERE, null, ex);
        }
    };  

}

Simple, right? Not much to it. To use it in my FlashCard JavaFX class I had to add a private variable to hold the “Mp3″.

private attribute mp3: Mp3;

Then, at the end of the flip() operationI added this line:

mp3.play();

And that is about it to get it to play.

For the constructor, I added a String to the location of the mp3 and I just set my mp3 variable to a new Mp3 instance based on that location:

   operation FlashCard.FlashCard(aWord:String, anImage:String, aMp3:String) {
      mp3 = new Mp3(aMp3);
      word = new Word(aWord);
      cardImage = new CardImage(anImage);
   }

Now to create a new flashcard, I just pass in the mp3 location as well as the word and the image location.

insert new FlashCard("cat", "{__DIR__}/img/cat.png", "{__DIR__}/sounds/cat.mp3") into flashcards;

It has dawned on me that if I keep the naming structure the same, I only need to pass in the word, but that may be too much menial cleanup work for something that is just an example.

So the new source is available where the old source was: here.

The application itself can be launched by clicking here. You can thank my youngest daughter, Cassie and myself for the voicework. I will probably update with a version that does not use my voice, as either her’s or her sister’s is much better.

The older articles can be found here:

Learning JavaFX

JavaFX Example - FlashCard Game

JavaFX FlashCard Source Code and Web Start Link

I’ll be posting an article about deploying since I couldn’t remember how to do it this time either.

Share/Save/Bookmark

Related posts:

  1. JavaFX Example - FlashCard Game Note: An updated version of the source code for JavaFX...
  2. JavaFX Flashcard Example Updated for 1.1 I have updated the sourcecode for my JavaFX flashcard game...
  3. JavaFX FlashCard Source Code and Web Start Link This is the post I promised that contains a link...
  4. Create and Deploy a JavaFX WebStart Application I realized when I updated my FlashCard JFX game that...
  5. Learning JavaFX This is my week off.  I had a nice little...

1 comment

  1. rlugojr Oct 24

    Hi Robert,
    This is perfect, exactly wht i was looking to put together for my daughter, but I can’t download the source code, error 404. Could you please e-mail me a copy?

Leave a reply

You must be logged in to post a comment.