March 2, 2021
Hot Topics:

Using NetBeans to Develop a JavaFX Desktop Application

  • By Anghel Leonard
  • Send Email »
  • More Articles »

Creating the DeltaAudioVideoPlayers.fx Class

You will complete the application by adding an audio/video player, as shown in Figure 7.

Click here for larger image

Figure 7: Adding an Audio/Video Player

The audio player's interface is made up of two buttons, play and stop. These are Swing buttons obtained from the javafx.ext.swing.SwingButton class. Both are decorated with two images encapsulated as SwingIcon objects (the play image is named play.png and the stop image is named end.png—both are stored in the deltacars/img folder). While you can add SwingButton from the Swing Components Palette, you must insert the SwingIcon manually.

The play button will call a JavaFX user-defined function named playMusic, while the stop button will call a user-defined function named stopMusic. These functions implement the audio player business logic using JMF (Java Media Framework) classes, so before implementing these functions, you have to add the jmf.jar library in the project classpath. JMF enables you to add audio, video, and other time-based media to applications and applets built on Java. Download the jmf.jar library and add it in the DeltaCars classpath as follows:

  1. In the Projects view, expand the DeltaCars node.
  2. Right-click on the Libraries node and select the Add JAR/Folder option from the contextual menu.
  3. In the file dialog window, navigate to the location of jmf.jar and press the Open button.

Now, the user-defined playMusic function should look like this:

var getplayerready=false;
var player: Player;
  function playMusic() {
    while(getplayerready == false)
     var url = new URL("file:///C://JavaApplications//JavaFX//DeltaCars//song//demo.wav");
     var ml = new MediaLocator(url);
     player = Manager.createPlayer(ml);
     getplayerready = true;

The stopMusic function should look like this:

function stopMusic() {
    getplayerready = false;

Author's Note: The demo.wav file is a sample audio file stored in the DeltaCars/song folder. Notice that the URL object indicates the absolute location. Modify it according to your configuration.

Next, create and add the two SwingButtons and two SwingIcons in the default Group, like this:

var btnPlay = Image {
    url: "{__DIR__}img/play.png"
     var btnStop = Image {
    url: "{__DIR__}img/end.png"
    var iconPlay =  SwingIcon {
        image: btnPlay
    var iconStop =  SwingIcon {
        image: btnStop
return Group {
   content: [
                SwingButton {
                    icon: iconPlay
                    translateX: 670
                    action: function() {
                SwingButton {
                    translateX: 650
                    action: function() {

The audio player is ready. Now, you're ready to add the video player! You will use the JavaFX Media Player, a JavaFX component that embeds a resizable video playback window and a control bar that you can turn on and off. The control bar features a play/pause toggle, a progress indicator, the current playing position time, the total duration time, and a volume control. The JavaFX Media Player component is currently available as a binary file (you can find lib/mediacomponent.jar in the {NetBeans 6.5_HOME}/javafx2/javafx-sdk1.0/samples/SimpleVideoPlayer/webstart/lib folder; click here for a detailed tutorial about using the JavaFX MediaComponent). Add it to your project classpath in the same manner as you added the jmf.jar library.

Next, you have to define a MediaComponent instance like this:

    package var oxscale:Number = 10.0;
    package var mediaBox:MediaComponent = MediaComponent {
    // set the media and make the component visible
    mediaSourceURL : "file:///C://JavaApplications//JavaFX//DeltaCars//movie/demo.mpg"
    // the position and size of the media on screen
    translateX: bind 125+270-2.3*oxscale,
    translateY: 220,
    mediaViewWidth :  525,
    mediaViewHeight: 150
    // determines if the control bar is below the media or on top with a fade in
    staticControlBar: true
    // don't play the movie after is loaded
    mediaPlayerAutoPlay: false
    // set the volume
    volume: 1.0
Timeline {
            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 15s
                    canSkip: true
                    values: [
                        oxscale => 100 tween Interpolator.LINEAR

The code has a Timeline for the oxscale variable because your video player will use an OX translate from right to left.

Author's Note: The demo.mpg file is a sample video file stored in the DeltaCars/movie folder. Notice that the video location is indicated through absolute path. Modify it accordingly to your configuration.

Finally, surround the video player with a Rectangle node (the videoBorder variable). This node will appear on screen through a rotate and a scale transition (these kinds of transitions are available in Transformations Palette). These transitions will use the same Timeline as the MediaComponent.

Putting it all together, you will have the DeltaAudioVideoPlayers.fx class in Listing 3.

Page 4 of 5

This article was originally published on July 1, 2009

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date