Audio

Hi, i want to show notification to user which arrives over JMS. I am catching messages in my UI class. To show notification is not big deal, but i want also play sound. I found Audio class very useful but my problem is i cant find place where to attach my Audio component.

Any suggestions?

I don’t really understand the question. Audio is a “normal” Vaadin component; you just add it the UI - see the
Sampler
. If you want to make it invisible, style it in CSS with (display:none)

To set the source of the sound to play, use the Audio#setSource.

So, for this, I think I’d
a) Always add an Audio to my main UI
b) Style it to be invisible via CSS (we don’t really need a player-user interface for this use-case)
c) When the message arrives in the UI, just do audio.setSource(resource-of-the-sound-effect), the audio.play

Am I missing something here?

Charles.

Hi Charles,

i just added Audio component like you said to main UI, but i still dont hear anything :wink: May be the reason for that is Navigator component? Please check my code and tell me where should i attach my Audio.


        ...
	private Audio audio = new Audio(null, new ThemeResource(
			"sounds/sounds-949-you-wouldnt-believe.mp3"));
	

	@Override
	protected void init(VaadinRequest request) {
		// TODO Auto-generated method stub

		VerticalLayout layout = new VerticalLayout();
		
		audio.setAutoplay(false);
		audio.setShowControls(false);
		audio.setHtmlContentAllowed(false);
		audio.setAltText("Can't play media");
		audio.setStyleName("invisible");
		
		layout.addComponent(audio);
		
		setContent(layout);

		Navigator navigator = new Navigator(this, this);
		navigator.addView("", MainView.class);
                ...


         ...
	@Override
	public void receive(Message arg0) throws MessageListenerException {
		audio.play();

		Notification notif = new Notification(
					"Awaiting for Something",
					"</br>Notification body",
					Type.TRAY_NOTIFICATION);

		notif.setDelayMsec(3000);
		notif.setHtmlContentAllowed(true);
    	        notif.setStyleName("message");

	        // Show it in the page
	        notif.show(MyApplication.getCurrent().getPage());

	}

UPD: after i commented out the Navigator part everything works. How do i make this work with Navigator? =)

Hi : I’ve no idea, as I don’t use Navigator or Audio :slight_smile:

As hunch, though, try using an ExternalResouce for the sound effect (e.g. new ExternalResource(“http://soundfxnow.com/soundfx/SuperMarioBrothers-1upExtraLife.mp3”) ) - is it possible that using a resource from inside your web application is interfering with Navigator?

Cheers,

Charles.

I’m also just guessing by looking at your code snippet but it’s possible that the Navigator is navigating to the MainView which is replacing the content of your view display. That is, you’re building a layout which contains the audio and setting that as the content, but then you’re passing ‘this’ to the navigator as the view display so it may/will replace the content as the user navigates.

Try attaching the audio directly in the view that is displayed at the time the JMS message comes in or restructure your layout a bit so the view display that you pass to the navigator isn’t the same component that you’re attaching your audio to. For example, you could attach the audio at the UI level and then setup a separate component to be the view display.

-mike

I know this is an old post, but I seem to be having the same problem as the OP. @Denis - did you ever get this working? And if you did, how?

Nevermind - recompiling the widget set fixed it! Don’t know why, but I’m good.