Usage of Audio component

asked 2020-11-17 23:27:32 +0800

rmalik gravatar image rmalik
31 2

Hi all,

I am trying to follow the following documentation page: link

I have at the moment local audio files locates at my folder: /home/remie/Downloads/Audio

Below is my example:

I use the following source tag: src="/home/remie/Downloads/Audio/error_01.wav" and activate the controls with controls="true"

However it displays a set of audio controls but i cannot play my sound file.

Should the sound file exist in the Java Project or can it reside somewhere else?

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted

answered 2020-11-18 11:10:14 +0800

MDuchemin gravatar image MDuchemin
2228 1 5
ZK Team

updated 2020-11-18 11:11:04 +0800

Hi rmalik,

The src attribute will accept a url relative to the ServletContext. (the root of your webapp) This said, you can still use a file located outside of your ServletContext by using the setContent() method on Audio, and passing the File directly:

myAudio.setContent(new AAudio(new File("D:\\test\\file.mp3")));

(test here on windows, but works the same on linux)

You can do this in a composer, or by returning the AAudio in a getter of your viewModel in MVVM

link publish delete flag offensive edit

answered 2020-11-18 19:02:30 +0800

rmalik gravatar image rmalik
31 2

Hi MDuchemin,

Thanks you for your reply! It was exactly what i was looking for!

However i have still a small question. I noticed that i have to place the audio tag in my zul. I would really like just to create a new Audio object in my VM (Like Audio audio = new Audio()).

When i do this and i debug the line i see that my page is null:

if (_page != null) {
            getAttachedUiEngine().addResponse(key, response, priority);
        } else if (response.getDepends() != this) {
            final UiEngine uieng = getCurrentUiEngine();
            if (uieng != null)
                uieng.addResponse(key, response);

Do you know how i can attach my current page to the Audio component?

link publish delete flag offensive edit


I was to quick to ask. You can set it with audio.setPage(Executions.getCurrent().getDesktop().getPage("indexPage")); Thanks again MDuchemin.

rmalik ( 2020-11-18 20:55:45 +0800 )edit

yes you have to add a component to a page either as a root component via setPage() or as a child below another component via setParent(). This is the equivalent of adding the component in a zul page. the result will be the same.

cor3000 ( 2020-11-19 10:53:49 +0800 )edit

answered 2020-12-02 00:31:24 +0800

rmalik gravatar image rmalik
31 2

@cor3000 i used both ways. They give me problems with multiple browsers. I use Opera and Chrome. I get the following message: The parent and child must be in the same desktop.

if (parentpg != null && childpg != null && parentpg.getDesktop() != childpg.getDesktop())
                throw new UiException("The parent and child must be in the same desktop: " + parent);
link publish delete flag offensive edit

answered 2020-12-02 17:13:32 +0800

cor3000 gravatar image cor3000
6280 2 7

I assume the term Desktop isn't clear otherwise the error message already explains what's wrong.

In ZK a Desktop is the server side representation of a browser tab (or iframe). A Session can contain multiple desktops.

This error message should only occur in case you are trying to share components between Desktops, e.g. by storing them in the session and then trying to re-use them in another Desktop (that's my first guess). If that's true, simply don't do that, create/use components only within one Desktop.

(The browser Opera/Chrome is not involved here, since this happens at server side in java code).

link publish delete flag offensive edit

answered 2020-12-15 17:48:59 +0800

rmalik gravatar image rmalik
31 2

updated 2020-12-15 17:50:29 +0800

Yes, that is correct cor3000. I used the following in the VM:

public void initSetup( BindContext ctx, @ContextParam( ContextType.VIEW ) Component view )

This made ZK behave unexpectedly on different browsers. With a colleague i changed it to the following:


This seems to work fine. Thanks again for your explanation.

link publish delete flag offensive edit


I can't explain or don't understand what this would change. view.getPage() and view.getPage().getFirstRoot().getPage() should resolve to the exact same page object. Still you cannot have the audioManager be attached to multiple pages. Just create a new one for each time you use it.

cor3000 ( 2020-12-16 10:33:12 +0800 )edit

Same here, AFAIK getting the first root of a page is still in the same page. Most importantly, you should just create a new component when you create a new page, and set the media as value. The component itself shouldn't be moved or copied between pages.

MDuchemin ( 2020-12-16 15:24:02 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2020-11-17 23:27:32 +0800

Seen: 19 times

Last updated: Dec 15 '20

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More