(For more resources on Java, see here.)

Playing audio with MediaPlayer

Playing audio is an important aspect of any rich client platform. One of the celebrated features of JavaFX is its ability to easily playback audio content. This recipe shows you how to create code that plays back audio resources using the MediaPlayer class.

Getting ready

This recipe uses classes from the Media API located in the javafx.scene.media package. As you will see in our example, using this API you are able to load, configure, and playback audio using the classes Media and MediaPlayer. For this recipe, we will build a simple audio player to illustrate the concepts presented here. Instead of using standard GUI controls, we will use button icons loaded as images. If you are not familiar with the concept of loading images, review the recipe Loading and displaying images with ImageView in the previous article.

In this example we will use a JavaFX podcast from Oracle Technology Network TechCast series where Nandini Ramani discusses JavaFX. The stream can be found at http://streaming.oracle.com/ebn/podcasts/media/8576726_Nandini_Ramani_030210.mp3.

How to do it...

The code given next has been shortened to illustrate the essential portions involved in loading and playing an audio stream. You can get the full listing of the code in this recipe from ch05/source-code/src/media/AudioPlayerDemo.fx.

def w = 400;
def h = 200;
var scene:Scene;
def mediaSource = "http://streaming.oracle.com/ebn/podcasts/media/
       8576726_Nandini_Ramani_030210.mp3";

def player = MediaPlayer {media:Media{source:mediaSource}}

def controls = Group {
 layoutX:(w-110)/2
 layoutY:(h-50)/2
 effect:Reflection{
   fraction:0.4 bottomOpacity:0.1 topOffset:3
 }
 content:[
  HBox{spacing:10 content:[
   ImageView{id:"playCtrl"
    image:Image{url:"{__DIR__}play-large.png"}
    onMouseClicked:function(e:MouseEvent){
     def playCtrl = e.source as ImageView;
     if(not(player.status == player.PLAYING)){
       playCtrl.image =
         Image{url:"{__DIR__}pause-large.png"}
       player.play();
     }else if(player.status == player.PLAYING){
       playCtrl.image =
         Image{url:"{__DIR__}play-large.png"}
       player.pause();
     }
    }
   }
   ImageView{id:"stopCtrl"
     image:Image{url:"{__DIR__}stop-large.png"}
     onMouseClicked:function(e){
     def playCtrl = e.source as ImageView;
       if(player.status == player.PLAYING){
          playCtrl.image =
              Image{url:"{__DIR__}play-large.png"}
          player.stop();
       }
      }
     }
   ]}
  ]
}

When the variable controls is added to a scene object and the application is executed, it produces the screen shown in the following screenshot:

How it works...

The Media API is comprised of several components which, when put together, provides the mechanism to stream and playback the audio source. To playback audio requires two classes, including Media and MediaPlayer. Let's take a look at how these classes are used to playback audio in the previous example.

• The MediaPlayer—the first significant item in the code is the declaration and initialization of a MediaPlayer instance assigned to the variable player. To load the audio file, we assign an instance of Media to player.media. The Media class is used to specify the location of the audio. In our example, it is a URL that points to an MP3 file.
• The controls—the play, pause, and stop buttons are grouped in the Group object called controls. They are made of three separate image files: play-large.png, pause-large.png, and stop-large.png, loaded by two instances of the ImageView class. The ImageView objects serve to display the control icons and to control the playback of the audio:
  • When the application starts, imgView displays image play-large.png. When the user clicks on the image, it invokes its action-handler function, which firsts detects the status of the MediaPlayer instance. If it is not playing, it starts playback of the audio source by calling player.play() and replaces the play-large.png with the image pause-large.png. If, however, audio is currently playing, then the audio is stopped and the image is replaced back with play-large.png.
  • The other ImageView instance loads the stop-large.png icon. When the user clicks on it, it calls its action-handler to first stop the audio playback by calling player.stop(). Then it toggles the image for the "play" button back to icon play-large.png.

As mentioned in the introduction, JavaFX will play the MP3 file format on any platform where the JavaFX format is supported. Anything other than MP3 must be supported natively by the OS's media engine where the file is played back. For instance, on my Mac OS, I can play MPEG-4, because it is a supported playback format by the OS's QuickTime engine.

There's more...

The Media class models the audio stream. It exposes properties to configure the location, resolves dimensions of the medium (if available; in the case of audio, that information is not available), and provides tracks and metadata about the resource to be played.

The MediaPlayer class itself is a controller class responsible for controlling playback of the medium by offering control functions such as play(), pause(), and stop(). It also exposes valuable playback data including current position, volume level, and status. We will use these additional functions and properties to extend our playback capabilities in the recipe Controlling media playback in this article.

See also

• Accessing media assets
• Loading and displaying images with ImageView