Adding Multimedia to Google Web Toolkit (GWT) Applications

Federico Kereki demonstrates ways to add sound (and, by extension, video) to your GWT-based website using some relatively easy coding methods, with and without resorting to additional libraries. You'll also learn how to adjust your code to accommodate both HTML5-enabled and Internet Explorer browsers, depending on the user's settings, by using the advanced 'deferred binding' technique.

From the author of

From the author of

Just a short time ago, I had to develop a Call Center type of application, using Google Web Toolkit (GWT). This application was to poll a server, and when a certain situation was detected, attract the attention of the user by means of a sound. Adding sounds (and videos) to GWT applications isn't difficult, but complications arise from the lack of standards of some browsers. In this article, we'll look at several ways to add multimedia to an application, using some of GWT's more interesting features, such as JavaScript Native Integration (JSNI) and deferred binding.

Before Starting Out

Before dealing with implementation details, let's take some precautions. Multimedia support in GWT and in browsers is evolving quickly, and no standard has been established. This is just a fancy way of saying that you're on your own, and whatever works today may not work tomorrow! Thus, no matter which API or HTML option you pick, a few months from now you may have to change implementations. After selecting a solution for this example, we'll wrap its functionality in classes of our own, so the rest of our application will be immune to implementation changes.

If you start by assuming that you'll have to recode part of your application, you'll be glad to be able to tweak just a few classes, instead of having to make changes all over your code.

Let's start with the audio problem that motivated this article. Since all we want is the capability of playing some sounds, we could do that with a simple abstract base class such as AudioElement. All the audio classes we write will extend this class. The constructor will receive the URL for the audio clip, and the class will also provide a play() method. See Listing 1.

Listing 1 The basic AudioElement class will be extended by all
our specific audio classes.

package com.fkereki.multimedia.client;
/**
* Define the base class for all audio elements. Since there is no
* standard audio class, we don't want to work directly with any
* specific classes.
*
* Note that this is actually an Adapter pattern; see
* http://c2.com/cgi/wiki?AdapterPattern or
* http://en.wikipedia.org/wiki/Adapter_pattern for more on this.
*/
public abstract class AudioElement {
public AudioElement(final String audioUrl) {
}
public abstract void play();
}

We could have some extra methods and options (such as autoplay or looping), but they don't represent real complexities, and would be easy to add.