Playing MP3s: Introducing SoundPlayer audio component

General
1

Using IT Mill Toolkit 5.3.0 RC5 I created a simple sound player component together with a sample application. You can see them in action at:

http://sami.virtuallypreinstalled.com/soundplayer/
 (Application source code:
SoundPlayerSampleApplication.java
)

The server-side ‘SoundPlayer’ component is used like this:

// Instantiate
SoundPlayer player = new SoundPlayer();

// Start playing
player.play("http://url-to-some-mp3-file");

// Stop the player
player.stop();

To react to player state changes you can register a listener:

player.addListener(new SoundPlayer.StateChangeListener() {
	public void playerStateUpdated(SoundPlayer player) {
		// if (player.isPlaying()) { ... }
	}
});

The full source code for this project is hosted in the incubator area:

http://dev.itmill.com/svn/incubator/SoundPlayerSample/

Implementation details:

The client-side player is implementd using ‘gwt-sound’, which in turn uses ‘SoundManager 2’ Javascript wrapping and extending Flash 8’s sound API.
gwt-sound:
http://code.google.com/p/gwt-sound/

SoundManafer2:
http://www.schillmania.com/projects/soundmanager2/

2

Cool idea! How about combining this with the UI Jouni created: http://forum.itmill.com/posts/list/594.page

3

Yep! :slight_smile: Actually that was the thing that originally inspired me.

I noticed that there were no good samples showing how to play sounds in a IT Mill Toolkit application, so I put all the small things together into this sample.

I’ll have to talk with Jouni about back-end logic integration :slight_smile:

4

Hi all!

I made quick instructions how to include this widget into your IT Mill Toolkit application:

http://dev.itmill.com/svn/incubator/SoundPlayerSample/readme.txt

Just copy these JARs to WEB-INF/lib and follow the instructions:

– Sami

5

Hi,

Just happened to read the GWT blog were they discuss using SoundManager2 with GWT.

Might be interesting reading for someone:

http://googlewebtoolkit.blogspot.com/2009/03/giving-your-gwt-application-voice.html

// Jonas

6

Update from the world of server-side sound control:

I ported the sound player component from IT Mill Toolkit to Vaadin. Demo is still here:

http://sami.virtuallypreinstalled.com/soundplayer/

And source (and component jar) is now here:

http://dev.vaadin.com/svn/incubator/SoundPlayer/

It still uses the same version
gwt-sound
 that you can find under WebContent/WEB-INF/lib.

Only new feature I added in this release is pause/resume, which I hacked over the gwt-sound as it does not actually support it (although sm2 does).

Anyways: make your Vaadin applications sound good :slight_smile:

7

Cool thing! thanks :slight_smile:

8

Hallo again,

i try to import the soundplayer into my vaadin application, but is doesn’t work. i like to play sound when the user click on a button. This is my code:

liveButton.addListener(new Button.ClickListener()
{

        @Override
        public void buttonClick(ClickEvent event)
        {
            SoundPlayer player = new SoundPlayer();
            player.play("D:\test.mp3");
        }
    });

Furhtermore the Demo doesn’t work. I choose an mp3 File from the list and click play and i doesn’t hear anything!

Thanks for help,
Michel

9

This probably does not work. The String parameter should represent an valid URL to a mp3 file. You can test it for validity by copy-pasting to the browser address - a download dialog or an embedded player should pop up. Maybe local URLs like file://… work, but haven’t tested that.

Which browser you are using? The demo seems to play ok at least with Firefox 3.6, Chrome 5.0 and Safari 4.0.5. Demo should start playing immediately when a song is selected. The mp3s are streamed directly from creativecommons.org.

EDIT:
… one more thing: Have you remembered to recompile the widgetset? Here is how:
http://vaadin.com/directory/help/using-vaadin-add-ons

10

For me the example site also doesn´t work. I am using Safari 5.0.2 on Mac

any ideas ???

11

Well… no. :slight_smile: I’ve testing with Safari (5.0.2) and for me it seems to work as designed. Maybe network problems or a flash blocker?

12

Don’t seem to be able to play any mp3 in my app in any browser on either Mac or Win Vista. Your sample application works for me, but my app does not, using your code example. Maybe missing some dependency?

13

Solved my own problem: apparently the soundplayer component needs to be a direct child of the main window, not nested within some other panel. Hope this helps someone else.

14

Hmm… an interesting finding. Haven’t realized that before and can’t think of any reason why it behaves like this. Anyway, good to know there is a workaround.

15

At first: I like this addon. Gives my application the touch it separates from others when playing background music :slight_smile:

And thanks Mike Bailey for your workaround, I’ve found the same issue and managed myself to do the same workaround, and now I am sure that not my app was the problem :slight_smile:

@Sami Ekblad
I’ve got into troubles to use the SoundPlayer within GAE when trying to use the SoundPlayer.StateChangeListener. Because this interface does not implement Serializable, it is will always generate a NotSerializableException in Class where the anonymous inner class SoundPlayer.StateChangeListener is declared.

16

I am unable to make this work …

I am trying to use this for a TouchKitApplication.

I added the GWT-Sound.jar & SoundPlayer.jar to my WEB-INF/lib directory. I thought that’s all I needed to do to make it work in the code.

I use it as:

SoundPlayer player = new SoundPlayer();
player.play( … url … );

SoundPlayer is initialized and added to the MainWindow.

I am not sure what else it takes for it to work.

Any help is greatly appreciated

Thanks

SL

17

I am unable to make this work …

I am trying to use this for a TouchKitApplication.

I added the GWT-Sound.jar & SoundPlayer.jar to my WEB-INF/lib directory. I thought that’s all I needed to do to make it work in the code.

I use it as:

SoundPlayer player = new SoundPlayer();
player.play( … url … );

SoundPlayer is initialized and added to the MainWindow.

I am not sure what else it takes for it to work.

Any help is greatly appreciated

Thanks

SL